除了需要打造一個(gè)美觀的UI界面之外，還應(yīng)該讓用戶可以享受使用產(chǎn)品的過程，產(chǎn)生粘度，最起碼不會(huì)產(chǎn)生厭煩的情緒。這就關(guān)乎到一個(gè)好的用戶體驗(yàn)的問題。

因此，為了避免在“建筑”的“落成儀式”上給用戶造成負(fù)面的體驗(yàn)，設(shè)計(jì)的時(shí)候就必須充分考慮用戶的感受和體驗(yàn)。在“建筑”還未落成的時(shí)候，原型就是問題的解決之道。

影響產(chǎn)品開發(fā)的有三點(diǎn)基本因素：

• 功能性：這款產(chǎn)品能做什么？
• 交互性：這款產(chǎn)品是如何運(yùn)作的？
• 可視性：這款產(chǎn)品是什么樣子的？

 

其他因素比如用戶需求、企業(yè)目標(biāo)和其他的一些需求，都需要UX設(shè)計(jì)師全面、縝密地去考慮和理解。他們需要提前設(shè)計(jì)好框架的大方向，首要的是定義需求：我們要達(dá)到的什么樣的目標(biāo)？比如說針對(duì)在城市中無法找到停車位的情況，需求就是一個(gè)“能讓我找到停車位”的產(chǎn)品。在既有的城市系統(tǒng)中，問題的關(guān)鍵是明確主要的使用痛點(diǎn)和評(píng)估用戶跟目標(biāo)的距離。

可視化思考

很多UX設(shè)計(jì)師在概念形成前和期間喜歡用文字表達(dá)構(gòu)思，實(shí)際上會(huì)讓交流變得晦澀難懂。事實(shí)上需求、問題和用戶故事等等都需要用可視化的方式來呈現(xiàn)，因?yàn)閳D像處于大腦信息接收鏈的首位，簡(jiǎn)明生動(dòng)的圖片才能夠幫助團(tuán)隊(duì)快速地找到聯(lián)系，理解晦澀的概念。

草圖也是團(tuán)隊(duì)合作的好的起點(diǎn)，因?yàn)橛霉P和紙或是記號(hào)筆和白板就能夠解決常見的問題。一些人說“我不擅長(zhǎng)畫畫”只是借口，畢竟這不是一個(gè)繪畫比賽。重要的是快節(jié)奏的頭腦風(fēng)暴，不斷討論并且在原有基礎(chǔ)上修訂。微軟的首席研究員Bill Buxton認(rèn)為：“草圖是一種思考工具。”而可視化思考不僅僅是一種工具，還是一種工作態(tài)度：把筆和紙拿在手中，讓原型說話，實(shí)事求是地闡述觀點(diǎn)；好過拐彎抹角說半天抓不住重點(diǎn)。

草圖和故事板

在每次原型設(shè)計(jì)的開頭都擺著一個(gè)問題：我用原型想要測(cè)試什么？是否需要出一份大體的排版？通常都可以繪制一份中心的UI視圖的草圖。具體的內(nèi)容和形狀不重要，直線和曲線代表文本，矩形和圓形代表圖片。

不過問題往往是：中心內(nèi)容是什么？怎樣把內(nèi)容代入場(chǎng)景？用戶界面的元素比如列表，按鈕，下拉菜單應(yīng)該怎樣替換？所有這些問題可以利用草圖輕松快速地討論。

 

 

可交互的產(chǎn)品總是在不斷變化著的。所以你需要用不同順序測(cè)試排版。因此草圖就可以集合成可視化具體的使用場(chǎng)景的故事板。首先需要繪制出三或四個(gè)核心功能。故事板就可以測(cè)試用戶如何從一個(gè)視圖跳到下一個(gè)，處于產(chǎn)品具體的什么位置。

同樣重要的是測(cè)試人群的篩選。你想要測(cè)試的內(nèi)容，決定了產(chǎn)品可視化、交互性和功能性細(xì)節(jié)的深度。測(cè)試者包括團(tuán)隊(duì)成員、投資者和用戶都會(huì)部分地影響到原型的抽象程度。

線框圖

相比草圖來說，線框圖是前端的第一份圖表式的的設(shè)計(jì)稿，是用戶界面的具體呈現(xiàn)。到了線框圖的階段，圖文有了最終的尺寸，彼此之間關(guān)系安排妥當(dāng)。設(shè)計(jì)中的變量如顏色、字體、形狀、紋理和效果等等不用過早決定，以避免在概念的早期階段被這些細(xì)節(jié)分散注意力。

線框圖主要是關(guān)于確定有哪些元素，它們是如何鏈接的，以及哪些功能是易于用戶理解的。最大的新手錯(cuò)誤通常是線框包含錯(cuò)誤的文本和控件元素大小，在設(shè)計(jì)最終稿時(shí)，就需要再次檢查基本布局，這樣就會(huì)非常地耗時(shí)耗力。

視覺稿

下一步是視覺稿。這個(gè)階段視覺上基本與最終的UI一致了，但是只有局部的功能。視覺稿常常被視作高保真的原型，因?yàn)椴粌H有大致的框架（即布局），還有相關(guān)的設(shè)計(jì)變量：顏色、形狀、紋理、間距和字體選擇，甚至還會(huì)關(guān)注圓形按鈕的弧度。除了排版和順序之外，設(shè)計(jì)師還需要去理清很多細(xì)節(jié)上的問題。常用的軟件有Sketch和Adobe Photoshop、Illustrator、Dreamweaver等等。

原型工具

根據(jù)你的專業(yè)水平和偏好有許多可以選擇的原型設(shè)計(jì)工具。老牌的有像Axure這樣功能豐富、操作復(fù)雜的原型設(shè)計(jì)工具，適合多頁面流程和復(fù)雜邏輯，常用于點(diǎn)擊交互多和邏輯比較復(fù)雜的企業(yè)軟件界面。與之相對(duì)有快速原型設(shè)計(jì)工具M(jìn)ockplus，不管是產(chǎn)品老鳥還是入門新人都能輕松上手，快速交互，設(shè)計(jì)靈活，并且不用掌握代碼知識(shí)。除此之外，還支持豐富的原型預(yù)覽方式，在線離線手機(jī)端都可以輕松預(yù)覽，還支持云同步和團(tuán)隊(duì)協(xié)作，團(tuán)隊(duì)工作更加高效便捷。

 

 

做個(gè)小結(jié)

對(duì)于原型設(shè)計(jì)而言，實(shí)現(xiàn)的方式和工具都是很豐富的。不過流程監(jiān)控中，速度和靈活性是至關(guān)重要的方面。

項(xiàng)目的開始的時(shí)候需要快速?zèng)Q策快速明確方向，到了尾聲需要設(shè)計(jì)師對(duì)界面精雕細(xì)琢。簡(jiǎn)單的草圖幾分鐘就能完成，加上交互可能就是幾個(gè)小時(shí)。想法的修改在草圖的幫助下幾秒就能完成，可交互的原型的話就會(huì)花更長(zhǎng)的時(shí)間

因此不管你在原型設(shè)計(jì)中選擇怎樣的實(shí)現(xiàn)方式或者工具，核心的目標(biāo)需要明確：想法必須要隨時(shí)隨地易于交流易于理解，助力于做決策。

 

愛盈利（aiyingli.com）移動(dòng)互聯(lián)網(wǎng)最具影響力的盈利指導(dǎo)網(wǎng)站。定位于服務(wù)移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動(dòng)盈利指導(dǎo)。我們的目標(biāo)是讓盈利目標(biāo)清晰可見！降低門檻，讓缺乏經(jīng)驗(yàn)、資金有限的個(gè)人和團(tuán)隊(duì)獲得經(jīng)驗(yàn)和機(jī)會(huì)，提高熱情，激發(fā)產(chǎn)品。