人們往往低估低保真線框圖（wireframe）的審美價(jià)值，如果說(shuō)這一組組灰盒子僅僅是我們工作交付成果的話，那么外觀也無(wú)關(guān)痛癢，對(duì)吧？錯(cuò)，大錯(cuò)特錯(cuò)。
視覺(jué)表達(dá)過(guò)度的線框圖的確會(huì)破壞人們對(duì)其想法的理解，就像是一個(gè)人穿著Stormtrooper服裝去參加重要的大使館會(huì)議一樣。盡管Stormtrooper是星球大戰(zhàn)粉絲聚會(huì)上非常耀眼的服裝，但它絕不可能幫助您在大使館做任何事情；反之，如果你遞交給項(xiàng)目經(jīng)理一個(gè)丑陋的線框圖，并沒(méi)有附帶任何描述，你覺(jué)得你的同事能按你的設(shè)想采取行動(dòng)嗎？他們會(huì)怎么想？最后依此做出來(lái)的產(chǎn)品是否能滿足用戶的需求？我想并不會(huì)，交流不暢的設(shè)計(jì)只會(huì)給項(xiàng)目帶來(lái)混亂和誤解，如果用戶體驗(yàn)設(shè)計(jì)未被PM和團(tuán)隊(duì)重視，最終想要獲得高質(zhì)量的產(chǎn)品也將會(huì)是非常艱難的。
這就是我強(qiáng)調(diào)線框圖美學(xué)的原因，閱讀你設(shè)計(jì)文檔的人在某種意義上也是用戶，你需要謹(jǐn)慎地對(duì)待他們。但這是否意味著我們將被迫花更多的時(shí)間在項(xiàng)目的構(gòu)思階段？我想并沒(méi)有：設(shè)計(jì)線框圖就像其他工藝一樣，需要許多規(guī)則的實(shí)踐，一旦你熟悉了這些技巧，它仍能保證項(xiàng)目進(jìn)度不受影響。在這里我歸納了幾條線框圖美學(xué)原則作為參考：
1. 消除所有干擾物
只有當(dāng)消除干擾物后我們才能有效溝通，那么什么是線框圖中的干擾物呢？略舉幾例：
不適當(dāng)?shù)呐渖?br />
不合適的保真度
丑陋的圖片和icon
無(wú)意義漫畫(huà)/詭異的字體
其他只有你才看得懂的代碼
這些都屬于讓讀者遠(yuǎn)離你設(shè)計(jì)理念的東西。說(shuō)來(lái)有趣，我認(rèn)識(shí)的一個(gè)UX設(shè)計(jì)師有一種特殊的習(xí)慣，他在每個(gè)占位符（交叉矩形）上都使用了縮寫(xiě)來(lái)標(biāo)記他期待什么類型的圖像，我想這對(duì)他而言當(dāng)然有一定的意義，但外人卻無(wú)法理解。所以如果你將和你的團(tuán)隊(duì)分享這個(gè)文檔，千萬(wàn)別讓這些縮寫(xiě)擾亂他們對(duì)設(shè)計(jì)意圖的感知。
2. 小心使用顏色
線框圖必須是一系列非黑即白的長(zhǎng)方形，還是說(shuō)允許五顏六色設(shè)計(jì)的出現(xiàn)？Neither，實(shí)際上想清楚地傳達(dá)設(shè)計(jì)僅需遵循一下簡(jiǎn)單的原則：
使用灰色陰影作為界面的線框結(jié)構(gòu)和內(nèi)容
使用不同灰度的區(qū)塊來(lái)表達(dá)層次
將所有圖片和icon保留成灰色以防視覺(jué)上的突出，在不同元素間適當(dāng)使用對(duì)比保證可讀性可以適當(dāng)考慮使用顏色高亮，表達(dá)特殊意義：例如藍(lán)色代表鏈接，紅色代表警告，綠色代表確認(rèn)等避免黑色，黑色的邊框會(huì)讓線框凌亂，在許多情況下“真正的boxy”反倒會(huì)成為干擾物
3. 避免過(guò)度設(shè)計(jì)
過(guò)度設(shè)計(jì)是新手用戶體驗(yàn)設(shè)計(jì)師的常見(jiàn)錯(cuò)誤，嘗試以簡(jiǎn)化、清晰和快速的方式傳達(dá)設(shè)計(jì)理念，不要太花哨。僅僅因?yàn)榫€框圖不要看就花費(fèi)大量時(shí)間制作界面元素會(huì)很浪費(fèi)時(shí)間，因此每當(dāng)思考一個(gè)特定元素是否準(zhǔn)備好時(shí)，請(qǐng)問(wèn)你自己如下問(wèn)題：
它是否能幫助（讀者）對(duì)該產(chǎn)品用戶情境上下文流程的理解？
它能清楚地傳達(dá)其意義和價(jià)值嗎？
你的同事能理解它嗎？
不要自問(wèn)設(shè)計(jì)是否好看，請(qǐng)自問(wèn)是否合理。
4. 使用真實(shí)（近似）尺寸
務(wù)必建立一塊真實(shí)尺寸的畫(huà)布。例如Web應(yīng)用程序的寬度為980px，則也應(yīng)在980px畫(huà)布上進(jìn)行wireframe的設(shè)計(jì)。為什么非得這樣做？的確在1200px的畫(huà)布上進(jìn)行元件布局要比980px的畫(huà)布上容易太多了，但我們最終還是得將內(nèi)容壓縮到指定規(guī)格的空間中去。在引起產(chǎn)品開(kāi)發(fā)的混亂前，還是乖乖遵守這種約束吧。
5. 記得功能可見(jiàn)性！
用戶體驗(yàn)設(shè)計(jì)之父唐·諾曼曾借詹姆斯·吉布森提出的“功能可見(jiàn)性”（affordances）的概念來(lái)描述用戶根據(jù)感知到的某些事物獲取暗示，從而產(chǎn)生行為的現(xiàn)象。例如界面設(shè)計(jì)中的按鈕往往看起來(lái)像是能被按下的；標(biāo)簽欄似乎能提醒用戶在內(nèi)容區(qū)塊間進(jìn)行切換的行為等。因此為了清楚表達(dá)你的idea，你的按鈕就必須要像按鈕、標(biāo)簽欄就必須要像標(biāo)簽欄。對(duì)于最終產(chǎn)品，功能可見(jiàn)性的意義在于指示某種特定行為，而在線框圖繪制階段，它能讓你的表達(dá)更容易被直觀地理解。
綜上，我們已經(jīng)遍歷了所有wireframes的設(shè)計(jì)原則，如果你的確遵守了，我相信你能做出一份很好的交付成果。但在這里我還想說(shuō)的是，如果脫離了整個(gè)故事（story）的上下文（context），即便是極具美感的wireframes也不能幫你傳達(dá)設(shè)計(jì)思考。我特地在這里故意使用了“故事”一詞，因?yàn)榫拖袷悄阆矚g的故事書(shū)一樣，在設(shè)計(jì)中你也會(huì)遇到：
一個(gè)主角（也就是你的用戶）
一段情節(jié)（也就是用例）
一個(gè)問(wèn)題（也就是用戶面對(duì)的問(wèn)題）
如果你精心制作的線框圖僅僅講述了故事的一部分，片面地呈現(xiàn)了一個(gè)用例和問(wèn)題且并未交代與主角有關(guān)的信息，那么你的讀者可能很難把控整個(gè)畫(huà)面。想象一下沒(méi)有任何英雄的一部指環(huán)王，如果它僅僅簡(jiǎn)短地提到了戒指，索倫之戰(zhàn)以及大量對(duì)中土世界的大量描述，你仍然會(huì)摸不著頭腦，沒(méi)有繼續(xù)讀下去的意愿，畢竟太難理解了。
如今一提到用戶體驗(yàn)設(shè)計(jì)（UED），人們就往往想到Wireframing、畫(huà)線框圖啥的。但與其說(shuō)UED就是設(shè)計(jì)Wireframing，不如按照字面意思將它理解為對(duì)“體驗(yàn)”本身的設(shè)計(jì)——我們希望能通過(guò)一些方法對(duì)目標(biāo)群體與產(chǎn)品交互的行為方式產(chǎn)生影響。為了做到這一點(diǎn)，我們就要寫(xiě)下完整故事，以具有說(shuō)服力的方式告訴團(tuán)隊(duì)和利益相關(guān)者，從而鼓舞他們采取行動(dòng)。你有一大堆工具和方法在幫助你完成這項(xiàng)任務(wù)：
用戶畫(huà)像（Personas）
用戶故事和用例（User stories and use cases）用戶流程圖（user flows）
概念圖（Conceptual diagrams）
商業(yè)模式畫(huà)布（Business Model Canvas）以及其他牢記你的目的永遠(yuǎn)是描述清楚用戶是誰(shuí)，問(wèn)題是什么，以及解決方法是什么，所以務(wù)必選擇最有利于你連貫且吸引你的聽(tīng)眾的敘事手段。
想象一下某天一個(gè)鉛筆供應(yīng)商突然闖進(jìn)我們的辦公室，要求我們?cè)诿魈烨白龀鲆粋€(gè)大量售賣鉛筆的網(wǎng)站（也就是說(shuō)我們并沒(méi)有時(shí)間進(jìn)行初步的調(diào)研和項(xiàng)目啟動(dòng)），我們還是不是應(yīng)該立即打開(kāi)線框圖編輯器開(kāi)始畫(huà)概念圖呢？
當(dāng)然不是，一個(gè)更好的解決方法應(yīng)該是這樣：我們首先需要確定用戶是誰(shuí)，并召集整個(gè)團(tuán)隊(duì)來(lái)采訪你的客戶來(lái)挖掘業(yè)務(wù)主要的目標(biāo)群體；之后再通過(guò)創(chuàng)建用戶畫(huà)像對(duì)用戶的共同行為模式、態(tài)度、動(dòng)機(jī)以及基本人口統(tǒng)計(jì)特征進(jìn)行歸類，將關(guān)注點(diǎn)放在他們的問(wèn)題，而非具體的特征上。在此之后你需要繼續(xù)詳細(xì)描述這些你所需要解決的問(wèn)題，并對(duì)整個(gè)項(xiàng)目進(jìn)行配置。你的委托人可能對(duì)此不以為然：“我需要賣更多的鉛筆！”他尖叫著，但你無(wú)需理會(huì)，因?yàn)檫@并非一個(gè)待解決的問(wèn)題，而是項(xiàng)目的結(jié)果。畢竟真正問(wèn)題總是待在用戶那兒。
闡述一下，為什么是用戶畫(huà)像上的這些人想要買鉛筆？他們遇到了什么問(wèn)題？他們的動(dòng)機(jī)、目標(biāo)和態(tài)度又分別是什么？和你的委托人談?wù)剺I(yè)務(wù)方面的事，確保自己了解了合同上的需求。這些討論和思考的過(guò)程可能花費(fèi)較多的時(shí)間，但我相信它確實(shí)有助于更好地了解項(xiàng)目并創(chuàng)建故事，直至你們真正令用戶滿意。
本文譯自designmodo上的博文《The Aesthetics of Wireframes and the Importance of Context》，若翻譯有誤歡迎指正。
作者：Marcin Treder
譯者：ARILIANO
原文鏈接 https://designmodo.com/aesthetics-wireframes-context/
值得您信賴的網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、整合營(yíng)銷提供商
南京逗點(diǎn)科技
kuadi.cn