網(wǎng)頁(yè)設(shè)計(jì)用戶體驗(yàn)概述:從用戶體驗(yàn)印證設(shè)計(jì)
設(shè)計(jì)者們通常會(huì)遇到一些固執(zhí)己見的客戶,以致在讓客戶滿意和讓用戶滿意之間難以抉擇,國(guó)外用戶體驗(yàn)設(shè)計(jì)師Amir Khella日前就撰文概述了網(wǎng)頁(yè)設(shè)計(jì)用戶體驗(yàn),提出了第三個(gè)選擇,即從用戶體驗(yàn)的(UX)角度來(lái)印證自己的設(shè)計(jì),Amir Khella是Keynotopia的創(chuàng)始人,在過(guò)去3年中,他設(shè)計(jì)了超過(guò)12款初創(chuàng)產(chǎn)品,部分已被收購(gòu)。以下便是其全文的內(nèi)容。
站長(zhǎng)之家3月23日編譯:設(shè)計(jì)者們難免會(huì)遇到這樣問(wèn)題,如你花了2周時(shí)間搞定了展示給客戶看的頁(yè)面,結(jié)果客戶雖然喜歡,但卻希望你花幾小時(shí)再做些小修改。很多設(shè)計(jì)者并不知道其中原因,有時(shí)甚至連客戶自己都搞不清楚原因。其實(shí)客戶可能就是覺(jué)得在頁(yè)面右側(cè)嵌入地圖會(huì)更好,他堅(jiān)持自己的意見,希望你能配合改一下。
通常在這種情況下,你只能二選一:要么讓客戶滿意,要么讓用戶滿意。不過(guò)幸好現(xiàn)在還有第三個(gè)選擇,即從用戶體驗(yàn)的(UX)角度來(lái)印證自己的設(shè)計(jì)。在我的設(shè)計(jì)生涯中,還沒(méi)有遇到過(guò)客戶覺(jué)得設(shè)計(jì)不合理而提出修改的情況,也沒(méi)有遇到過(guò)項(xiàng)目的用戶體驗(yàn)需要修改的。
在用戶體驗(yàn)的幫助下,客戶不會(huì)再固執(zhí)地堅(jiān)持己見,而設(shè)計(jì)的重心也重回到了用戶身上。因此,主觀(有時(shí)是自負(fù))要求設(shè)計(jì)改變需要以理服人,這樣對(duì)用戶也有利。
用戶體驗(yàn)不僅讓設(shè)計(jì)者和客戶達(dá)成共識(shí),亦可根據(jù)產(chǎn)品本來(lái)的前景規(guī)劃對(duì)其進(jìn)行修改和更新,因此要長(zhǎng)期保持設(shè)計(jì)結(jié)構(gòu)的完整性。
什么是用戶體驗(yàn)?
它是一個(gè)框架,框架所使用的精美設(shè)計(jì)能找出其中存在的問(wèn)題,并為這些問(wèn)題找到最佳解決方案。
與傳統(tǒng)觀念相反,用戶體驗(yàn)不是一個(gè)純粹的創(chuàng)作過(guò)程,而是一個(gè)合理連續(xù)重復(fù)的過(guò)程,用于解決設(shè)計(jì)中的難點(diǎn)。它關(guān)注的是用戶使用終端產(chǎn)品時(shí)的感受。
讓用戶體驗(yàn)貫穿整個(gè)設(shè)計(jì)過(guò)程
因此,在使用Photoshop或是創(chuàng)建草圖和框架圖之前,按照下面的步驟,能很好為你解決設(shè)計(jì)中所遇到的問(wèn)題。
用戶研究
通過(guò)用戶研究來(lái)確定受眾群體。不管你設(shè)計(jì)的是網(wǎng)站還是移動(dòng)應(yīng)用,為目標(biāo)用戶寫下簡(jiǎn)易說(shuō)明,包括目標(biāo)用戶的統(tǒng)計(jì)信息,他們對(duì)技術(shù)掌握程度以及最終所要達(dá)到的效果。
用戶故事和用戶身份
寫一些簡(jiǎn)短的故事來(lái)告訴用戶如何用產(chǎn)品完成這些目標(biāo)。在這個(gè)階段,不要太注重細(xì)節(jié),相反,要嘗試去確定高級(jí)的用戶案例。這個(gè)活動(dòng)叫做創(chuàng)建用戶身份。
繪制系統(tǒng)開發(fā)流程圖
根據(jù)這些故事,為系統(tǒng)繪制框圖,包含的內(nèi)容有:主要實(shí)體的快照,以及彼此之間的關(guān)聯(lián)和相互作用。
比如說(shuō),我在開發(fā)一款能夠在早期實(shí)驗(yàn)中找到合適用戶的網(wǎng)絡(luò)應(yīng)用,因此,我會(huì)為用戶、公司和研究分別創(chuàng)建實(shí)體。
用箭頭標(biāo)明這些實(shí)體之間的關(guān)系,比如,“公司能夠創(chuàng)建/編輯/刪除一項(xiàng)研究”,而“用戶可以瀏覽/評(píng)論/應(yīng)用一項(xiàng)研究”。
如果你了解數(shù)據(jù)庫(kù)設(shè)計(jì),就會(huì)覺(jué)得很簡(jiǎn)單,這跟創(chuàng)建一個(gè)實(shí)體關(guān)系圖(ERD)差不多。
我們目前研究的都是問(wèn)題空間(problem space):由于處于系統(tǒng)級(jí)設(shè)計(jì)階段,所以不用關(guān)注太多的細(xì)節(jié)。這一階段到開始下一階段之前,開發(fā)者的動(dòng)力比起讓每一步都無(wú)遺漏顯得更重要。因?yàn)樵撨^(guò)程是可重復(fù)的,你可以不斷回到上一步進(jìn)行添加或修改。
明確了問(wèn)題及其屬性,接下來(lái)就該去尋找解決方法。
繪制線框圖
先從所有需要繪制輪廓的屏幕(譯者注:不太懂這個(gè)屏幕到底是指什么)開始,想想用戶如何在各個(gè)屏幕之間轉(zhuǎn)換。從每一個(gè)屏幕中選定1至2件要完成的任務(wù),以及接下來(lái)要做的步驟。
為每個(gè)屏幕中的系統(tǒng)級(jí)區(qū)設(shè)計(jì)勾畫草圖,每隔一段時(shí)間,你可根據(jù)第二步中所記錄的故事,快速回顧整個(gè)設(shè)計(jì)。
一旦系統(tǒng)級(jí)設(shè)計(jì)(high-level design)與之前的內(nèi)容吻合,即可為每一個(gè)屏幕增加更多細(xì)節(jié),繼續(xù)進(jìn)行設(shè)計(jì)走查工作,無(wú)論如何都要確保用戶直觀地看到屏幕。
我經(jīng)常用紙筆或白板把所有的步驟過(guò)一遍。這有助于我集中精力做自己想做的,而不會(huì)受限于一款應(yīng)用能實(shí)現(xiàn)什么或不能實(shí)現(xiàn)什么。
原型設(shè)計(jì)
最后一步是為一些屏幕進(jìn)行原型設(shè)計(jì),并在它可用時(shí),點(diǎn)擊它們獲得設(shè)計(jì)體驗(yàn)的反饋信息。通常,我使用蘋果的Keynote和Keynotopia,這樣花很少時(shí)間就可把要展示給客戶和潛在用戶的設(shè)計(jì)歸納到一起,并且很快會(huì)收到相關(guān)的反饋信息。
總結(jié)
既然你與客戶達(dá)成一致(甚至讓客戶參與了整個(gè)用戶體驗(yàn)設(shè)計(jì)的過(guò)程),這就為你推出最佳設(shè)計(jì)方案和創(chuàng)建逼真的屏幕打下了堅(jiān)實(shí)基礎(chǔ)。這樣你就有了很好的參考,無(wú)論何時(shí)遇到固執(zhí)己見的客戶都有回旋余地。
最后用系統(tǒng)理論家巴克敏斯特·富勒(Buckminster Fuller)的名句來(lái)結(jié)束這篇文章:
“我在解決一個(gè)問(wèn)題時(shí),從來(lái)不會(huì)去想它是否美觀。我只會(huì)去考慮如何解決這個(gè)問(wèn)題。但是問(wèn)題解決之后,如果這個(gè)解決方案不夠漂亮,我明白這是不對(duì)的。”(VIA:sixrevisions.com 原作者:Amir Khella 編譯:jaysming)
本文地址:http://m.likemindfilms.com/tutorial/di1121.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏