互聯(lián)網(wǎng)大環(huán)境的“紛爭”導(dǎo)致無論是產(chǎn)品設(shè)計(jì)還是UI設(shè)計(jì)都很難有時間去在用戶體驗(yàn)層面思考創(chuàng)新，功能迭代型需求占據(jù)了絕大部分時間，諸多互聯(lián)網(wǎng)企業(yè)從單月發(fā)版壓縮到雙周迭代發(fā)版，甚至到如今的單周發(fā)版…毫無存在感的反復(fù)型工作讓UI設(shè)計(jì)師一時很難找到自身的價值所在。
隨著一些互聯(lián)網(wǎng)企業(yè)巨頭逐漸趨于成熟，在未來UI設(shè)計(jì)師在團(tuán)隊(duì)中的角色地位會越來越高。
馬斯洛需求層次理論將人的需求分為5個等級，即生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求，將這個理論移至企業(yè)角度其實(shí)同樣適用，一個企業(yè)的發(fā)展同樣可以理解為這5個過程，以共享出行類互聯(lián)網(wǎng)企業(yè)為例：
生理需求可以理解為企業(yè)資金鏈正常運(yùn)轉(zhuǎn)；安全需求則是共享設(shè)備不會被惡意破壞；社交需求是與其他知名企業(yè)達(dá)成合作；尊重需求是擁有較好的企業(yè)口碑；到了自我實(shí)現(xiàn)需求才是科技與用戶體驗(yàn)的創(chuàng)新。
這些需求是自下而上的，所以UI設(shè)計(jì)師應(yīng)該著眼于未來，這也是概念設(shè)計(jì)的價值所在。
< UI設(shè)計(jì)師健康可持續(xù)的成長之路 >
移動互聯(lián)網(wǎng)發(fā)展初期，元素繪制能力是拉開初高級UI設(shè)計(jì)師差異的主要因素，而隨著設(shè)計(jì)語言扁平化時代的到來，設(shè)計(jì)者之間的差異化變的不再那么清晰，甚至純視覺、插畫師與用戶體驗(yàn)設(shè)計(jì)混為一談，大批設(shè)計(jì)者找尋不到了方向...
隨著移動互聯(lián)網(wǎng)飛速發(fā)展，用戶體驗(yàn)設(shè)計(jì)的職能在幾經(jīng)“洗禮”之后變的愈發(fā)清晰，以設(shè)計(jì)者的能力、用戶的角度，創(chuàng)新、細(xì)膩、高效的打造產(chǎn)品優(yōu)質(zhì)用戶體驗(yàn)是目前很多一線互聯(lián)網(wǎng)UED團(tuán)隊(duì)的核心價值所在。
設(shè)計(jì)者格局變得更廣并不代表基礎(chǔ)能力可以被忽略，對于入門設(shè)計(jì)者來講，起點(diǎn)仍然是在技法層面。
這里我以未來一線企業(yè)UI設(shè)計(jì)師能力模型為導(dǎo)向，規(guī)劃出一條UI設(shè)計(jì)師健康可持續(xù)的成長之路，即“熟悉軟件技法”、“拔高視覺上限”、“理性設(shè)計(jì)思維”、“歸納個人方法論”四個階段。
而今天所要講的概念設(shè)計(jì)，就在第二個階段：拔高視覺上限。
我一直認(rèn)為設(shè)計(jì)師的成長應(yīng)該是先培養(yǎng)其上限，打開思維禁錮，再通過理論原則兜住其下限。
概念設(shè)計(jì)是最好的提高設(shè)計(jì)水平上限的方式，拋開規(guī)范禁錮，讓設(shè)計(jì)者的創(chuàng)新想法得以具象化。
< 概念設(shè)計(jì)應(yīng)該傳遞出的態(tài)度 >
雖然概念設(shè)計(jì)可以拋開設(shè)備規(guī)范與理論原則，但是每次設(shè)計(jì)前都要有其設(shè)計(jì)目的與愿景。我們的設(shè)計(jì)行為或者設(shè)計(jì)作品在未來可以解決什么問題，即使可以讓未來的用戶頁面更美觀有趣也算是一個愿景。
設(shè)計(jì)愿景就像作品的靈魂，有靈魂的設(shè)計(jì)才不會徒有其表。
這篇文章就以概念設(shè)計(jì)與落地設(shè)計(jì)互為參照，講解這兩種設(shè)計(jì)行為該如何去思考，如何賦予其真實(shí)的意義。
< 未來可能性與實(shí)用規(guī)范性 >
在設(shè)計(jì)著手之前，從思維的角度上就要明確區(qū)分出這兩種設(shè)計(jì)的差異，概念設(shè)計(jì)所對應(yīng)的思維角度應(yīng)該是“未來可能性”，更多的展現(xiàn)出設(shè)計(jì)者對于未來交互與UI設(shè)計(jì)的創(chuàng)新體驗(yàn)思考，不局限于設(shè)備尺寸與技術(shù)成本。
而落地設(shè)計(jì)應(yīng)該思考的是“實(shí)用規(guī)范性”，可否高效的解決當(dāng)前產(chǎn)品問題給產(chǎn)品帶來優(yōu)質(zhì)的體驗(yàn)與數(shù)據(jù)的正向增長是落地設(shè)計(jì)需要重點(diǎn)去考慮的。
除去上面思考緯度上的差異，其實(shí)這兩種設(shè)計(jì)同樣有相同需要遵循的原則，那就邏輯清晰且全面。
< 交互行為9大狀態(tài) >
無論概念設(shè)計(jì)還是落地設(shè)計(jì)，其交互流程都應(yīng)該是邏輯清晰的，我們經(jīng)常見一些概念設(shè)計(jì)只設(shè)計(jì)一兩個頁面，沒有完整的交互流程，這種設(shè)計(jì)很難賦予其價值，因?yàn)槲覀冊O(shè)計(jì)的每一個頁面都是做為某個交互流程間的其中一個頁面。
UI設(shè)計(jì)不像平面設(shè)計(jì)，UI設(shè)計(jì)本就與交互設(shè)計(jì)掛鉤，單個靜態(tài)的頁面只能算是界面板式的練習(xí)，很難再賦予其它意義。
一款常規(guī)的互聯(lián)網(wǎng)產(chǎn)品應(yīng)該具有以下9大交互狀態(tài)，即“等待”、“開始”、“空”、“有數(shù)據(jù)”“數(shù)據(jù)過多”、“錯誤”、“待確認(rèn)”、“中斷”、“結(jié)束”。
這9個交互狀態(tài)并不一定在每個產(chǎn)品中都會出現(xiàn)，但一個完整的交互流程即使對于概念設(shè)計(jì)也是非常有必要的，從打開APP的等待方式，到解決需求后的結(jié)束狀態(tài)，概念設(shè)計(jì)應(yīng)該是對于整個產(chǎn)品的思考，下面我主要講解一些概念設(shè)計(jì)中容易忽略的狀態(tài)。
< 等待狀態(tài) >
比如用戶體驗(yàn)該產(chǎn)品的第一步是從等待開始，啟動頁做為等待時的過度頁面，看似簡單，其實(shí)同樣有很多地方需要思考，從用戶體驗(yàn)的角度考慮，產(chǎn)品應(yīng)當(dāng)盡可能快地讓用戶進(jìn)入程序并進(jìn)行功能操作，如此看來，啟動畫面的存在就是多余。
但是，應(yīng)用程序本質(zhì)上是由多種代碼命令和數(shù)據(jù)組合而成的。啟動應(yīng)用程序的過程實(shí)質(zhì)上是運(yùn)行代碼和數(shù)據(jù)讀取的過程，而這個過程是需要一定的時間。
與其給用戶看代碼運(yùn)行的過程，不如給用戶展示一張好看的圖片或者一段有意思的動畫，從這個出發(fā)點(diǎn)來講，是優(yōu)化了用戶體驗(yàn)。
用戶啟動應(yīng)用程序的場景，一定是需要用到產(chǎn)品的某項(xiàng)功能。也就是說，用戶啟動應(yīng)用程序的目的是希望立即體驗(yàn)程序并完成某項(xiàng)任務(wù)，而非欣賞你喜歡的啟動畫面。
所以，啟動畫面應(yīng)當(dāng)更有意義，要能為用戶體驗(yàn)做出貢獻(xiàn)，要能充當(dāng)產(chǎn)品和用戶之間產(chǎn)生互動的橋梁。如今啟動頁大致可以分為三種，即“品牌傳遞型”、“快速啟動型”、“氛圍營造型”。
品牌傳遞型啟動頁在國內(nèi)最為常見，通常包括產(chǎn)品啟動圖標(biāo)、產(chǎn)品名稱及Slogan三要素，部分還會展示應(yīng)用的開發(fā)者、版本號等。
這種啟動頁最常見的有兩種表現(xiàn)形式，一種是是將啟動圖標(biāo)、產(chǎn)品名稱和Slogan相對于整個頁面居中放置，第二種表現(xiàn)形式是統(tǒng)一放置在頁面的最下方，然后將上方留白。
看似僅僅元素放置的差異，其實(shí)有很多地方值得深挖。
右圖元素置底處理方式的好處是拓展性較高，如果需要在啟動頁面植入廣告時，品牌信息的位置可以不變，只需在品牌信息上方的空白區(qū)域植入廣告即可，以透明度漸現(xiàn)的方式可以做到啟動頁與廣告頁面無縫銜接。
微博、知乎、淘票票等很多產(chǎn)品都是使用了這種設(shè)計(jì)方法。
第二種快速啟動型遵循iOS建議，盡量讓用戶不去感知頁面的存在，并“無縫”銜接到應(yīng)用當(dāng)中，通常是把首頁加載狀態(tài)圖作為啟動頁面。
不過，這種設(shè)計(jì)由于具有局限性，國內(nèi)的App界面使用這種方式的非常少。如果有App想采用此類啟動頁面，有兩個點(diǎn)需要評估：
第1點(diǎn)是評估好App自身的體量，保證啟動的流暢性和快捷性。體量較大的App不適合使用此種方式，因?yàn)檩^大體量的軟件啟動也會較慢，就會讓用戶有種“網(wǎng)絡(luò)不佳”的體驗(yàn)，把App運(yùn)行的時間誤以為是網(wǎng)絡(luò)延遲；
第2點(diǎn)是評估首頁版塊的固定性，一般這時候不允許首頁版塊有太大的變動，不然啟動頁過渡到首頁后會在視覺上有較大反差，體驗(yàn)也會較差。比如iOS系統(tǒng)內(nèi)置的瀏覽器Safari，由于其體量較小，首頁版塊也相對較為固定，左圖啟動頁面就使用了首頁加載中的狀態(tài)，右圖為App首頁。
很多App為了引起用戶的情感共鳴也會使用氛圍營造型啟動頁，這種啟動頁的目的是將產(chǎn)品格調(diào)從用戶打開產(chǎn)品第一眼就傳遞給用戶。
這種啟動頁多以插圖的形式體現(xiàn)，可以是插畫也可以是攝影照片，素材圖片合適與否是這種啟動頁面的核心。
微信自誕生以來就基本沒有更換過啟動頁，最熟悉的就是那一個遠(yuǎn)望著地球的小人，那么長時間以來，一直都是那一個小人，沒有伙伴。
這其實(shí)是和當(dāng)初張小龍發(fā)布微信時的初衷相聯(lián)系的：每個人來到這個世界上都是孤獨(dú)的存在，都在眺望著那一個繁華美麗的、自己迫切渴望進(jìn)入的地球，沒有人在自己的身邊，微信就是那一個聯(lián)系的渠道。
比如我們現(xiàn)在需要給一個租房類產(chǎn)品設(shè)計(jì)一個氛圍營造型啟動頁，首先就要去思考產(chǎn)品格調(diào)的關(guān)鍵詞。
比如我們使用圖片做為主體，根據(jù)上述關(guān)鍵詞去篩選圖片，嘗試攝影照片與情感化插圖兩種方案。
最終根據(jù)選擇的素材圖片，選擇合適風(fēng)格的字體了，簡單裁剪圖片然后基于格式塔原理加上產(chǎn)品的Slogan排版即可。
如下圖所示，左圖產(chǎn)品想營造租房的安全、溫馨氛圍，所以突出“家”的感受，選擇圖片素材則貼合“家”的主體，由于圖片較為復(fù)雜，所以文字的設(shè)計(jì)少即是多，大面積留白突出主體的同時營造高級感；
右圖啟動頁同樣營造“家”的感受，大面積冷色的環(huán)境襯托暖色房子，更加突出家的溫暖，插圖較為簡單所以文字多一些細(xì)節(jié)的設(shè)計(jì)來平衡畫面的復(fù)雜程度。這就是氛圍營造型啟動頁。
< 數(shù)據(jù)為空狀態(tài) >
當(dāng)然上面所講的啟動頁僅僅作為產(chǎn)品流程的開始，每一個頁面的無數(shù)據(jù)與數(shù)據(jù)過多的交互狀態(tài)同樣需要考慮。
無數(shù)據(jù)頁面也就是我們稱之為的“空狀態(tài)”，概念設(shè)計(jì)總是喜歡把一些空狀態(tài)利用插畫的形式來填補(bǔ)，然而空狀態(tài)同樣可以細(xì)分為“系統(tǒng)推薦型”、“操作指引型”、“直接隱藏型”，最后才是“情感表達(dá)型”。
這里就不再攤開去講了，簡單說就是當(dāng)頁面為空時，除了避免用戶看到空頁面產(chǎn)生不好的體驗(yàn)之外，如何讓用戶把這個頁面通過有效信息填補(bǔ)起來才是重中之重。
比如同樣一個租房類產(chǎn)品用戶關(guān)注的房東為空時，可以通過系統(tǒng)推薦優(yōu)質(zhì)房東來填補(bǔ)頁面信息的空缺，也可以為提供清晰的交互指引，帶領(lǐng)用戶將此頁面的信息進(jìn)行填充，這樣既消滅了空頁面，又可以讓用戶產(chǎn)生內(nèi)容，一舉兩得。
當(dāng)然如果當(dāng)前整個頁面為空時，通過精心的圖案設(shè)計(jì)可以避免引起用戶反感，但是當(dāng)一個頁面有很多版塊，其中某一個版塊或者多個版塊為空時，就不需要每一個版塊配以圖案了。
因?yàn)橛脩粼诋?dāng)前頁面還可以瀏覽其他內(nèi)容，并不想被一個空的版塊占據(jù)太多空間，這時直接將這個板塊連帶標(biāo)題直接隱藏掉就可以了，讓用戶感知不到數(shù)據(jù)為空的狀態(tài)。
< 數(shù)據(jù)過多狀態(tài) >
數(shù)據(jù)過多時，概念設(shè)計(jì)同樣需要考慮超出的數(shù)據(jù)需要以怎樣的交互形式來處理，是使用二級頁面來承載，還是使用當(dāng)前頁面收納，再或者十字交互的形式，每一種交互形式都有其特有的意義。
產(chǎn)品經(jīng)理喜歡把頁面所有的內(nèi)容平鋪直敘，而交互設(shè)計(jì)與UI設(shè)計(jì)就需要想到更具創(chuàng)新的展示形式來讓過多的數(shù)據(jù)井然有序。
每一種交互形式都與整個頁面的內(nèi)容重要程度，內(nèi)容數(shù)量，產(chǎn)品側(cè)重點(diǎn)有著緊密聯(lián)系。
二級頁面跳轉(zhuǎn)適用于內(nèi)容較多并且板塊相對獨(dú)立的情況；當(dāng)前頁面展開適用于內(nèi)容屬性單一且內(nèi)容不會過于冗長的信息；十字交互則更適用于推薦板塊或者運(yùn)營活動版塊，版塊相對獨(dú)立而內(nèi)容不會特別多的情況。
再細(xì)化去分析當(dāng)前頁面展開的交互是否需要跟隨“收起”？其實(shí)收起行為更多的是給予用戶體驗(yàn)層面的“可控性”，展開后如果不可收起可能會讓用戶容易產(chǎn)生焦慮的感受，在產(chǎn)品層面或者技術(shù)層面來講，“收起”操作其實(shí)更多的一種無意義行為。
因?yàn)檎归_這種交互行為基本都在多板塊頁面當(dāng)中，之所以進(jìn)行收起是為了讓用戶有針對性的查看某版塊，不至于被不關(guān)注的板塊占據(jù)了太多面積，然而用戶如果進(jìn)行展開操作那么對這一個版塊一定是感興趣的，瀏覽完畢之后繼續(xù)下滑就可以了，收起行為反而顯的多余。
當(dāng)然產(chǎn)品需求、技術(shù)需求與用戶需求到底該如何權(quán)衡，就需要數(shù)據(jù)來印證了。概念設(shè)計(jì)可以嘗試著打破既有的交互形式，但一定要有其原則與理論支撐。
< 待確認(rèn)狀態(tài) >
待確認(rèn)狀態(tài)也是每個產(chǎn)品都基本會有的一個交互狀態(tài)，大部分待確認(rèn)狀態(tài)都是以彈窗的形式出現(xiàn)，彈窗可以細(xì)分為4個種類，每個種類適用于不同的交互場景下，并不是每個彈窗都需要被確認(rèn)。
四個種類分別是“Toast提示框”、“Dialog對話框”、“ Actionbar功能框”與“Snackbar提示對話框”。
Toast提示框是一種非模態(tài)彈窗（模態(tài)彈窗需要打斷用戶操作，非模態(tài)彈窗則不會），它彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變。
例如你發(fā)出了一條短信，App彈出一個Toast提示你消息已發(fā)出。最常見的Toast提示框?yàn)橐痪浜喍痰拿枋鲂晕淖帧?/p>
這種樣式的彈窗可以出現(xiàn)在頁面的任何位置，可設(shè)置成在頁面頂部、中部或者在底部出現(xiàn)（但一般都是出現(xiàn)在頁面的中軸線上），具體的顯示位置根據(jù)頁面的整體設(shè)計(jì)進(jìn)行設(shè)置。
還有一種Toast彈窗由簡單的圖形和簡短的文字組成，顯示位置一般位于頁面正中央。
除此之外一種彈窗的設(shè)計(jì)即引人注目又可以和App的界面協(xié)調(diào)融合，這種展示信息的方式同樣可以稱為Toast彈窗，只是界面交互有所不同。
它一般在內(nèi)容頁頂部向下推動出現(xiàn)，然后向上推動消失。考慮到Toast提示框顯示的時間較短（幾秒種）、占用區(qū)域不大，它容易被用戶忽略，所以Toast不適合承載過多的文字和重要信息。
Dialog對話框是一種模態(tài)彈窗。當(dāng)用戶進(jìn)行敏感操作，或者當(dāng)App內(nèi)部發(fā)生了較為嚴(yán)重性的狀態(tài)改變時，這種操作和改變會帶來影響性比較大的行為結(jié)果，在該結(jié)果發(fā)生前以Dialog對話框的彈窗形式告知用戶，且讓用戶進(jìn)行功能選擇。
例如退出App、進(jìn)行付費(fèi)下載等功能操作。一般情況下Dialog由標(biāo)題、信息內(nèi)容和功能按鈕組成，只有當(dāng)用戶點(diǎn)擊了某個功能按鈕后，彈窗才會消失，App隨即執(zhí)行該功能操作，進(jìn)入相應(yīng)的功能流程。
Dialog的標(biāo)題和信息內(nèi)容的文字描述都要盡可能設(shè)計(jì)得簡潔和無異義，也可以選擇省略標(biāo)題，只保留內(nèi)容描述和功能按鈕。
使用Dialog，功能按鈕最好不要超過兩個，讓用戶選擇“是”或“非”的功能操作，也常被設(shè)計(jì)成只有一個“確認(rèn)”按鈕，目的是讓用戶閱讀內(nèi)容后點(diǎn)擊關(guān)閉彈窗，這種樣式的Dialog，信息內(nèi)容必須非常有必要性，以至于需要打斷用戶的操作，進(jìn)行信息內(nèi)容閱讀確認(rèn)，否則可以使用Toast進(jìn)行非模態(tài)彈窗提示。
Actionbar功能框可以看成是一種Dialog的延伸設(shè)計(jì)，兩者都是模態(tài)彈窗，用戶必須進(jìn)行回應(yīng)，否則彈窗不會消失，用戶無法繼續(xù)其它操作。
Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇，Acionbar一般都設(shè)計(jì)有一個默認(rèn)的“取消”功能按鈕，點(diǎn)擊該按鈕后關(guān)閉彈窗，用戶點(diǎn)擊彈窗以外的區(qū)域時相當(dāng)于進(jìn)行了點(diǎn)擊“取消”功能按鈕的默認(rèn)回應(yīng)。
Actionbar一般被用來向用戶展示多個功能按鈕選擇。如下圖所示，左圖Actionbar的樣式比較常見的是文字列表框，它出現(xiàn)在頁面底部，以簡潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標(biāo)出。
當(dāng)功能按鈕數(shù)量很多的時候，文字列表的形式不適合顯示，此時可以用圖形加文字描述排列的形式來進(jìn)行展示，這種樣式下需要注意彈窗內(nèi)各功能按鈕的UI設(shè)計(jì)和排列布局。
Snackbar提示對話框是安卓系統(tǒng)的特色彈窗之一（安卓平臺在開發(fā)的時候可以直接調(diào)用Snackbar類生成該彈窗，iOS好像也可以進(jìn)行定制化設(shè)計(jì)開發(fā)）。
它也是一種非模態(tài)彈窗，同時擁有Toast和Dialog的特點(diǎn)，不會打斷用戶正常的操作流程，它除了可以告訴用戶信息內(nèi)容，還可以與用戶進(jìn)行對話交互（用戶可以點(diǎn)擊功能按鈕進(jìn)行回應(yīng)）。
一般情況下，Snackbar由信息內(nèi)容加一個功能按鈕組成，用戶點(diǎn)擊了功能按鈕后彈窗消失，App隨即執(zhí)行該操作，進(jìn)入相應(yīng)的功能流程。Snackbar與Toast一樣是有時間限制的，即使用戶不進(jìn)行回應(yīng)，彈窗出現(xiàn)一段時間后也會自動消失。
與Taost相似，Snackbar彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作結(jié)果，另外可以提供一個功能按鈕給用戶選擇使用。
例如當(dāng)用戶刪除了某張圖片，App彈窗會告知用戶圖片刪除成功，并提供一個“撤銷刪除”功能按鈕給用戶進(jìn)行對應(yīng)的功能操作。
Snackbar還可以被設(shè)計(jì)成只有信息內(nèi)容而沒有功能按鈕，這種樣式的Snackbar用戶無法進(jìn)行操作，只能等它自動消失，此時它就相當(dāng)于一種文字描述型的Toast，只是表現(xiàn)形式有所不同。
當(dāng)然，并不是所有的待確認(rèn)狀態(tài)都需要用彈窗的形式來解決，系統(tǒng)站內(nèi)通知或者頁面新增板塊都可以是待確認(rèn)狀態(tài)的處理方式，根據(jù)合適的情況選擇合適的處理方式才是正確的做法。
一個完善且邏輯清晰的交互流程是產(chǎn)品存在的基本價值，用戶從打開產(chǎn)品到最后完成需求需要經(jīng)歷哪些交互過程，看到哪些頁面、
即使是概念設(shè)計(jì)也需要很清晰的知道自己通過這一系列的設(shè)計(jì)有了什么方面的創(chuàng)新，提升了交互效率還是增加了情感化的體驗(yàn)，再或給我們的未來一個憧憬都可以給這個設(shè)計(jì)作品賦予價值。
< 視覺美觀性與容錯性 >
正如之前所講，概念設(shè)計(jì)應(yīng)該是把眼光放在未來，而落地設(shè)計(jì)是把眼光放在當(dāng)下，所以概念設(shè)計(jì)可以把用戶想的聰明一些，把目標(biāo)用戶對互聯(lián)網(wǎng)產(chǎn)品的認(rèn)知定義為N年以后，落地設(shè)計(jì)則需要盡可能的把產(chǎn)品做到易理解，降低用戶的誤操作幾率。
即使如此也需要有一個尺度來衡量，并不是概念設(shè)計(jì)就可以忽略容錯性。
那么視覺美觀性與容錯性有什么必然的聯(lián)系呢？大家應(yīng)該了解，交互設(shè)計(jì)不僅局限于頁面的邏輯跳轉(zhuǎn)，其實(shí)可以細(xì)分為三個方面，即表現(xiàn)方式、操作方式于反饋方式。
表現(xiàn)方式設(shè)計(jì)的目的就是讓用戶使用產(chǎn)品時做到操作前可以預(yù)知，比如很多金融類財(cái)經(jīng)類產(chǎn)品會讓用戶對于產(chǎn)品的每一個元素做到操作前可預(yù)知，這樣就會讓視覺的美觀度下降很多。
而娛樂類產(chǎn)品對于容錯性要求較低，表現(xiàn)方式就可以含蓄一些，視覺的可塑性強(qiáng)隨之美觀度也會較高。所以視覺美觀性與容錯性是有“守恒定律”的，容錯性做到一定階段，一定是會損失部分美觀度的。
容錯性是產(chǎn)品對錯誤操作的承載性能，即一個產(chǎn)品操作時出現(xiàn)錯誤的概率和錯誤出現(xiàn)后得到解決的概率和效率。
容錯性最初應(yīng)用于計(jì)算機(jī)領(lǐng)域，它的存在能保證系統(tǒng)在故障存在的情況下不失效，仍然正常工作。產(chǎn)品容錯性設(shè)計(jì)能使產(chǎn)品與人的交流或人與人借助產(chǎn)品的交流更加流暢。
說起容錯性，設(shè)計(jì)者最基本要考慮到當(dāng)產(chǎn)品本身出錯而非用戶誤操作時，產(chǎn)品要有清晰的處理方式。比如當(dāng)用戶所處環(huán)境網(wǎng)絡(luò)環(huán)境較差時，也是就是弱網(wǎng)狀態(tài)下應(yīng)該如何去處理。
常規(guī)的處理方式是首先給予用戶明確的交互反饋，告訴用戶當(dāng)前頁面已經(jīng)在加載，如果當(dāng)前頁面加載了15秒還沒有加載完成則可以給予用戶Toast提示框，提醒用戶當(dāng)前網(wǎng)絡(luò)情況可能不太好。
如果加載30秒之后仍然加載不出來，就可以終止加載，不再浪費(fèi)用戶的時間了。這是容錯性最基本要考慮到的，無論是概念設(shè)計(jì)還是落地設(shè)計(jì)。
當(dāng)然對于用戶主觀的誤操作來講，容錯性可以體現(xiàn) “限制用戶錯誤的選擇項(xiàng)”、“恢復(fù)現(xiàn)場的能力”、“協(xié)助用戶記憶”等幾個方面。
作為設(shè)計(jì)師來說，設(shè)計(jì)產(chǎn)品時就要盡量主觀地把那些錯誤的操作避免，例如在買車票選擇日期時，把昨天或者更早的日期直接不顯示，或者在輸入表單信息時，文字長度不夠或者過長時，會出現(xiàn)一些無法進(jìn)行下一步的提示按鈕。
如圖所示，“微信”在限制用戶誤操作方面就做得比較好，左圖用戶在發(fā)送語音時如果錄音時間過短，會出現(xiàn)不可發(fā)送的Toast提示框；右圖微信在發(fā)布朋友圈時，如果沒有輸入信息，則右上角的發(fā)布按鈕不可點(diǎn)擊，不給用戶誤操作的機(jī)會。
講到“恢復(fù)現(xiàn)場的能力”或許很多小伙伴會有共鳴，在使用設(shè)計(jì)軟件時，打開的文件過多、文件過大或超出系統(tǒng)承受能力時經(jīng)常會出現(xiàn)卡死或者閃退的情況，當(dāng)發(fā)生這種情況時用戶是很容易產(chǎn)生負(fù)面情緒的。
放在移動端來說，有時候用戶在瀏覽很長的文章或者信息很多的列表時，經(jīng)常會不小心點(diǎn)擊到另一個推薦的頁面，如果返回的話，很多App是直接返回到上一個頁面的原始狀態(tài)，但此時用戶更多的是想回到剛才閱讀到的位置。
例如我們在閱讀“微信”公眾號的文章時返回到信息頁面，再回到文章頁，是記錄了剛才閱讀的位置，而不是從頭開始，這種體驗(yàn)可以大大增強(qiáng)用戶對產(chǎn)品的好感。
當(dāng)然，類似的例子還有很多，很多情況都是舉一反三。如圖下圖所示，左圖是“美團(tuán)外賣”，在使用外賣產(chǎn)品訂外賣時，我們經(jīng)常會點(diǎn)到一半想再去看看別家，這時用戶在返回前一頁后系統(tǒng)會記錄這家餐廳所選的商品，再次進(jìn)入就不需要重復(fù)選餐了；
右圖中“字里行間”這種文字內(nèi)容類的產(chǎn)品作者用戶經(jīng)常需要碼很長的字，如果這個時候誤點(diǎn)擊了“返回”或者手機(jī)自動關(guān)機(jī)，產(chǎn)品就需要幫助用戶去恢復(fù)現(xiàn)場，這也是產(chǎn)品可用性的一種體現(xiàn)。
“協(xié)助用戶記憶”這個方法就很容易理解了，在用戶使用淘寶購買物品，或者使用其他產(chǎn)品發(fā)起訂單，付款時用戶肯定不希望自己用大腦再回憶一遍剛才買了些什么，這就需要在付款頁把剛才所購買的東西羅列出來讓用戶再確認(rèn)一遍。
如果用戶有多買或者少買了什么東西，這個體驗(yàn)是非常不容易接受的。如下圖所示，左圖“淘寶”在提交訂單付款前會讓用戶再把購物車內(nèi)的商品確認(rèn)一遍；右圖“餓了么”也是同理。
上面所舉例的是最基礎(chǔ)要注意的容錯性設(shè)計(jì)，對于一些落地設(shè)計(jì)來講，還有很多地方需要去迎合用戶習(xí)慣，降低用戶的學(xué)習(xí)成本。
但是概念設(shè)計(jì)則可以多在交互手勢上面增加一些創(chuàng)新，逐漸培養(yǎng)用戶習(xí)慣更簡單高效的交互形式，這就是視覺美觀性與容錯性方向的差異體現(xiàn)。
< 真實(shí)信息體現(xiàn)，避免重復(fù)信息 >
信息重復(fù)且無規(guī)則是設(shè)計(jì)者在概念設(shè)計(jì)階段最容易犯的錯誤，除了視覺上不美觀之外，其實(shí)就算是文本信息的排列其中同樣有很多要注意的細(xì)節(jié)，忽略這些細(xì)節(jié)會讓頁面的邏輯出現(xiàn)問題。
比如僅僅文本的適配規(guī)則就可以分為四種，即“換行”、“超出省略”、“縮字號”、“限定字符”。
換行的處理方式適用于多行幾率較高的文本信息，并且對于當(dāng)前頁面的信息展示較為重要時。還有一種情況就是當(dāng)前頁面無二級頁面時，必須通過換行的方式來顯示全部。
比如微信朋友圈這種形式，沒有必要單開一個二級頁面，并且文本多行幾率非常高，就適用于換行的處理方式，當(dāng)然微信的規(guī)則是當(dāng)文字超過一定長度后會單開一個二級頁面進(jìn)行承載。
超出省略的處理方式需要當(dāng)前省略的信息有二級頁面，并且二級頁面點(diǎn)擊頻率較高，或者當(dāng)前需要省略的內(nèi)容非重要信息。
比如每日優(yōu)鮮這類產(chǎn)品，圖片為重要信息，文字為輔助信息，并且二級頁面的點(diǎn)擊頻率較高，所以商品標(biāo)題就可以采用超出省略的顯示方式。
縮字號的使用場景相對較少，基本上只適用于文本超出一行的幾率不大，但偶爾會出現(xiàn)時，或當(dāng)前文本沒有二級頁面或者信息內(nèi)容對于當(dāng)前頁面較為重要。
縮字號的處理方式有個缺點(diǎn)就是可能會導(dǎo)致兩行文字大小不一致，比如由于一行文本超出顯示范圍而自動縮字號，而另一沒有超出時，視覺上就會較為不統(tǒng)一。
比如京東品類區(qū)的這些活動入口，標(biāo)題下方的描述文字超出顯示區(qū)域時就可以使用縮字號的形式來體現(xiàn)。
防止文本適配出現(xiàn)問題最根本也是最方便的處理方式就是從后臺錄入信息的字符數(shù)量上解決，當(dāng)然偏向于UGC的產(chǎn)品可以從前端用戶輸入信息時就設(shè)定明確的字符數(shù)量。
當(dāng)然這種處理方式需要很明確的預(yù)估最大字符數(shù)量，如果預(yù)估的最大字符數(shù)量滿足不了大部分用戶，那么體驗(yàn)也會是極差的。
比如UC頭條這種PGC內(nèi)容類產(chǎn)品，后臺直接限制新聞標(biāo)題的文本數(shù)量可以從根本上解決文本的顯示問題。
當(dāng)然文本的真實(shí)數(shù)量顯示只是一小部分，圖片相比來講需要考慮的規(guī)則更多，一張圖時該如何顯示，兩張圖該如何顯示，最大可以顯示幾張等等，這些都需要設(shè)計(jì)者在做設(shè)計(jì)時有一個很明確的顯示規(guī)則。
< 配圖貼合主題且規(guī)則明確 >
無論是落地設(shè)計(jì)還是概念設(shè)計(jì)都離不開配圖，尤其一些圖片為主的產(chǎn)品其配圖同樣是需要精心挑選的，因?yàn)榕鋱D的質(zhì)量可以直接影響整個產(chǎn)品的格調(diào)。
關(guān)于配圖的選擇是否合適，這里我給出4個評測的標(biāo)準(zhǔn)供大家參考，即“色調(diào)”、“清晰度”、“復(fù)雜程度”、“角度深淺”。
色調(diào)指的是圖片冷暖傾向與產(chǎn)品主色是否符合，當(dāng)然不一定所有的圖片都需要與產(chǎn)品主色一致，最起碼百分之80的圖片色調(diào)都要符合產(chǎn)品的色調(diào)，其中百分之20可以起到點(diǎn)綴頁面，平衡畫面的作用，不至于讓頁面的色調(diào)太過極端化；
清晰度就不再多做贅述了，選圖一定要高清，模糊的圖片本身就很難給產(chǎn)品賦予品質(zhì)感；
復(fù)雜程度則代表了圖片中元素的復(fù)雜程度，一般選圖不宜過于復(fù)雜，因?yàn)殚L時間的瀏覽復(fù)雜圖片會讓用戶過早的出現(xiàn)視覺疲勞感；
最后是角度深淺，除了圖片的拍攝角度要盡量一致以外，圖片的景深也盡量一致，特寫的圖片的話就盡量都是特寫，遠(yuǎn)景的話就盡量都是遠(yuǎn)景。
遵循以上4個選圖技巧會讓頁面整體更統(tǒng)一和諧，產(chǎn)品品質(zhì)感更高。
以一個家居電商類產(chǎn)品的首頁為例，主色為黃色，產(chǎn)品風(fēng)格的關(guān)鍵詞為“極簡、清新、安靜、溫暖?！?/p>
打開站酷海洛，根據(jù)圖片的關(guān)鍵詞搜索，結(jié)合產(chǎn)品的格調(diào)篩選，最后將挑選的圖片以選圖四大原則進(jìn)行衡量，確保色調(diào)統(tǒng)一、圖片高清，復(fù)雜程度統(tǒng)一，角度深淺統(tǒng)一，最終效果如下圖。
除了基于選圖四大原則之外，又根據(jù)板塊的相似性原則，相同板塊的圖片角度保持一致，不同板塊的角度加以對比防止頁面視覺單調(diào)，圖片迎合產(chǎn)品主色檸檬黃，頭圖加以對比色給頁面增加活力氣息。
< 考慮多種狀態(tài) >
靜態(tài)頁面同樣需要展示出界面的交互情況，比如同一個頁面中可以顯示3個列表，其中1個列表就可以顯示點(diǎn)贊后的形態(tài)，或者說當(dāng)前的列表可以左滑刪除，那么就需要將左滑后的頁面進(jìn)行展示。
將頁面中所有的細(xì)節(jié)交互展示出來可以給頁面增加生命力。不要將頁面設(shè)計(jì)成為起始狀態(tài)，而應(yīng)該是有用戶正在使用的狀態(tài)。
比如下圖，頁面正在篩選與正在加載的狀態(tài)都盡量考慮到并且展示出來，也可以讓概念設(shè)計(jì)更具細(xì)節(jié)與思考。
概念設(shè)計(jì)與落地設(shè)計(jì)在很多方面都是互補(bǔ)的，比如概念設(shè)計(jì)不能完全概念，同樣需要考慮交互邏輯是否合理，顯示規(guī)則是否合適，只是交互形式與表現(xiàn)形式可以嘗試打破規(guī)則的創(chuàng)新。
交互形式與表現(xiàn)形式相比來講就是感性的，交互邏輯與顯示規(guī)則就是理性的，與落地設(shè)計(jì)的區(qū)別就在于感性與理性的比例問題。
概念設(shè)計(jì)的感性層面可能占到70%，而落地設(shè)計(jì)的感性層面可能只會占到30%。
正如標(biāo)題所講，設(shè)計(jì)應(yīng)該是先感性的放飛，然后理性的收回。不要拿自己上限去拼別人的下限，概念設(shè)計(jì)可以極大的鍛煉設(shè)計(jì)者的思維方式，未來一定是設(shè)計(jì)驅(qū)動技術(shù)，技術(shù)改變世界。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
