2020-6-20 資深UI設(shè)計(jì)者
在這里,我們將研究設(shè)計(jì)中最簡(jiǎn)單、因而常常被低估的活動(dòng)之一,即線(xiàn)框圖的設(shè)計(jì)。了解什么是線(xiàn)框圖,為什么需要設(shè)計(jì)它們以及如何充分利用線(xiàn)框圖。
線(xiàn)框圖,也稱(chēng)為頁(yè)面示意圖或屏幕藍(lán)圖,是展示網(wǎng)站或產(chǎn)品框架的視覺(jué)指南:
線(xiàn)框圖的主要目標(biāo)是向團(tuán)隊(duì)和利益相關(guān)者展示產(chǎn)品將包含的頁(yè)面和組件,以及這些元素之間的相互作用。
1. 幫助團(tuán)隊(duì)評(píng)估和完善工作范圍
線(xiàn)框圖允許設(shè)計(jì)師快速創(chuàng)建產(chǎn)品的視覺(jué)表現(xiàn),方便后期修改;
幫助設(shè)計(jì)師向團(tuán)隊(duì)展示應(yīng)用程序具有的頁(yè)面元素和控件,以及所有元素如何進(jìn)行交互。
2. 讓團(tuán)隊(duì)所有成員參與產(chǎn)品設(shè)計(jì)
線(xiàn)框圖的使用允許設(shè)計(jì)師和開(kāi)發(fā)人員在早期階段共同參與討論設(shè)計(jì),在開(kāi)始進(jìn)行視覺(jué)設(shè)計(jì)之前就提供反饋和更改建議。
這樣有助于使設(shè)計(jì)過(guò)程快速迭代,避免不必要的浪費(fèi)。
3. 方便快速演示
從客戶(hù)和利益相關(guān)者那里獲得快速反饋是設(shè)計(jì)過(guò)程的重要組成部分。
設(shè)計(jì)過(guò)程中,經(jīng)常會(huì)遇到需求的來(lái)回變化。有了線(xiàn)框圖,可以使這個(gè)過(guò)程更有效,修改原型比修改線(xiàn)框圖需要更多的時(shí)間和精力。
4. 進(jìn)行用戶(hù)測(cè)試
線(xiàn)框圖可以幫助設(shè)計(jì)師從潛在用戶(hù)那里獲得有用價(jià)值的反饋。同時(shí)瀏覽線(xiàn)框比讀取規(guī)范要快得多,還有助于減小與預(yù)期效果的差異。
為了獲得最好的結(jié)果,為下一步的 UI 打下堅(jiān)實(shí)的基礎(chǔ),需要遵循幾個(gè)簡(jiǎn)單的規(guī)則:
1. 顏色的使用
如果在線(xiàn)框圖中使用豐富的配色,可能會(huì)分散觀者的注意力,并使更新變得更困難。
但在某些情況下,使用顏色突出顯示特定組件是合理的。例如,可以將紅色用于錯(cuò)誤狀態(tài),將藍(lán)色用于注釋等。
2. 使用簡(jiǎn)單的組件
線(xiàn)框圖并不包含全面設(shè)計(jì)和詳細(xì)說(shuō)明的組件。相反它們應(yīng)該設(shè)計(jì)的相對(duì)簡(jiǎn)單,讓團(tuán)隊(duì)成員更容易識(shí)別。
為組件添加細(xì)致的陰影、粗細(xì)描邊將花費(fèi)大量的時(shí)間和精力,卻不是很實(shí)用。
3. 保持一致性
在所有線(xiàn)框圖中,類(lèi)似的組件必須看起來(lái)相同。如果相同的組件看起來(lái)不同,開(kāi)發(fā)人員可能會(huì)質(zhì)疑它們的功能是否相同,甚至?xí)驗(yàn)樵O(shè)計(jì)不同而增加估算時(shí)間。
在處理線(xiàn)框圖時(shí),記住一個(gè)簡(jiǎn)單的規(guī)則:保持一致,避免造成混淆。
4. 使用真實(shí)內(nèi)容
我們會(huì)??吹経I/UX設(shè)計(jì)師沒(méi)有在線(xiàn)框圖上添加真正的內(nèi)容,而是重復(fù)使用同一些文本。這是很少有設(shè)計(jì)師意識(shí)到的普遍錯(cuò)誤。
內(nèi)容真實(shí)與否會(huì)影響接下來(lái)的設(shè)計(jì)。如果使用不真實(shí)的內(nèi)容,UI設(shè)計(jì)中文本的數(shù)量多少和排布方式都要再調(diào)整。
真實(shí)內(nèi)容能給線(xiàn)框圖增加價(jià)值,更好地解釋上下文。
5. 使用注釋
設(shè)計(jì)中可能會(huì)遇到某些解決方案無(wú)法直觀地加以說(shuō)明的情況,例如某些控件背后的邏輯,因此開(kāi)發(fā)人員可能會(huì)對(duì)它們有疑問(wèn)。
在這種情況下,可以提供注釋來(lái)解釋其背后的邏輯。這樣,你的團(tuán)隊(duì)就會(huì)理解你的解決方案,你就不需要花時(shí)間再討論它們。
6. 線(xiàn)框圖程度
線(xiàn)框圖應(yīng)該選擇低保真還是高保真,沒(méi)有嚴(yán)格的規(guī)定,取決于項(xiàng)目的具體要求。
硅谷知名作家埃里克·萊斯認(rèn)為,如果不能帶來(lái)價(jià)值就不需要做額外的工作,從基礎(chǔ)做起,然后根據(jù)需要添加細(xì)節(jié)。
7. 將線(xiàn)框圖延伸到交互原型中
在使用不同產(chǎn)品時(shí),有一些簡(jiǎn)單而通用的交互,也有一些交互相當(dāng)復(fù)雜。
在線(xiàn)框圖不足以說(shuō)明復(fù)雜性的情況下,可以將線(xiàn)框圖擴(kuò)展到交互原型中,而不必寫(xiě)冗長(zhǎng)的注釋并花大量時(shí)間進(jìn)行解釋。
將線(xiàn)框圖結(jié)合到設(shè)計(jì)過(guò)程中,為我們所用:
文章來(lái)源:優(yōu)設(shè) 作者:Clip設(shè)計(jì)夾
藍(lán)藍(lán)設(shè)計(jì)( 91whvog3.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn