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à)些(x∞↓★iē)涉及到(dào)用(yòng)戶角色定義、信息架構分(fēn¶←)析、功能(néng)流程規劃的(de)文(wén)檔。怎∏→•樣将這(zhè)些(xiē)交付物(wù)打造的(de)直觀易 α×∑懂(dǒng)，使它們具有(yǒu)更強的(de)溝通(tō₩≤₩<ng)能(néng)力，這(zhè)同樣是(shì)我們必須¥Ω±$思考的(de)問(wèn)題。
文(wén)字和(hé)簡單的(de)形狀都(♥♦∏dōu)是(shì)不(bù)夠的(de)
人(rén)們對(duì)于文(wén)字®•§↓的(de)形象化(huà)思維方式是(shì)↕ "÷不(bù)同的(de)。對(duì)于“有(yǒu)個(g×±è)蘋果從(cóng)樹(shù)上(shàng)✔掉下(xià)來(lái)了(le)&rdqσγuo;這(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ě)會(h♥≠uì)造成不(bù)同的(de)理(lǐ)解方式。
因此，在工(gōng)作(zuò)當中↑≈¶¥，我們确實不(bù)能(néng)期盼著(zε©↕he)合作(zuò)部門(mén)的(de)同事(shì)能(néng® ©)準确理(lǐ)解那(nà)些(xiē)×φ₹文(wén)檔或是(shì)由各種框框和(hé)箭↔←₩頭所組成的(de)流程圖、線框原型等等。更何況在很(hěn)多(duō)↓©™時(shí)候，大(dà)家(jiā)根本無心去(qù)認真閱讀(dú>×✔)這(zhè)些(xiē)東(dōng)西(≠₩ xī)。
可(kě)視(shì)化(huà)的(de)重要(yào¶↔)性
我們對(duì)于現(xiàn)實世界的(de)觀×δ察和(hé)理(lǐ)解主要(yào)是(shì)基于視(s≠✘hì)覺的(de)，可(kě)視(shì)化(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è)些(x★∞iē)信息的(de)媒介同樣需要(yào)良好(hǎo)的(d¶✘βe)設計(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é)說(sh©δλ£uō)服力。
用(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)識了(le)很(hěn)÷∏®∑多(duō)來(lái)自(zì)其他(tā)設計(jì)師(shī)的☆$×(de)案例，包括UserInsight還(háε¥<i)有(yǒu)JasonTravis同 →λΩ學創建的(de)用(yòng)戶角色，以及Hochsch♣'∞uleLuzern設計(jì)的(de)✘§用(yòng)戶流程等。
來(lái)自(zì)UserInsight的(de)用(yò&✔ng)戶角色設定
來(lái)自(zì)JasonTravis的(de)用∏•σ≠(yòng)戶角色設定
來(lái)自(zì)HochschuleLuzern的←→€←(de)用(yòng)戶流程設定
我在著(zhe)迷于這(zhè)些(xiē)漂亮(liànφ"g)的(de)“設計(jì)文(wén)檔&rdquo≈∞;的(de)同時(shí)，也(yě)發現(xβ₽$♠ià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)關合作(zuò)人(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à)的(de)形式可(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)上(s♦₹γhàng)去(qù)就(jiù)好(hǎo)像這(zhè)個(gè)角色(J↓£σamie)正在講述自(zì)己的(de)故¥₹✔事(shì)一(yī)樣。Jamie“講述&rdqu©✔o;了(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ì)語，同時(s<≠hí)還(hái)增加了(le)一(yī←↕)個(gè)”采訪者”，通(t€≠ōng)過他(tā)們之間(jiān)的(de)交流來(δ<↓↕lái)進一(yī)步增強信息的(de)互動感。受到(dào)Jason∞↓Travis的(de)案例啓發(見(jiàn)前文(wén)"'±第二張圖片)，我覺得(de)用(yòng)戶角色所擁有(yǒu)的(÷÷÷de)物(wù)品确實可(kě)以傳遞出他(tā)的(de)更δ←多(duō)信息，所以我也(yě)在設定中添加了(le)Jamie所擁有(♦™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ē)Jam★↕ie有(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)信息，同時(sα<<σhí)可(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)情味的®←α∑(de)、能(néng)夠讓閱讀(dú)者感受到(dào)上(shàng÷←&↕)下(xià)文(wén)環境的(de)用(yòng)戶流程設定。©♣'在這(zhè)份文(wén)檔中，Jamie會≤★£¥(huì)在整個(gè)流程裡(lǐ)進行(xíng)“發聲思©≤維”，講述自(zì)己的(d€®®e)目标以及在每一(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)了(l e)解決這(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)考慮之前的(de)設定。
這(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ě)是(s€€÷★hì)豐富多(duō)彩和(hé)多(duō)變的(d±★βe)，正是(shì)因為(wèi)我們擁有(yǒu)↑∞¥♦良好(hǎo)的(de)思路(lù)才能(néng)做('$≠zuò)好(hǎo)精美(měi)和(hé)适合時(shí)代、符合用(yò≠∑ng)戶思想的(de)頁面來(lái)。
