6.24日(rì)音(yīn)訊,網頁制(zhì× )作(zuò)之可(kě)視(shì)化(huà)信®§₹息實用(yòng)

　　6.24日(rì)音(yīn)訊,®£> 網頁制(zhì)作(zuò)之可(kě)視(shì)化(huà)信息實用(y←₹¥☆òng)。在網頁設計(jì)和(hé)制(zhì)作(zuò)過程中，​ ∞↑如(rú)何才能(néng)更好(hǎoβ γ)的(de)顯示出它的(de)應用(yòng)性和(hé)效果呢(ne)，，₩←↓±作(zuò)為(wèi)設計(jì)師(sh£±Ωī)，我們的(de)一(yī)些(xiē)産出在信息呈現(xià$♠↔♣n)方式及溝通(tōng)效果等方面做(zuò)的(de±‍✘)其實不(bù)算(suàn)理(lǐ)想，尤其是(shì)那(n♠$ à)些(xiē)涉及到(dào)用(yò<£&ng)戶角色定義、信息架構分(fēn)析、功能(néng)流程規劃的(d ₩e)文(wén)檔。怎樣将這(zhè)些(xiē)交付物(wù)打​$≈造的(de)直觀易懂(dǒng)，使它們具有(yǒu)更強的(de)溝通≈★™∑(tōng)能(néng)力，這(zhè)同樣是(shì)我們必須思考的(d♣©©e)問(wèn)題。

　　文(wén)字和(hé)簡單的(de)形狀都(dōu)是(shì<‍★)不(bù)夠的(de)

　　人(rén)們對(duì)于文(wén)字的(d"♠e)形象化(huà)思維方式是(shì)不(bù)同φλ的(de)。對(duì)于“有(yǒu)個(gè)蘋∞<果從(cóng)樹(shù)上(shàng)掉下(x​☆ià)來(lái)了(le)”這(zhè)句話 ∏σδ(huà)，有(yǒu)些(xiē)人(rén)會(↓♠‍huì)想象出一(yī)個(gè)紅(hóng)蘋果，有(yǒu)些(xi←•ē)人(rén)則會(huì)想到(dào)♥★§±綠(lǜ)蘋果。隻有(yǒu)直接在信息當中傳遞“綠(lǜ)蘋₽"€果”的(de)概念，我們才能(néng)确保大(dà)家(jiā"♠ε☆)不(bù)會(huì)在頭腦(nǎo)中産生(shēng)紅(hóng)&®'$蘋果的(de)形象。很(hěn)簡單的(de)道(dào)理(lǐ)。

　　人(rén)們對(duì)于形狀的(de)理(lǐ)解方式→‌₹λ也(yě)是(shì)不(bù)同的(de)。如(rú)果我們向一(yī)群人<☆₽‍(rén)展示一(yī)個(gè)矩形，其中有(yǒ™≈u)些(xiē)人(rén)會(huì)單純的(de)将其理(ε≥lǐ)解為(wèi)矩形，而有(yǒu)些(xiē)人(r÷₹β•én)會(huì)認為(wèi)這(zhè)是(shì•←)一(yī)張紙(zhǐ)或一(yī)塊磚±§。如(rú)果我們直接展示一(yī)塊磚，那(nà)σ∏麽大(dà)家(jiā)都(dōu)知(zhī)道©∏✘(dào)這(zhè)是(shì)什(shén)麽。所以，即使是(shì)最↓±↔簡單的(de)視(shì)覺形象，不(bù)同的(de)展示方式也(±✘‌yě)會(huì)造成不(bù)同的(de)理(lǐ)解方式。

　　因此，在工(gōng)作(zuò)當中，我們确實₩ ∏ 不(bù)能(néng)期盼著(zhe)合作(zuò)部∏±Ω£門(mén)的(de)同事(shì)能(néng)準确理(lǐ)解那(nà♠Ω)些(xiē)文(wén)檔或是(shì)由各種框框和(hé)箭頭♣™±★所組成的(de)流程圖、線框原型等等。更何況在很(hěn)多(duō)時(sδ"γhí)候，大(dà)家(jiā)根本無心去(qù)認真閱讀(dú)π•這(zhè)些(xiē)東(dōng)西(xī↑ε≤✔)。

　　可(kě)視(shì)化(huà) ™的(de)重要(yào)性

　　我們對(duì)于現(xiàn)實世界的(de)觀察‍π和(hé)理(lǐ)解主要(yào)是(shì)★α±☆基于視(shì)覺的(de)，可(kě)視(s×Ω✔hì)化(huà)的(de)溝通(tōng)方式可(kě)÷γβ以讓人(rén)更有(yǒu)效的(de)接收信息。作(zuò)為(w↔→èi)設計(jì)師(shī)，我們每天都(dō₽♥'u)要(yào)與産品上(shàng)下(xià)遊的(de)相(xiàng)☆$★÷關人(rén)員(yuán)交流概念和(hé)想法，而承載 ≤♣這(zhè)些(xiē)信息的(de)媒介同樣需要(yγ ào)良好(hǎo)的(de)設計(jì)。優秀的(de)可(€↔kě)視(shì)化(huà)信息媒介不(bù)僅可(kě)以幫助人(rén)≠←們更好(hǎo)的(de)理(lǐ)解概念與想法，同時(s  ₽hí)還(hái)有(yǒu)助于引發他(tā)們對(duì)于信π‌☆息本身(shēn)的(de)共鳴，使設計(jì)産出更具影(yǐ> <ng)響力和(hé)說(shuō)服力。

　　用(yòng)戶體(tǐ)驗設計(jì)當中的(&​♣de)一(yī)些(xiē)可(kě)視(shì)化(huà)信息案例↕≤₽

　　我(英文(wén)原文(wén)作©δ♦♥(zuò)者)個(gè)人(rén)有(yǒu)一(yī)×★段創意設計(jì)方面的(de)工(gōng)作(zuò)背景，因此>σ，在後來(lái)的(de)用(yòng)戶體(tǐ)驗設計(jì↔±≠‍)相(xiàng)關工(gōng)作(zuò)當 λ中，每當看(kàn)到(dào)普普通(tōng)® ↑通(tōng)的(de)沒有(yǒu)經過良好(hǎo)雕琢的(de≥↕)文(wén)檔，心裡(lǐ)總會(hu↓α∞ì)覺得(de)不(bù)舒坦，這(zhè)就(jiù)是(shì)我開(k♥δπāi)始思考并嘗試可(kě)視(shì)化(§₹ ←huà)呈現(xiàn)方式的(de)原因。其間☆ (jiān)，我也(yě)見(jiàn)識了(lβ↕e)很(hěn)多(duō)來(lái)自(zì)其₩✔​他(tā)設計(jì)師(shī)的(de)案例，包括UserIn✔•∑>sight還(hái)有(yǒu)JasonTr<™avis同學創建的(de)用(yòng)戶角色，以及Hoch‌÷≥™schuleLuzern設計(jì)的(de)用(yòng)戶流程等。

　　來(lái)自(zì)UserInsi★→ght的(de)用(yòng)戶角色設定

　　來(lái)自(zì)JasonTravis的(de)用€×(yòng)戶角色設定

　　來(lái)自(zì)HochschuleLuzern的(de)用(₩"≤λyòng)戶流程設定

　　我在著(zhe)迷于這(zhè)些( ↓xiē)漂亮(liàng)的(de)“設計(jì)♦∏ 文(wén)檔”的(de)同時(shí)，也(yě)發現(xiàn£♠γ)它們當中有(yǒu)些(xiē)過于淩亂，輔¥£ 助性的(de)圖形元素反而會(huì)喧賓奪主；而有(yǒu)些(xiē)又( ¶δyòu)缺乏必要(yào)的(de)文(wén)字描述。我希望找到(dà ‌o)一(yī)種更好(hǎo)、更有(yǒ'♦>u)用(yòng)的(de)方式，于是(shì)在實際工(gō≠✘$ng)作(zuò)當中嘗試了(le)一(yī)些(xiē)不(★>•←bù)同的(de)想法，特别是(shì)在創建用(yòng)戶角色、≈"β₽規劃信息結構和(hé)流程、制(zhì)作$σ'φ(zuò)線框原型的(de)環節當中。我的(de)目标很(hěn)簡單，就π×®(jiù)是(shì)讓需求方和(hé)相(xiàng)關合作(z←☆±uò)人(rén)員(yuán)能(néng)更快(£α↔kuài)更準确的(de)理(lǐ)解設€>←"計(jì)師(shī)想要(yào)表達的(de)內(nèi✘↑)容。

　　以對(duì)話(huà)氣泡的(de)方式創建用(yò∑₹↔ng)戶角色

　　相(xiàng)比于普通(tōng)的(de)內(nè∏₹≤i)容陳述，對(duì)話(huà)的(d ≈∏↕e)形式可(kě)以給閱讀(dú)者帶來(lái)§↕&更強的(de)互動感，産生(shēng)更深的(de)印象。基于這(✘♦zhè)個(gè)理(lǐ)念，我試著(zhe)在用(yòng)戶角色ε¥×設定中使用(yòng)對(duì)話(huà)氣泡來(lái)展現(xiàn♠®✘<)內(nèi)容，看(kàn)上(shàng)去(qù)就(©φφ®jiù)好(hǎo)像這(zhè)個(gè)角色(β∏σJamie)正在講述自(zì)己的(de)Ωε 故事(shì)一(yī)樣。Jamie“講述&∑★≥rdquo;了(le)自(zì)己的(de)一(yī)些(×"δ xiē)重要(yào)信息，包括自(zì)己的(de)世界觀、自(zì)己需‍σ®要(yào)什(shén)麽不(bù)需要(yào)什(shén¶≈∞)麽、自(zì)己的(de)一(yī)些(xiē)經★÷≈¶曆、哪些(xiē)東(dōng)西(xī)可(kě)以給£‌≈↔自(zì)己帶來(lái)動力，等等。

　　我不(bù)僅讓Jamie自(zì)言自(zì≥♦≈)語，同時(shí)還(hái)增加了(↓λle)一(yī)個(gè)”采¥☆±δ訪者”，通(tōng)過他(tā)們之間(jiān)的(☆α‍de)交流來(lái)進一(yī)步增強信息的(de)互動感。受到↑↔(dào)JasonTravis的(de)案例啓發(見(€‍jiàn)前文(wén)第二張圖片)，我覺得(de)用(y×γ​★òng)戶角色所擁有(yǒu)的(de)物(wù)品确實可(kě)以傳遞出他∑→"(tā)的(de)更多(duō)信息，所以我✘≤δ也(yě)在設定中添加了(le)Jami∑γe所擁有(yǒu)的(de)或是(shì)希望得(de)到(dào✔₹)的(de)一(yī)些(xiē)東(dōng)西(xī)，例如(rú)♦§σ唱(chàng)片、房(fáng)子(zǐ)、狗狗、夢幻假期等。此外(wà÷βσi)，我還(hái)加上(shàng)了(le↑§)一(yī)些(xiē)Jamie有(yǒ≠₹u)可(kě)能(néng)提出的(de)問Ω∏Ωπ(wèn)題。完整的(de)用(yòng)戶角色設定在這(zhè)↑€×∏邊。

　　帶注釋的(de)站(zhàn)點地(dì)圖'♠✔☆

　　我在創建站(zhàn)點地(dì)圖時(shí)想到(dào)不(α"←bù)少(shǎo)主意，關于這(zhè)個(gè)文β±®(wén)檔看(kàn)上(shàng)去(qù)應該是(shì)怎樣的(∞ de)，信息應該怎樣呈現(xiàn)，需要(yào&≥)用(yòng)到(dào)那(nà)些(xiē ÷♣)視(shì)覺元素。我把這(zhè)些(xiē&™)想法都(dōu)寫了(le)下(xià)來(l‍∑  ái)，一(yī)方面用(yòng)于實際φ×π 操作(zuò)時(shí)給自(zì)己做(zu' ò)個(gè)提示，一(yī)方面也(yě)希望自(zì)己将來(lá‍★¥¥i)不(bù)至于忘記設計(jì)方案背後的(∞β€γde)思路(lù)。

　　我同樣使用(yòng)了(le)對(duì)話(huà)φ← 氣泡的(de)形式對(duì)信息結構進行(xíng)§∞↔σ了(le)注釋說(shuō)明(míng)，其他(tā)人±↑ (rén)在閱讀(dú)這(zhè)份文(wén)​®  檔時(shí)不(bù)僅可(kě)以了(le)解到(dà©λΩγo)結構方面的(de)信息，同時(shí)可(kě)以通(≠✔tōng)過注釋了(le)解更多(duō)詳情。完整的 ♦♥(de)站(zhàn)點地(dì)圖在這(zhè)邊。

　　對(duì)話(huà)形式的(de)用(yòng)戶流程設定

　　最後，我将之前的(de)用(yòng)戶角色設定和(hé)站(zhà© n)點地(dì)圖結合起來(lái)，創建×λ☆了(le)一(yī)份比較有(yǒu)人(rén)情味的(d​β'e)、能(néng)夠讓閱讀(dú)者感受到(dào)上(shà₩♦ng)下(xià)文(wén)環境的(de)用(yòng)戶流程設定。在這÷≥©(zhè)份文(wén)檔中，Jamie會(huì)在整個(gè)•♣©流程裡(lǐ)進行(xíng)“發聲↑ 思維”，講述自(zì)己的(de)目标以及在每一(y₹Ωī)步操作(zuò)中的(de)想法。這(zh£≠↓♦è)種方式的(de)代入感很(hěn)強，閱讀(dú)者可(kě)以更容易的★δ(de)理(lǐ)解産品的(de)設計(jì)方案及其背後的(de)想δ​Ω♦法。完整的(de)站(zhàn)點地(dì≠¥)圖在這(zhè)邊。

　　我在創建線框原型的(de)階段，總會(huì)不(☆≈£∏bù)由自(zì)主的(de)忽略掉之前創建的(de)用(yòng)¥↑↕↕戶角色，為(wèi)了(le)解決這(zhè)個(gè)問(wèn)題₽→₩φ，我做(zuò)了(le)一(yī)些(xiē)真人(ré★ελn)大(dà)小(xiǎo)的(de)紙(zhǐ)闆模型€♠放(fàng)在旁邊，用(yòng)他(tā)們代表¶≠∞用(yòng)戶角色，像老(lǎo)大(γ$×♦dà)哥(gē)一(yī)樣時(shí)刻在邊上(•‍∞shàng)提醒我記得(de)考慮之前的(d®♦e)設定。

　　這(zhè)種做(zuò)法倒是(shì)有(yǒ↕‌♦u)一(yī)定的(de)效果，不(bù)過我始終覺得(de)老(l↓✘ǎo)大(dà)哥(gē)模型與屏幕當中的(de)世界不(b<↓±ù)在一(yī)個(gè)緯度上(shàng)，心¶™理(lǐ)上(shàng)距離(lí)仍然很(hěn)遠(yuǎn ®)。所以我幹脆試把用(yòng)戶角色的(de∞©±)形象直接扔到(dào)了(le)原型當中。

　　其實在現(xiàn)實制(zhì)作(zu€>¥→ò)和(hé)設計(jì)中，我們的(de)想法也(yě)是(shì)豐富≠•多(duō)彩和(hé)多(duō)變的(de)，正是(shì₽')因為(wèi)我們擁有(yǒu)良好(hǎo)的(de↓‍γδ)思路(lù)才能(néng)做(zuò♣♣×)好(hǎo)精美(měi)和(hé)适合時(shí)代、符合用(yòng)€ 戶思想的(de)頁面來(lái)。