ALIPAY

Alipay app for iPhone new version of alipay app for
iPhone platfrom | Phasic Report documented by Liu Chenhuan January, 2011

project brief: it is a project that focus on developing
a new version of alipay application for iphone platform, objective in enhance the experience of mobile alipay users. ၛՎቔູఏׄđᄝ҂ڿэགྷႵۿି֥ׄభิ༯ղ֞ ໴۱௜෻၂ᇁྟ Ⴊ߄*" Їওྐ༏ࡏܒ֥๤၂aࢌ޺ႄ֝ Էྍࢌ޺ ุགྷҵၳ߄

proposed process: D.C Understand -Design Context -Users Implement Evaluation &
Reﬁne Release & Feedback new need Concept -SLIP -Go to Deep ؓླ౰֥ࢳ؀Їওؓഡ࠹Мࣟaე࣢ ၛࠣႨ޼֥৘ࢳbᄝᆃ۱ࢨ؍đ໡ૌ ࣉྛਔࣨбaགྷႵ໙ีٳ༅aႨ࿹ඔ ऌٳ༅ၛࠣ၂൭ט࿹đູᆭު֥ഡ࠹ ᅚषิ܂၇ऌb ഡ࠹ۀ୑ࢨ؍൞ᄝሹࢲVOEFSTUBOE ࢨ؍JOTJHIUT֥ࠎԤഈđCBMBODFᆭު ֥ࢳथٚσb ᄝEFNPປӮᆭު֥௟ܙࢨ؍đᇂ ೆoህࡅ௟ബpၛࠣoުᇂႨ޼ॖႨ ྟҩ൫pb ᄝӁ௖ᇛ௹؋۷ྍॹ֥གྷሑ༯đਆᇕ ௟ܙٚൔ࠻ॖࠆ֤ऎႵህြМ֥ࣟህ ြ௟ܙႻॖ๐֞টሱႨ޼֥ബၻđ๝ ൈᄝEFNP֥ࠎԤഈҩ൫đॖх૧ჰ ྘Ϣϰࢨ؍֮Ќᆇ֥अཋྟđႵིҀ ԉϢϰ௟ബބჰ྘ҩ൫b

Design Context insights of project objective|current problems|competitive comparison documented by
Liu Chenhuan February, 2011

design context 01 insights of project objective in order to
identify the opportunities in design context ೂቐ๭ቕѓ ޘᇠູႮVTFSඔਈथק֥NBSLFUTIBSF ሺᇠᄵս і෮ડቀ֥ۿିླ౰ ᄝЌӻሺᇠ҂э֥౦ঃ༯ ॖᄝਆٚ૫ ቓԛڿ೿ Ⴊ߄གྷႵӁ௖đӁԛ۷ࡄุ֥ဒഡ࠹ ᆚ౼ ۷؟֥Ⴈ޼ಕbభᆀᄝᆭު֥གྷႵ໙ีٳ༅ၛࠣႨ࿹ᇏ߶ ႵࢲંӁള طުᆀᄵླေᄎႏ҆ٳ֥Ⴊ߄๝҄ࣉྛb

design context 02 current problems གྷႵ໴۱௜෻֥൭ࠏᆦڱЏ҂๤၂đ໭௖இ്љ؇đႨ޼ྐ಩ۋ֮ၞDPOGVTFE information architecture layout information
visualization ॖ༥߄ູਆ۱۱ٚ૫ğ ࡏܒ໭VTFSNFOUBMNPEFM ֥၇ऌĠ ໃᆌؓႨ޼ླ ౰๤၂ྐ༏Ⴊ༵ࠩb ်૫ࡏܒၛࠣӯགྷ҂๝đ ۴ЧჰၹᄝႿીႵᄝ๤၂ ྐ༏ࡏܒ֥భิ༯đ۴ऌ ۲۱௜෻หྟቓൡ஥b ൪त߄ഈ֥ࠁ੹ᇶေі གྷູ໭๤၂֥൪तڄ۬ ၛࠣ6*്љb ᄝ๤၂ྐ༏ࡏܒ֥ࠎԤഈđ۴ ऌ۲۱௜෻หྟቓൡ஥֥ࢌ޺ ഡ࠹b Ⴈ࿹ٳ༅ಒקႨ޼ླ౰ׄđࣉط ๤၂ྐ༏Ⴊ༵ࠩĠDBSETPSUJOHਔ ࢳႨ޼֥NFOUBMNPEFM ѩၛՎ ູ၇ऌࣉྛ်૫ࡏܒb ๤၂൪तڄ۬đิۚѩ๤၂Ї ওJDPO֩ᄝଽ֥൪तჭ෍്љ ؇b Solutions Problems Product

design context 03 competitive comparison აQBZQBM֥ࣨбٳ༅ ႮႿQBZQBM҂๝֥CVTJOFTTNPEFMაTUSBUFHZၛࠣݓຓປ೿֥ྐႨ༢๤ QBZQBMᄝఃҠቔੀӱഈཌྷбᆭ༯ࢠູࡥֆૼਔđUBTL GMPX္აBMJQBZ൭ࠏ؊նཌྷࣥ๖bఃIJFSBSDIZ֥MPHJDౢ༉ࡥֆ ֻ၂်૫ࡏܒྐ༏ҪࠩٳູඹཛTFOE
SFRVFTU BDDPVOU UPPMT ཌྷбႿᆦڱЏJQIPOF൭ࠏग़޼؊གྷႵϱЧ ൞۷ژކNFOUBMNPEFM֥၂ᇕٳোٚൔ ၛᆦڱ֥ٚཟ߃ٳb౏ః໓Ч۷ऎ౔ބ ৯a֝ཟྟၛིࠣۚྟb

design context 03 competitive comparison აQBZQBM֥ࣨбٳ༅ ๝ູNPOFZUSBOTQPSUFSđQBZQBMཞ൞၂۱USVTUFFđࢤ൳TFOESFRVFTU֥ᇏࢺđ೏ؓٚ҂൞QBZQBM֥Ⴈ޼đᄵؿFNBJMѩ๷ࡩః൐ ႨbطBMJQBZ۷ཞ൞TFSWJDFBQQMJFSđԢਔᆦӻཬح൬ڱॻၛࠣวЏࢌၞđ۷఼טఃյ๙֥ຓ҆അ޼෮ิ܂֥ᆦڱڛༀb ఃק໊ᄝࢸ૫ഈࣼႵᆰࢤ֥ӯགྷb

understand user secondary research|primary research|card sorting documented by Liu Chenhuan
February, 2011

secondary research ൬ࠢགྷႵႨ޼ّঌඔऌၛࠣࢌၞඔऌ๤࠹֥ؽ൭ሧਘࣉྛٳ༅ understand user 01 ۴ऌࢌၞඔऌರБᇛБ ൭ࠏग़޼؊ Ⴈ޼ླ౰໭๤၂ܿੰྟ ၛวЏܓ໾ڱॻ
൬ ॻ ڱॻ ґௐၛࠣ൭ࠏԉᆴູᇶb აႨ޼٠ ซࢲݔޫႋ Ⴈ޼߭٠࠺੣ӯགྷ໙ีॖٳູਆো ၂োടࠣ֞ڄ॥ܿᄵၛࠣ࠯ඌ྘໙ี ໭م๙ ݖഡ࠹ࢳथ ֌ॖ๙ݖҠቔކ৘ྟၛࠣิൕ ໓ЧࣉྛႪ߄čFH۷ڿϾק൭ࠏݼĎ ၂োടࠣ֞ྐ༏൪त߄ၛࠣҠቔ໙ี ॖ๙ݖ Ⴊ߄ྐ༏ࡏܒ҃अ֤֞ࢳथbčFH߅ٮԉ ᆴ࿊հ૫حĎ

primary research--process interview + think aloud understand user 02 ᄝQSJNBSZSFTFBSDIࢨ؍
໡ૌ֥ᇶေٚൔູ๙ݖ٠ซ൬ࠢ൭ࠏᆦڱЏႨ ޼ၛࠣమᄝႨ޼č1$Ⴈ޼Ď໙ีaᇶေ֥൐ႨӆࣟaໃФડቀ֥ླ౰ ၛࠣؓӁ௖֥௹րĠაՎ๝ൈഡᇂ಩ༀđಞႨ޼oUIJOLBMPVEp ܴҳ ѩᯚ๐ః൐Ⴈ൭ࠏᆦڱЏ֥ݖӱၛࠣۋ൳b ᄝVTFS֥࿊ᄴഈ ٠ซభ໡ૌഡקਔQSPGJMFTDSFFO ڭۂਔყ༵ഡק֥Ԛ ࠩሧധႨ޼b

primary research--insights ෮֤JOTJHIUTაభުႨ࿹ٳ༅ࢲݔཌྷ޺DPOGJSNaႆᆣၛࠣޫႋb understand user 02 ԚՑ൐ႨᆀؓࣉೆႋႨ൮۱်૫௹ր༐ຬᆩ֡൭ࠏᆦڱЏग़޼؊ିቓ൉હ ᇶေۿିႋႨ֥MJTUb๝ൈႋॉ੮ؓႿԚՑ൐ႨႨ޼ห൹֥ႄ֝ၛࠣิൕb Ⴈ޼֨੣ު༐ຬၛࠣླေֻ၂ൈࡗࠆ౼֥ྐ༏Їওᅬ޼Ⴥح ླေԩ৘֥ࢌၞb
აᆭުवோٳো֥ྐ༏ّঌ၂ᇁ ቋӈႨۿିູวЏܓ໾֥ڱॻ ໡ေڱॻ ໡ေ൬ॻ ""ڱॻ ґௐ ൭ࠏԉᆴb აෆ֥ࠢؽ൭Ⴈ࿹ඔऌ໖ކ ࢸ૫൪तۋ൳ ҂ܔܲٚ бࢠ೶ᅐJDPO്љྟ҂ۚb აDVSSFOUQSPCMFNٳ༅๤၂ ؓႿ໭࠺ᇾૡ઒ۿି Ⴈ޼ّঌ҂๝ Ⴕದत֤҂ٚь طਸ਼ຓ၂ུಪູ൞бࢠνಆ ିܔࢤ൳ ิ܂ಞVTFSሱ࠭TFUUJOH൞ࢠູކ৘֥ࢳथٚσb Ϻᇹ࿊ཛྙ๝ྴഡ ၂ٚ૫ႮႿགྷႵᇶੀ൭ࠏग़޼؊Ⴈ޼༝ܸሱ࠭ฐ෬࿙౰ճσ ౏ᄝ൭ࠏഈ֥Ҡቔ࿐༝ӮЧࢠ֮ਸ਼၂ٚ૫གྷႵϺᇹྐ༏๝࠙৊ ุ ဒۋҵ ଽಸ໭ൌᇉϺᇹb ؓႿνಆ࡯஍ Ⴈ޼ીႵၩ്֞ఃνಆྟb ۿିഈಞದ৘ࢳଆ޴ FH۷؟ᇏ൭ࠏԉᆴ ބ ܄܋൙ြ࢚ٮᇏ֥࢚൭ࠏٮ ਆᆀۀ୑҂ౢ༉bᄝڿϱᇏླᆜކႪ߄ ҂ֆ൞ྐ༏ࡏܒഈ֥ טᆜ ᄝ໓σၛࠣ൪तႄ֝ഈႵ෮ิശb *"ഈ֥҂ކ৘҂֌൐ࠧь൞ሧധႨ޼္໭مਔࢳᅳ֞ཌྷႋۿି ط౏႕ཙਔႨ޼ؓཌྷႋۿି֥ׄ৘ࢳb Ⴈ޼ؓᆦڱЏ൭ࠏग़޼؊֥ۿିླ౰ҵၳྟࢠն౏଴ၛनޙ౼ച֥౦ঃ༯ ֆཛ֥หק֥ྐ༏ླ౰҂ቀၛቔູ௟஑ྐ༏Ⴊ༵ࠩѓሙ ᄹࡆყ ༵஑؎ၛࠣႨ޼۱ྟ߄ഡקӫູႵི֥ࢳथٚൔb

card sorting--proﬁle QSPGJMF TPSU BOBMZTJT MBCFM WFSJGZ understand user 03
ႮႿवோٳো֥ࢲં൳֞Ⴈ޼ሱദМࣟၛࠣ ෮උਵთ֥႕ཙࢠնđᄝҩ൫ᆭభđ໡ૌ߶ ༵൬ࠢႨ޼֥QSPGJMFđਔࢳཌྷܱሧਘđ߃ٳ మᄝʵԚࠩʵሧധႨ޼đၛьҩ൫ᆭު֥ೱ ࿊ٳ༅b

card sorting--sort QSPGJMF TPSU BOBMZTJT MBCFM WFSJGZ understand user 03
वோٳোٳູਆ۱ࢨ؍ ᄝࢨ؍၂໡ૌҐ౼ष٢ൔ TPSU ປ ಆಞVTFSሱ࠭ᇶ֝ྐ༏֥ٳো ѩധೆਔࢳఃٳো֥၇ऌၛ ࠣؓྐ༏֥৘ࢳ ෮ၛֻ၂ࢨ؍֥ӁԛԢਔֻູؽࢨ؍ٿ оൔ MBCFM ֥वோٳোҩ൫ิ܂၇ऌᆭຓ ๝ൈ֤֞ਔაᆭ భႨ࿹ࢲં޺ཌྷႆᆣ֥׳ҳb

card sorting--analysis understand user 03 ᅝܼ䬂Ⲭໄ䷇ᓔ݇ ᥼䗕䗮ⶹᓔ݇ ᅶ᠋ッ⠜ᴀẔ⌟ ᡒಲᬃҬᆚⷕ ᡒಲⱏᔩᆚⷕ
ׂᬍⱏᔩᆚⷕ ׂᬍᬃҬᆚⷕ ㄝᕙфᆊ⹂䅸ᬊ䋻ㄝᕙपᆊথ䋻ㄝᕙфᆊҬℒ 䗔ℒѸᯧ ៤ࡳѸᯧ ༅䋹Ѹᯧ ݇䯁Ѹᯧ фᔽ⼼ ф4Ꮥ ф⚍व 㔈∈⬉✸⇨䌍㔈೎䆱ᆑᏺ䌍㔈᠟ᴎ㔈䌍ऩ ܙ᠟ᴎ䌍㔈䌍䆄ᔩᶹ䆶 Ҭℒ㒭݊ҪҎ 䋺᠋ֵᙃ 䋺᠋ᦤ⦄ ܙؐ䆄ᔩ ᬊᬃᯢ㒚 ᦤ⦄䆄ᔩ 䋺᠋ܙؐ ᓔ䗮व䗮 ᶹⳟव䗮 ⊼䫔䖤㧹⌏ࡼֵᙃ ֻ၂ࢨ؍ҩ൫ᆭު ໡ૌӇ൫קྟNBQԛགྷႵ֥ۿି ׄᄝႨ޼NFUBMNPEFMᇏ֥႘ഝܱ༢ ೂቐ๭෮ൕđ ሺᇠսіྐ༏Ⴊ༵ࠩ طޘᇠսіႨ޼ؓః৘ࢳ֥ ౢ༉؇b QSPGJMF TPSU BOBMZTJT MBCFM WFSJGZ

card sorting--label understand user 03 ᡒಲᬃҬᆚⷕ ᡒಲⱏᔩᆚⷕ ׂᬍⱏᔩᆚⷕ ׂᬍᬃҬᆚⷕ ㄝᕙфᆊ⹂䅸ᬊ䋻
ㄝᕙपᆊথ䋻ㄝᕙфᆊҬℒ 䗔ℒѸᯧ ៤ࡳѸᯧ ༅䋹Ѹᯧ ݇䯁Ѹᯧ фᔽ⼼ ф4Ꮥ ф⚍व 㔈∈⬉✸⇨䌍㔈೎䆱ᆑᏺ䌍㔈᠟ᴎ㔈䌍ऩ ܙ᠟ᴎ䌍㔈䌍䆄ᔩᶹ䆶 Ҭℒ㒭݊ҪҎ 䋺᠋ֵᙃ 䋺᠋ᦤ⦄ ܙؐ䆄ᔩ ᬊᬃᯢ㒚 ᦤ⦄䆄ᔩ 䋺᠋ܙؐ ᓔ䗮व䗮 ᶹⳟव䗮 ⊼䫔䖤㧹⌏ࡼֵᙃ ᅶ᠋ッ⠜ᴀẔ⌟ ᥼䗕䗮ⶹᓔ݇ ᅝܼ䬂Ⲭໄ䷇ᓔ݇ QSPGJMF TPSU BOBMZTJT MBCFM WFSJGZ ֻ၂ࢨ؍֥ҩ൫҂ቀၛ֤֞၂۱ౢ༉֥ྐ༏ࡏܒ๭ ֌൞קྟ֥࿹࣮Ⴈ޼֥ ҩ൫ࢲݔ ෰ૌ֥NFOUBMNPEFMॖྙӮਔ၂۱ࢸཋଆ޴֌ಯಖႵቆљ֥ JOGPSNBUJPODMVTUFS Ⴎ๭ॖᆩVTFSؓႿଧ၂҆ٳ֥ྐ༏৘ࢳࢠູଆ޴b

card sorting--label understand user 03 ᡒಲᬃҬᆚⷕ ᡒಲⱏᔩᆚⷕ ׂᬍⱏᔩᆚⷕ ׂᬍᬃҬᆚⷕ ㄝᕙфᆊ⹂䅸ᬊ䋻
ㄝᕙपᆊথ䋻ㄝᕙфᆊҬℒ 䗔ℒѸᯧ ៤ࡳѸᯧ ༅䋹Ѹᯧ ݇䯁Ѹᯧ фᔽ⼼ ф4Ꮥ ф⚍व 㔈∈⬉✸⇨䌍㔈೎䆱ᆑᏺ䌍㔈᠟ᴎ㔈䌍ऩ ܙ᠟ᴎ䌍㔈䌍䆄ᔩᶹ䆶 Ҭℒ㒭݊ҪҎ 䋺᠋ֵᙃ 䋺᠋ᦤ⦄ ܙؐ䆄ᔩ ᬊᬃᯢ㒚 ᦤ⦄䆄ᔩ 䋺᠋ܙؐ ᓔ䗮व䗮 ᶹⳟव䗮 ⊼䫔䖤㧹⌏ࡼֵᙃ ᅶ᠋ッ⠜ᴀẔ⌟ ᥼䗕䗮ⶹᓔ݇ ᅝܼ䬂Ⲭໄ䷇ᓔ݇ ഡᇂ ᅬ޼ ᆦڱႋႨ ࢌၞ࠺੣ ః෰ QSPGJMF TPSU BOBMZTJT MBCFM WFSJGZ ᄝMBCFMᆭުđ໡ૌ֤֞ਔ၂ࠩUJUMFđ๝ൈ༥ٳԛ҂๝ٚσ֥ؽࠩଢ੣đႨ Ⴟڣᇹҩ൫ၛࠣဒᆣbčFHႨ޼֥NFOUBMNPEFM۷ౠཟაྐ༏Чദ֥ሱಖ োљđҠቔোʗҰुো൞1%֩োරᆯြМ֥ࣟනॉົ؇Ď

understand user 03 ᄝवோٳোֻ֥ؽ۱ࢨ؍ ໡ૌҐႨٿо֥ဒᆣൔҩ൫ٚൔb۴ऌֻ၂ࢨ؍֥նቆљ ໡ૌӁԛਔ၂ུն֥UJUMF໓ Ч VTFS۴ऌሱ֥࠭৘ࢳࡼۿିٳো ೂݔԛགྷაყ௹ཟቐ֥౦ঃ ໡ૌࡼ۳ԛֻؽࠩUJUMF
ѩਔࢳఃѩໃФޓݺႄ֥֝ ჰၹ ն؟ႮႿԚࠩႨ޼ؓ໓Ч໙ีၛࠣؓۿିЧദ֥҂ඃ༑ bᄝVTFS֥࿊ᄴഈ ࠻Їওֻ၂ࢨ؍֥Ⴈ޼ ႨႿဒᆣ ܴҳఃٳো൞ڎФ۷ݺ֥ႄ֝ਔ ္ЇওGSFTI֥ҩ൫ؓའ х૧ᆭభҩ൫֥႘ഝ႕ཙb card sorting--verify QSPGJMF TPSU BOBMZTJT MBCFM WFSJGZ

card sorting--verify understand user 03 QSPGJMF TPSU BOBMZTJT MBCFM WFSJGZ

card sorting--icon testing UFTUMPXGJEFMJUZJDPOUPEJTUJMMUIFJEFOUJGJFEWJTVBMFMFNFOUT understand user 03 ႮႿᄝЧࢨ؍ ؓႿ൭ࠏᆦڱЏ֥ྐ༏ࡏܒၛႵ ၂ק֥ࢲંđᇶေۿିׄॖิ܂۳໡ૌ֥൪त
ഡ࠹ഽၛิ౼၂ུLFZ൪तႄ֝ჭ෍ ѩٳቆಞ VTFS৵৵ु ౞඾֥ҩ൫ٲຶ ҩ൫ဒᆣJDPO֥ॖ ؀ྟđ֤֞၂ུᄝ༯၂ࢨ؍ॖႨ֥ࢲંb

concept design SLIP|go to deep|innovation for experience|details documented by Liu
Chenhuan February, 2011

SLIP--integrate+prioritize ۴ऌႨ࿹ٳ༅TPSU MBCFM JOUFHSBUF QSJPSJUJ[Fۿିଆॶၛ်ࠣ૫ࡏܒ concept design 01 ֨੣ ႋႨᇏྏ
ཨٮ࠺੣ ᅬ޼ܵ৘ ۷؟ ളࠃᇹ൭ ჎ুཨٮ ॹࢮೆ१ րԩ৘ ಆ҆ MJTU ൪त߄ ԉᆴ ิགྷ ൬ᆦૼ༥ व๙ܵ৘ ૡ઒ܵ৘ ग़޼؊ཌྷܱഡᇂ Ⴈ޼ّঌ Ϻᇹ ܱႿ ్ߐᅬ޼ νಆ๼ԛ ิྜ ԩ৘Ⴊ༵ࠩ ӯགྷٚൔ

֨੣ ႋႨᇏྏ ཨٮ࠺੣ ᅬ޼ܵ৘ ۷؟ ളࠃᇹ൭ ჎ুཨٮ ॹࢮೆ१ րԩ৘ ಆ҆
MJTU ൪त߄ ԉᆴ ิགྷ ൬ᆦૼ༥ व๙ܵ৘ ૡ઒ܵ৘ ग़޼؊ཌྷܱഡᇂ Ⴈ޼ّঌ Ϻᇹ ܱႿ ్ߐᅬ޼ νಆ๼ԛ ิྜ ԩ৘Ⴊ༵ࠩ ӯགྷٚൔ SLIP--integrate+prioritize ۴ऌႨ࿹JOTJHIUTؓႋJOUFHSBUF QSJPSJUJ[Fۿିଆॶၛ်ࠣ૫ࡏܒ concept design 01 ԚՑ൐ႨᆀؓࣉೆႋႨ൮۱်૫௹ր༐ ຬᆩ֡൭ࠏᆦڱЏग़޼؊ିቓ൉હ ᇶေۿ ିႋႨ֥MJTUb๝ൈႋॉ੮ؓႿԚՑ൐ႨႨ ޼ห൹֥ႄ֝ၛࠣิൕb Ⴈ޼֨੣ު༐ຬၛࠣླေֻ၂ൈ ࡗࠆ౼֥ྐ༏Їওᅬ޼Ⴥح ླေ ԩ৘֥ࢌၞb აᆭުवோٳো֥ ྐ༏ّঌ၂ᇁ ౦ۋ߄ุ֥ဒഡ࠹ Ⴈ޼ؓᆦڱЏ൭ࠏग़޼؊֥ۿିླ౰ҵၳྟ ࢠն౏଴ၛनޙ౼ച֥౦ঃ༯ ֆཛ֥หק֥ྐ༏ ླ౰҂ቀၛቔູ௟஑ྐ༏Ⴊ༵ࠩѓሙ ᄹࡆყ༵ ஑؎ၛࠣႨ޼۱ྟ߄ഡקӫູႵི֥ࢳथٚൔb ቋӈႨۿିູวЏܓ໾֥ڱॻ ໡ ေڱॻ ໡ေ൬ॻ ""ڱॻ ґௐ ൭ࠏ ԉᆴb აෆ֥ࠢؽ൭Ⴈ࿹ඔऌ໖ކ Ϻᇹ࿊ཛྙ๝ྴഡ ၂ٚ૫ႮႿགྷႵᇶੀ൭ ࠏग़޼؊Ⴈ޼༝ܸሱ࠭ฐ෬࿙౰ճσ ౏ᄝ൭ ࠏഈ֥Ҡቔ࿐༝ӮЧࢠ֮ਸ਼၂ٚ૫གྷႵϺᇹ ྐ༏๝࠙৊ ุဒۋҵ ଽಸ໭ൌᇉϺᇹb

go to deep--notiﬁcation BOBMZTJTUIFLFZGFBUVSFTBOEXFJHIUIFDPOTQSPT concept design 02 ᆜ৘ԛགྷႵิྜো྘đѩٳ༅ഡᇂิྜۿି֥ট੃ಀઝb۴ऌᆭభ֥ٳ༅đҰ ुᅬ޼ၛࠣԩ৘րԩ৘ࢌၞູླ౰Ⴊ༵ࠩቋۚđ౏ਆᇕඔऌো྘׻൞EZOBNJDླ ေൌൈ۷ྍФ๙ᆩ֥b౏ਆᆀ׻ϴෛҰुၛࠣҠቔਆᇕো྘֥൐Ⴈ౦ࣟđܣླ
ေ౼֤௜ޙׄb

concept design 02 badge alert toast dialog status bar banner
pop-up tile toast ҂๝ิྜٚൔॖ۴ऌᇶ׮๷ෂaФ׮Ұुđ఼ᇅԩ৘aႶݺѩթ֩ົ؇߃ ٳđ౏ऎุ۴ऌྐ༏Ⴊ༵ࠩaࠧൈྟ҂๝ႋႨbᄝ໡ૌหק֥ଢѓิྜഡ ࠹಩ༀᇏđᄝॖࢌ޺ྟၛࠣႶݺົ؇ᇏđNBQԛิྜো྘ၛࠣHPBMbٳ༅ ॖᆩđTUBUVTCBS൞ކ৘ࢳथٚσbఃື၂҂ቀࠧ๷ෂ৯؇҂ࡄđ໡ૌ๙ݖ ࢌ޺ܿᄵ૛Ҁğᄹࡆྍิྜ֥BOJNBUJPO౏ᄝ֨੣ֻ၂ൈࡗሱ׮֐ԛb status bar go to deep--notiﬁcation BOBMZTJTUIFLFZGFBUVSFTBOEXFJHIUIFDPOTQSPT

go to deep--OPUJGJDBUJPO TPMVUJPO concept design 02

go to deep--TIPSUDVU BOBMZTJTFBDILFZGFBUVSFTBOEXFJHIUIFDPOTQSPT concept design 02 ؓႨ࿹JOTJHIUࣉྛླ౰ٳ༅iioႨ޼ ؓᆦڱЏ൭ࠏग़޼؊֥ۿିླ౰ҵၳྟࢠ ն౏଴ၛनޙ౼ച֥౦ঃ༯
ֆཛ֥หק֥ ྐ༏ླ౰҂ቀၛቔູ௟஑ྐ༏Ⴊ༵ࠩѓሙ ᄹࡆყ༵஑؎ၛࠣႨ޼۱ྟ߄ഡקӫູႵ ི֥ࢳथٚൔbp ݂۴ָ֞đؓႿႋႨᇏྏđ൞༐ຬႨ޼۷ ࿡ࢮི֥ۚປӮᆦڱ಩ༀđቐш๙ݖ࠺੣ ᆭభ֥ᆦڱྛູѩഡᇂᆦڱॹࢮٚൔղ֞ č۴ऌႨ࿹ॖᆩđ۲۱Ⴈ޼֥ᬪྟ׻іགྷ ູଖ၂หק֥ᆦڱӆࣟbĎႷш๙ݖ൪त ߄֥ٚൔđӯགྷۚ௔൐Ⴈ֥ႋႨѩ࠺ᇾഈ ၂Ց֥ᆦڱb

go to deep--ॹࢮೆ१ BOBMZTJTFBDILFZGFBUVSFTBOEXFJHIUIFDPOTQSPT concept design 02 pros cons ൐Ⴈ௔ੱڿэᄝ൪तഈ֥ӯགྷॖ
ି֝ᇁႨ޼ಪᆩӮЧ֥ิۚb Ֆൌགྷ࢘؇ुđ൐Ⴈඔऌקၬ࠹ ෘԛ൪त໊၍Ԅժđॖିࢆ֮൪त ིݔb ॖ࿼ᅚྟҵb ၛOBUVSF֥ٚൔFNCFEඔऌᄝ်૫ ൪तஆ҃đ໭ྙᇏิൕႨ޼๝ൈ໭ ৆ሕྐ༏ၛࠣۿିb۷ࡆЧᇉ֥ࢳ थ໙ีb pros cons ᄝࢌၞ࠺੣ᇏၘႵཌྷܱඔऌđᄹࡆ ॹࢮೆ१đཌྷ֒Ⴟᇗگđ໭сေb ᄝႋႨᇏྏᄹࡆॹࢮೆ१đ࠺੣Ҡ ቔඔऌđ൞QFSTPOBMJ[BUJPOьࢮႿ Ⴈ޼ཌྷරো྘֥ᆦڱྛູb vs

go to deep--ॹࢮೆ१ TPMVUJPOTBOEXFJHIJOH concept design 02 ؓՎࢳथٚσ֥ᇉၐᇶေູఃۿିაཨٮ࠺੣ᇗކđ ಪູ໭धؓсေb ӴಖđཌྷбႿ1$
൭ࠏഈҠቔӮЧބಪᆩӮЧࢠ֮b 1$ഈ֥၂ུྐ༏ऊކᄝ൭ࠏഈсေ҂նb֌൞đᄝ Վσ২ᇏđVTFSؓႿཨٮ࠺੣ၛࠣႋႨᇏྏ֥NFOUBM NPEFM҂๝đբ߄֥ླ౰௹ຬ္҂๝Ġ๝ൈྐ༏Ч ദđཨٮ࠺੣ົ؇ᇶေູൈࡗ༵ުđطᄝॹࢮೆ१ ᇏđֻ၂ົ؇൞ႋႨӆࣟো྘đطႮႨ࿹ٳ༅ॖᆩđ หק֥ଖ۱Ⴈ޼ؓႿႋႨᇏྏ൐Ⴈٓຶѩ҂ॺٗ౏ཨ ٮ࠺੣ն҆ٳູวЏרֆ࠺੣đॹ෎ೆ१൞ژކིି ၛࠣNFOUBMNPEFMჰᄵ֥ࢳथٚσb ਸ਼đQBEোӁ௖đն௠NVMUJUPVDI౴൝đၩ໅ሢোර ֥ऊކླ౰ေնႿ൭ࠏb

innovation for experience JOGPSNBUJPOWJTVBMJ[BUJPO concept design 03 ЧՑڿϱ֥LFZGFBUVSFᆭ၂ߎЇওࡼԮ๤֥ਙ іྙൔཨٮ࠺੣൪त߄ູ۷ᆰܴ౏ุဒۋ۷ ఼֥๭іb
Ⴈ޼Ұुཨٮ࠺੣֥ԛؿׄٳູਆোğĎҰ ुଖ၂หקཛ֥ૼ༥ĠĎҰुཨٮᆦԛ֥ح ؇౴൝bభᆀടࠣ֞۷ࡆႵི֥ෆ෬đଢѓ ູಞႨ޼۷ьࢮ֥ᅳ֞෮ླཛଢ֥ૼ༥č๙ ݖ๭іᇏᆰܴ֥֥ൈࡗׄো྘ĎĠުᆀॖ๙ ݖཌ๭ડቀb

Implementation translate into visual language documented by Liu Chenhuan February,
2011

ࢹ࡫aٳ༅აק໊ QBZQBM implementation 01 σ২ğQBZQBM ೤טğࢸ૫֥Ⴈ೤ࡥֆđᆜุ๬ԛ௖இหᆘĠധ ೤֥֝ݴaซড೤ູᇶุaӭ೤ູׄሗ೤b ҃अğෙಖ҃अഈࠎЧ቎Ֆਔ*QIPOFܸႵ֥ࢲܒྙ ൔđ֌ᄝଽ်໡ૌߎु֞ਔXFC֥႕ሰb ॥ࡱğQBZQBM֥॥ࡱіղбࢠห൹đ෱๬௥ਔ
JQIPOFܥႵ֥ྙൔb

σ২ğJNPOFZ ೤טğࢸ૫֥Ⴈ೤ؓб఼ਛđᆜุࢸ૫ᇉۋ๬ ԛđ௖இหᆘૼཁĠധ೤֥֝ݴaޑ೤֥ཁൕ౵თb ҃अğࠎЧ቎Ֆਔ*QIPOFܸႵ֥ࢲܒྙൔđ҃अЌ ൯b ॥ࡱğMJTUྙൔౢ༉đಞದ၂ଢਔಖđٚьႨ޼Ҡ ቔb JNPOFZ implementation 01
ࢹ࡫aٳ༅აק໊

:BIPP implementation 01 ࢹ࡫aٳ༅აק໊ σ২ğZBIPP ೤טğᆰϢ֥XFCൔ೤ґᄎႨđ๬ԛਔ௖இđіགྷ ԛࡥֆބνಆ֥৘୑b ҃अğቓਔࡥֆטᆜđ҃अഈߎ൞іགྷԛਔሱႵ ֥ห೤đ҃अބ೤ґ׻ቓ֞ਔބཾ๤၂b ॥ࡱğࡥֆۄ֥࣪॥ࡱđ۳ۄ਀֥ႆའb

ෛ൭࠺ implementation 01 ࢹ࡫aٳ༅აק໊ σ২ğෛ൭࠺ ೤טğ۱ྟ༷ૼ֥ႋႨđᆜ۱Ҡቔݖӱԉડਔ౿ ໅đ֌ॖႨྟ҂఼b ҃अğյ௥*QIPOFܸႵ֥ࢲܒđᅦဘਔ௖இหྟb ॥ࡱğڮႵྍၩa౿໅ྟ఼đ༥ࢫࣚ༥b

NBUSJYJU implementation 01 LifeStyle Professional Brand Style ࢹ࡫aٳ༅აק໊

ൈഉ EJTUJMMUIFLFZXPSETUPMFBEPVSWJTVBMEFTJHOQSPDFTT implementation 02 ิ౼ܱ࡯Ս ളࠃ ьࢮ ህြ ௖இ ჉ᄆ
༥ࢫ νಆ ౦ۋ ིۚ ߌЌ

۴ऌᆦڱЏ֥௖இหྟđิ౼೤ґٚσ implementation 03 ೤ґٚσ

ᄝᆭభJDPOUFTUJOHิ౼֥ჭ෍ࢲކڄ۬ק໊֥ࠎԤᆭഈഡ࠹JDPO implementation 04JDPOEFTJHO

Ӈ൫ ؟ჭڄ۬Ӈ൫ ᄝӇ൫۲ᇕ൪तڄ۬ൈđҕॉਔ၂ུႪྮ֥ႋႨӁ ௖đ๝ൈ္Ӈ൫ਔ҂๝֥ڄ۬đЇওᆼᇉڄ۬đᅼ ןི֥ݔđగஞྙൔđၛܻࠣۋ֥ҐႨđ֩֩b২ ೂగஞሑ֥ପ۱်૫đ֒ൈᇶေ֥ഡ࠹නਫ਼൞৚૫ ֥ႋႨ߶ෛሢ൐ႨՑඔ֥ᄹ؟طэնđ༐ຬᄝડቀ ۿି֥ࠎԤഈđ္۳Ⴈ޼ջট၂ུྍ༷֥Ҡቔุ ဒđᄹࡆႨ޼აႋႨ֥޺׮bᄹࡆႨ޼ყჿۋđಞ Ⴈ޼۷FNPUJPOBM
implementation 05

XFJHIJOHCBMBODF ڄ۬ჭ෍ิ౼ࠣವކ + = implementation 06

ﬁnal key interface ๤၂ϱЧa೤ґࠣܿٓ implementation 07

sth we leaned aоܱ֥۽ቔྙൔ ԉٳ܎๙aնࡅཞ၂۱XPSLTIPQ၂ဢđૄ۱ದԉٳؿіၩ࡮aቓ֞ษંԉٳđथקႵ৘Ⴕऌbૄ۱ದ္Ֆཛଢ ᇏህြႵ෮ิۚb a؟Ց௟ബ 6&%ଽ҆௟ബaބӁ௖ದჴa࠯ඌದჴ֥ህࡅ௟ബđЌᆣӁ௖આࠠaᇉਈa࠯ඌॖྛྟ֩bཛଢᇏ࡙ಸਔ1%֥ Ⴊ༵ࠩбࢠ֥ۚླ౰đбೂğ؟वิགྷaႨ޼ّঌaิགྷཋحaᆦڱཋحิྜ֩ۿିb aॹ෎םս
ཛଢष൓קਔཨٮ࠺੣ॖ൪߄aॹࢮೆ१֩ۿିଆॶb ູਔཛଢିܔ༵ॹ෎םսഈཌđЧ௹ीוਔᆃਆ۱ۿିđᇶေປӮྐ༏ࡏܒטᆜaࢌ޺༥ࢫႪ߄aሑ෿ণྩ ڿčჅحaิྜĎ೘۱҆ٳbཨٮ࠺੣ॖ൪߄ᄝࢤ༯ট֥ϱЧᇏิགྷb

the bottleneck భ௹ቓਔ၂ུགྷႵᄎႏaग़ڛඔऌٳ༅aႨ޼࿹࣮đؓႿླ౰Ⴕਔૼಒ֥ᆦӻb֌൞ཛଢᇏ ؓႿࢌ޺༥ࢫथ Ҧൈߎ൞ಌഒඔऌᆦӻđؓႿႨ޼ࢌ޺༝ܸٳ༅aႨ޼ᅰθٳ༅֥৘ऌ҂ቀb Ⴈ޼࿹࣮൞ູਔഡ࠹ቔ၇ऌđ֌൞ᄝႨ࿹ݖӱᇏđ໡ૌؿགྷ൭ࠏग़޼؊ഈཌ୍ ࢠ؋֥ൈࡗଽߎໃྙӮ໗ ק֥Ⴈ޼ಕၛׅࠣ྘Ⴈ޼༝ܸ ᇏࡗႨ޼აԚࠩႨ޼ࢸཋ҂ૼཁ ሧധႨ޼ਈഒbၹՎđ଴ၛקၬၛࠣࡹ৫ׅ྘
Ⴈ޼֥1FSTPOBჰ྘ၛࠣQSPGJMFb

next step ऎႵᆌؓྟ֥Ӂ௖ק໊ၛࠣܿ߃ FHQBEোӁ௖đ൭ࠏĎđ ປ೿Ⴈ޼ඔऌ൬ࠢaٳ༅ĠčႨ޼ྛູਫ਼ࣥઘׄđඔऌ൬ࠢđႨ޼ّঌđႨ࿹ٳ༅Ď ࡹ৫ׅ྘Ⴈ޼֥1FSTPOBჰ྘ၛࠣQSPGJMFĠ ุဒ֥Ⴈ޼ྛູ൪त߄iiٳ༅đ؇ਈ ЇওUBTL֥EPJOHVOEFSHPJOH b OFXOFFETջট֥ྍႋႨӆࣟٳ༅ii4DFOBSJP#BTFE%FTJHOĠ
4JNQMJDJUZđܱႿ௖ᇉބ༥ࢫ ЇওӁ௖ࢲܒaࡏܒaіགྷđऎุ֥UBTLGMPX֩Ġčު်ڸॖҕॉؓᅶ֥ٚمၛ ࠣჰᄵĎ JOOPWBUFEEFTJHO FHOFXHFTUVSFQBUUFSOT

thank you documented by Liu Chenhuan February, 2011 to be
continued......

ALIPAY

ALIPAY

More Decks by liuchenhuan

Other Decks in Design

Featured

Transcript