互聯(lián)網(wǎng)大環(huán)境的“紛爭(zhēng)”導(dǎo)致無論是產(chǎn)品設(shè)計(jì)還是UI設(shè)計(jì)都很難有時(shí)間去在用戶體驗(yàn)層面思考創(chuàng)新，功能迭代型需求占據(jù)了絕大部分時(shí)間，諸多互聯(lián)網(wǎng)企業(yè)從單月發(fā)版壓縮到雙周迭代發(fā)版，甚至到如今的單周發(fā)版…毫無存在感的反復(fù)型工作讓UI設(shè)計(jì)師一時(shí)很難找到自身的價(jià)值所在。

隨著一些互聯(lián)網(wǎng)企業(yè)巨頭逐漸趨于成熟，在未來UI設(shè)計(jì)師在團(tuán)隊(duì)中的角色地位會(huì)越來越高。

馬斯洛需求層次理論將人的需求分為5個(gè)等級(jí)，即生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求，將這個(gè)理論移至企業(yè)角度其實(shí)同樣適用，一個(gè)企業(yè)的發(fā)展同樣可以理解為這5個(gè)過程，以共享出行類互聯(lián)網(wǎng)企業(yè)為例：

生理需求可以理解為企業(yè)資金鏈正常運(yùn)轉(zhuǎn)；安全需求則是共享設(shè)備不會(huì)被惡意破壞；社交需求是與其他知名企業(yè)達(dá)成合作；尊重需求是擁有較好的企業(yè)口碑；到了自我實(shí)現(xiàn)需求才是科技與用戶體驗(yàn)的創(chuàng)新。

這些需求是自下而上的，所以UI設(shè)計(jì)師應(yīng)該著眼于未來，這也是概念設(shè)計(jì)的價(jià)值所在。

< UI設(shè)計(jì)師健康可持續(xù)的成長之路 >

移動(dòng)互聯(lián)網(wǎng)發(fā)展初期，元素繪制能力是拉開初高級(jí)UI設(shè)計(jì)師差異的主要因素，而隨著設(shè)計(jì)語言扁平化時(shí)代的到來，設(shè)計(jì)者之間的差異化變的不再那么清晰，甚至純視覺、插畫師與用戶體驗(yàn)設(shè)計(jì)混為一談，大批設(shè)計(jì)者找尋不到了方向…

隨著移動(dòng)互聯(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ì)的核心價(jià)值所在。

設(shè)計(jì)者格局變得更廣并不代表基礎(chǔ)能力可以被忽略，對(duì)于入門設(shè)計(jì)者來講，起點(diǎn)仍然是在技法層面。

這里我以未來一線企業(yè)UI設(shè)計(jì)師能力模型為導(dǎo)向，規(guī)劃出一條UI設(shè)計(jì)師健康可持續(xù)的成長之路，即“熟悉軟件技法”、“拔高視覺上限”、“理性設(shè)計(jì)思維”、“歸納個(gè)人方法論”四個(gè)階段。

而今天所要講的概念設(shè)計(jì)，就在第二個(gè)階段：拔高視覺上限。

我一直認(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ì)作品在未來可以解決什么問題，即使可以讓未來的用戶頁面更美觀有趣也算是一個(gè)愿景。

設(shè)計(jì)愿景就像作品的靈魂，有靈魂的設(shè)計(jì)才不會(huì)徒有其表。

這篇文章就以概念設(shè)計(jì)與落地設(shè)計(jì)互為參照，講解這兩種設(shè)計(jì)行為該如何去思考，如何賦予其真實(shí)的意義。

< 未來可能性與實(shí)用規(guī)范性 >

在設(shè)計(jì)著手之前，從思維的角度上就要明確區(qū)分出這兩種設(shè)計(jì)的差異，概念設(shè)計(jì)所對(duì)應(yīng)的思維角度應(yīng)該是“未來可能性”，更多的展現(xiàn)出設(shè)計(jì)者對(duì)于未來交互與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ì)一兩個(gè)頁面，沒有完整的交互流程，這種設(shè)計(jì)很難賦予其價(jià)值，因?yàn)槲覀冊(cè)O(shè)計(jì)的每一個(gè)頁面都是做為某個(gè)交互流程間的其中一個(gè)頁面。

UI設(shè)計(jì)不像平面設(shè)計(jì)，UI設(shè)計(jì)本就與交互設(shè)計(jì)掛鉤，單個(gè)靜態(tài)的頁面只能算是界面板式的練習(xí)，很難再賦予其它意義。

一款常規(guī)的互聯(lián)網(wǎng)產(chǎn)品應(yīng)該具有以下9大交互狀態(tài)，即“等待”、“開始”、“空”、“有數(shù)據(jù)”“數(shù)據(jù)過多”、“錯(cuò)誤”、“待確認(rèn)”、“中斷”、“結(jié)束”。

這9個(gè)交互狀態(tài)并不一定在每個(gè)產(chǎn)品中都會(huì)出現(xiàn)，但一個(gè)完整的交互流程即使對(duì)于概念設(shè)計(jì)也是非常有必要的，從打開APP的等待方式，到解決需求后的結(jié)束狀態(tài)，概念設(shè)計(jì)應(yīng)該是對(duì)于整個(gè)產(chǎn)品的思考，下面我主要講解一些概念設(shè)計(jì)中容易忽略的狀態(tài)。

< 等待狀態(tài) >

比如用戶體驗(yàn)該產(chǎn)品的第一步是從等待開始，啟動(dòng)頁做為等待時(shí)的過度頁面，看似簡(jiǎn)單，其實(shí)同樣有很多地方需要思考，從用戶體驗(yàn)的角度考慮，產(chǎn)品應(yīng)當(dāng)盡可能快地讓用戶進(jìn)入程序并進(jìn)行功能操作，如此看來，啟動(dòng)畫面的存在就是多余。

但是，應(yīng)用程序本質(zhì)上是由多種代碼命令和數(shù)據(jù)組合而成的。啟動(dòng)應(yīng)用程序的過程實(shí)質(zhì)上是運(yùn)行代碼和數(shù)據(jù)讀取的過程，而這個(gè)過程是需要一定的時(shí)間。

與其給用戶看代碼運(yùn)行的過程，不如給用戶展示一張好看的圖片或者一段有意思的動(dòng)畫，從這個(gè)出發(fā)點(diǎn)來講，是優(yōu)化了用戶體驗(yàn)。

用戶啟動(dòng)應(yīng)用程序的場(chǎng)景，一定是需要用到產(chǎn)品的某項(xiàng)功能。也就是說，用戶啟動(dòng)應(yīng)用程序的目的是希望立即體驗(yàn)程序并完成某項(xiàng)任務(wù)，而非欣賞你喜歡的啟動(dòng)畫面。

所以，啟動(dòng)畫面應(yīng)當(dāng)更有意義，要能為用戶體驗(yàn)做出貢獻(xiàn)，要能充當(dāng)產(chǎn)品和用戶之間產(chǎn)生互動(dòng)的橋梁。如今啟動(dòng)頁大致可以分為三種，即“品牌傳遞型”、“快速啟動(dòng)型”、“氛圍營造型”。

品牌傳遞型啟動(dòng)頁在國內(nèi)最為常見，通常包括產(chǎn)品啟動(dòng)圖標(biāo)、產(chǎn)品名稱及Slogan三要素，部分還會(huì)展示應(yīng)用的開發(fā)者、版本號(hào)等。

這種啟動(dòng)頁最常見的有兩種表現(xiàn)形式，一種是是將啟動(dòng)圖標(biāo)、產(chǎn)品名稱和Slogan相對(duì)于整個(gè)頁面居中放置，第二種表現(xiàn)形式是統(tǒng)一放置在頁面的最下方，然后將上方留白。

看似僅僅元素放置的差異，其實(shí)有很多地方值得深挖。

右圖元素置底處理方式的好處是拓展性較高，如果需要在啟動(dòng)頁面植入廣告時(shí)，品牌信息的位置可以不變，只需在品牌信息上方的空白區(qū)域植入廣告即可，以透明度漸現(xiàn)的方式可以做到啟動(dòng)頁與廣告頁面無縫銜接。

微博、知乎、淘票票等很多產(chǎn)品都是使用了這種設(shè)計(jì)方法。

第二種快速啟動(dòng)型遵循iOS建議，盡量讓用戶不去感知頁面的存在，并“無縫”銜接到應(yīng)用當(dāng)中，通常是把首頁加載狀態(tài)圖作為啟動(dòng)頁面。

不過，這種設(shè)計(jì)由于具有局限性，國內(nèi)的App界面使用這種方式的非常少。如果有App想采用此類啟動(dòng)頁面，有兩個(gè)點(diǎn)需要評(píng)估：

(1)評(píng)估好App自身的體量，保證啟動(dòng)的流暢性和快捷性。體量較大的App不適合使用此種方式，因?yàn)檩^大體量的軟件啟動(dòng)也會(huì)較慢，就會(huì)讓用戶有種“網(wǎng)絡(luò)不佳”的體驗(yàn)，把App運(yùn)行的時(shí)間誤以為是網(wǎng)絡(luò)延遲；

(2)評(píng)估首頁版塊的固定性，一般這時(shí)候不允許首頁版塊有太大的變動(dòng)，不然啟動(dòng)頁過渡到首頁后會(huì)在視覺上有較大反差，體驗(yàn)也會(huì)較差。比如iOS系統(tǒng)內(nèi)置的瀏覽器Safari，由于其體量較小，首頁版塊也相對(duì)較為固定，左圖啟動(dòng)頁面就使用了首頁加載中的狀態(tài)，右圖為App首頁。

很多App為了引起用戶的情感共鳴也會(huì)使用氛圍營造型啟動(dòng)頁，這種啟動(dòng)頁的目的是將產(chǎn)品格調(diào)從用戶打開產(chǎn)品第一眼就傳遞給用戶。

這種啟動(dòng)頁多以插圖的形式體現(xiàn)，可以是插畫也可以是攝影照片，素材圖片合適與否是這種啟動(dòng)頁面的核心。

微信自誕生以來就基本沒有更換過啟動(dòng)頁，最熟悉的就是那一個(gè)遠(yuǎn)望著地球的小人，那么長時(shí)間以來，一直都是那一個(gè)小人，沒有伙伴。

這其實(shí)是和當(dāng)初張小龍發(fā)布微信時(shí)的初衷相聯(lián)系的：每個(gè)人來到這個(gè)世界上都是孤獨(dú)的存在，都在眺望著那一個(gè)繁華美麗的、自己迫切渴望進(jìn)入的地球，沒有人在自己的身邊，微信就是那一個(gè)聯(lián)系的渠道。

比如我們現(xiàn)在需要給一個(gè)租房類產(chǎn)品設(shè)計(jì)一個(gè)氛圍營造型啟動(dòng)頁，首先就要去思考產(chǎn)品格調(diào)的關(guān)鍵詞。

比如我們使用圖片做為主體，根據(jù)上述關(guān)鍵詞去篩選圖片，嘗試攝影照片與情感化插圖兩種方案。

最終根據(jù)選擇的素材圖片，選擇合適風(fēng)格的字體了，簡(jiǎn)單裁剪圖片然后基于格式塔原理加上產(chǎn)品的Slogan排版即可。

如下圖所示，左圖產(chǎn)品想營造租房的安全、溫馨氛圍，所以突出“家”的感受，選擇圖片素材則貼合“家”的主體，由于圖片較為復(fù)雜，所以文字的設(shè)計(jì)少即是多，大面積留白突出主體的同時(shí)營造高級(jí)感；

右圖啟動(dòng)頁同樣營造“家”的感受，大面積冷色的環(huán)境襯托暖色房子，更加突出家的溫暖，插圖較為簡(jiǎn)單所以文字多一些細(xì)節(jié)的設(shè)計(jì)來平衡畫面的復(fù)雜程度。這就是氛圍營造型啟動(dòng)頁。

< 數(shù)據(jù)為空狀態(tài) >

當(dāng)然上面所講的啟動(dòng)頁僅僅作為產(chǎn)品流程的開始，每一個(gè)頁面的無數(shù)據(jù)與數(shù)據(jù)過多的交互狀態(tài)同樣需要考慮。

無數(shù)據(jù)頁面也就是我們稱之為的“空狀態(tài)”，概念設(shè)計(jì)總是喜歡把一些空狀態(tài)利用插畫的形式來填補(bǔ)，然而空狀態(tài)同樣可以細(xì)分為“系統(tǒng)推薦型”、“操作指引型”、“直接隱藏型”，最后才是“情感表達(dá)型”。

這里就不再攤開去講了，簡(jiǎn)單說就是當(dāng)頁面為空時(shí)，除了避免用戶看到空頁面產(chǎn)生不好的體驗(yàn)之外，如何讓用戶把這個(gè)頁面通過有效信息填補(bǔ)起來才是重中之重。

比如同樣一個(gè)租房類產(chǎn)品用戶關(guān)注的房東為空時(shí)，可以通過系統(tǒng)推薦優(yōu)質(zhì)房東來填補(bǔ)頁面信息的空缺，也可以為提供清晰的交互指引，帶領(lǐng)用戶將此頁面的信息進(jìn)行填充，這樣既消滅了空頁面，又可以讓用戶產(chǎn)生內(nèi)容，一舉兩得。

當(dāng)然如果當(dāng)前整個(gè)頁面為空時(shí)，通過精心的圖案設(shè)計(jì)可以避免引起用戶反感，但是當(dāng)一個(gè)頁面有很多版塊，其中某一個(gè)版塊或者多個(gè)版塊為空時(shí)，就不需要每一個(gè)版塊配以圖案了。

因?yàn)橛脩粼诋?dāng)前頁面還可以瀏覽其他內(nèi)容，并不想被一個(gè)空的版塊占據(jù)太多空間，這時(shí)直接將這個(gè)板塊連帶標(biāo)題直接隱藏掉就可以了，讓用戶感知不到數(shù)據(jù)為空的狀態(tài)。

< 數(shù)據(jù)過多狀態(tài) >

數(shù)據(jù)過多時(shí)，概念設(shè)計(jì)同樣需要考慮超出的數(shù)據(jù)需要以怎樣的交互形式來處理，是使用二級(jí)頁面來承載，還是使用當(dāng)前頁面收納，再或者十字交互的形式，每一種交互形式都有其特有的意義。

產(chǎn)品經(jīng)理喜歡把頁面所有的內(nèi)容平鋪直敘，而交互設(shè)計(jì)與UI設(shè)計(jì)就需要想到更具創(chuàng)新的展示形式來讓過多的數(shù)據(jù)井然有序。

每一種交互形式都與整個(gè)頁面的內(nèi)容重要程度，內(nèi)容數(shù)量，產(chǎn)品側(cè)重點(diǎn)有著緊密聯(lián)系。

二級(jí)頁面跳轉(zhuǎn)適用于內(nèi)容較多并且板塊相對(duì)獨(dú)立的情況；當(dāng)前頁面展開適用于內(nèi)容屬性單一且內(nèi)容不會(huì)過于冗長的信息；十字交互則更適用于推薦板塊或者運(yùn)營活動(dòng)版塊，版塊相對(duì)獨(dú)立而內(nèi)容不會(huì)特別多的情況。

再細(xì)化去分析當(dāng)前頁面展開的交互是否需要跟隨“收起”？其實(shí)收起行為更多的是給予用戶體驗(yàn)層面的“可控性”，展開后如果不可收起可能會(huì)讓用戶容易產(chǎn)生焦慮的感受，在產(chǎn)品層面或者技術(shù)層面來講，“收起”操作其實(shí)更多的一種無意義行為。

因?yàn)檎归_這種交互行為基本都在多板塊頁面當(dāng)中，之所以進(jìn)行收起是為了讓用戶有針對(duì)性的查看某版塊，不至于被不關(guān)注的板塊占據(jù)了太多面積，然而用戶如果進(jìn)行展開操作那么對(duì)這一個(gè)版塊一定是感興趣的，瀏覽完畢之后繼續(xù)下滑就可以了，收起行為反而顯的多余。

當(dāng)然產(chǎn)品需求、技術(shù)需求與用戶需求到底該如何權(quán)衡，就需要數(shù)據(jù)來印證了。概念設(shè)計(jì)可以嘗試著打破既有的交互形式，但一定要有其原則與理論支撐。

< 待確認(rèn)狀態(tài) >

待確認(rèn)狀態(tài)也是每個(gè)產(chǎn)品都基本會(huì)有的一個(gè)交互狀態(tài)，大部分待確認(rèn)狀態(tài)都是以彈窗的形式出現(xiàn)，彈窗可以細(xì)分為4個(gè)種類，每個(gè)種類適用于不同的交互場(chǎng)景下，并不是每個(gè)彈窗都需要被確認(rèn)。

四個(gè)種類分別是“Toast提示框”、“Dialog對(duì)話框”、“ Actionbar功能框”與“Snackbar提示對(duì)話框”。

Toast提示框是一種非模態(tài)彈窗（模態(tài)彈窗需要打斷用戶操作，非模態(tài)彈窗則不會(huì)），它彈出一個(gè)小信息，作為提醒或消息反饋來用，一般用來顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變。

例如你發(fā)出了一條短信，App彈出一個(gè)Toast提示你消息已發(fā)出。最常見的Toast提示框?yàn)橐痪浜?jiǎn)短的描述性文字。

這種樣式的彈窗可以出現(xiàn)在頁面的任何位置，可設(shè)置成在頁面頂部、中部或者在底部出現(xiàn)（但一般都是出現(xiàn)在頁面的中軸線上），具體的顯示位置根據(jù)頁面的整體設(shè)計(jì)進(jìn)行設(shè)置。

還有一種Toast彈窗由簡(jiǎn)單的圖形和簡(jiǎn)短的文字組成，顯示位置一般位于頁面正中央。

除此之外一種彈窗的設(shè)計(jì)即引人注目又可以和App的界面協(xié)調(diào)融合，這種展示信息的方式同樣可以稱為Toast彈窗，只是界面交互有所不同。

它一般在內(nèi)容頁頂部向下推動(dòng)出現(xiàn)，然后向上推動(dòng)消失?？紤]到Toast提示框顯示的時(shí)間較短（幾秒種）、占用區(qū)域不大，它容易被用戶忽略，所以Toast不適合承載過多的文字和重要信息。

Dialog對(duì)話框是一種模態(tài)彈窗。當(dāng)用戶進(jìn)行敏感操作，或者當(dāng)App內(nèi)部發(fā)生了較為嚴(yán)重性的狀態(tài)改變時(shí)，這種操作和改變會(huì)帶來影響性比較大的行為結(jié)果，在該結(jié)果發(fā)生前以Dialog對(duì)話框的彈窗形式告知用戶，且讓用戶進(jìn)行功能選擇。

例如退出App、進(jìn)行付費(fèi)下載等功能操作。一般情況下Dialog由標(biāo)題、信息內(nèi)容和功能按鈕組成，只有當(dāng)用戶點(diǎn)擊了某個(gè)功能按鈕后，彈窗才會(huì)消失，App隨即執(zhí)行該功能操作，進(jìn)入相應(yīng)的功能流程。

Dialog的標(biāo)題和信息內(nèi)容的文字描述都要盡可能設(shè)計(jì)得簡(jiǎn)潔和無異義，也可以選擇省略標(biāo)題，只保留內(nèi)容描述和功能按鈕。

使用Dialog，功能按鈕最好不要超過兩個(gè)，讓用戶選擇“是”或“非”的功能操作，也常被設(shè)計(jì)成只有一個(gè)“確認(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)，否則彈窗不會(huì)消失，用戶無法繼續(xù)其它操作。

Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇，Acionbar一般都設(shè)計(jì)有一個(gè)默認(rèn)的“取消”功能按鈕，點(diǎn)擊該按鈕后關(guān)閉彈窗，用戶點(diǎn)擊彈窗以外的區(qū)域時(shí)相當(dāng)于進(jìn)行了點(diǎn)擊“取消”功能按鈕的默認(rèn)回應(yīng)。

Actionbar一般被用來向用戶展示多個(gè)功能按鈕選擇。如下圖所示，左圖Actionbar的樣式比較常見的是文字列表框，它出現(xiàn)在頁面底部，以簡(jiǎn)潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標(biāo)出。

當(dāng)功能按鈕數(shù)量很多的時(shí)候，文字列表的形式不適合顯示，此時(shí)可以用圖形加文字描述排列的形式來進(jìn)行展示，這種樣式下需要注意彈窗內(nèi)各功能按鈕的UI設(shè)計(jì)和排列布局。

Snackbar提示對(duì)話框是安卓系統(tǒng)的特色彈窗之一（安卓平臺(tái)在開發(fā)的時(shí)候可以直接調(diào)用Snackbar類生成該彈窗，iOS好像也可以進(jìn)行定制化設(shè)計(jì)開發(fā)）。

它也是一種非模態(tài)彈窗，同時(shí)擁有Toast和Dialog的特點(diǎn)，不會(huì)打斷用戶正常的操作流程，它除了可以告訴用戶信息內(nèi)容，還可以與用戶進(jìn)行對(duì)話交互（用戶可以點(diǎn)擊功能按鈕進(jìn)行回應(yīng)）。

一般情況下，Snackbar由信息內(nèi)容加一個(gè)功能按鈕組成，用戶點(diǎn)擊了功能按鈕后彈窗消失，App隨即執(zhí)行該操作，進(jìn)入相應(yīng)的功能流程。Snackbar與Toast一樣是有時(shí)間限制的，即使用戶不進(jìn)行回應(yīng)，彈窗出現(xiàn)一段時(shí)間后也會(huì)自動(dòng)消失。

與Taost相似，Snackbar彈出一個(gè)小信息，作為提醒或消息反饋來用，一般用來顯示操作結(jié)果，另外可以提供一個(gè)功能按鈕給用戶選擇使用。

例如當(dāng)用戶刪除了某張圖片，App彈窗會(huì)告知用戶圖片刪除成功，并提供一個(gè)“撤銷刪除”功能按鈕給用戶進(jìn)行對(duì)應(yīng)的功能操作。

Snackbar還可以被設(shè)計(jì)成只有信息內(nèi)容而沒有功能按鈕，這種樣式的Snackbar用戶無法進(jìn)行操作，只能等它自動(dòng)消失，此時(shí)它就相當(dāng)于一種文字描述型的Toast，只是表現(xiàn)形式有所不同。

當(dāng)然，并不是所有的待確認(rèn)狀態(tài)都需要用彈窗的形式來解決，系統(tǒng)站內(nèi)通知或者頁面新增板塊都可以是待確認(rèn)狀態(tài)的處理方式，根據(jù)合適的情況選擇合適的處理方式才是正確的做法。

一個(gè)完善且邏輯清晰的交互流程是產(chǎn)品存在的基本價(jià)值，用戶從打開產(chǎn)品到最后完成需求需要經(jīng)歷哪些交互過程，看到哪些頁面、

即使是概念設(shè)計(jì)也需要很清晰的知道自己通過這一系列的設(shè)計(jì)有了什么方面的創(chuàng)新，提升了交互效率還是增加了情感化的體驗(yàn)，再或給我們的未來一個(gè)憧憬都可以給這個(gè)設(shè)計(jì)作品賦予價(jià)值。

< 視覺美觀性與容錯(cuò)性 >

正如之前所講，概念設(shè)計(jì)應(yīng)該是把眼光放在未來，而落地設(shè)計(jì)是把眼光放在當(dāng)下，所以概念設(shè)計(jì)可以把用戶想的聰明一些，把目標(biāo)用戶對(duì)互聯(lián)網(wǎng)產(chǎn)品的認(rèn)知定義為N年以后，落地設(shè)計(jì)則需要盡可能的把產(chǎn)品做到易理解，降低用戶的誤操作幾率。

即使如此也需要有一個(gè)尺度來衡量，并不是概念設(shè)計(jì)就可以忽略容錯(cuò)性。

那么視覺美觀性與容錯(cuò)性有什么必然的聯(lián)系呢？大家應(yīng)該了解，交互設(shè)計(jì)不僅局限于頁面的邏輯跳轉(zhuǎn)，其實(shí)可以細(xì)分為三個(gè)方面，即表現(xiàn)方式、操作方式于反饋方式。

表現(xiàn)方式設(shè)計(jì)的目的就是讓用戶使用產(chǎn)品時(shí)做到操作前可以預(yù)知，比如很多金融類財(cái)經(jīng)類產(chǎn)品會(huì)讓用戶對(duì)于產(chǎn)品的每一個(gè)元素做到操作前可預(yù)知，這樣就會(huì)讓視覺的美觀度下降很多。

而娛樂類產(chǎn)品對(duì)于容錯(cuò)性要求較低，表現(xiàn)方式就可以含蓄一些，視覺的可塑性強(qiáng)隨之美觀度也會(huì)較高。所以視覺美觀性與容錯(cuò)性是有“守恒定律”的，容錯(cuò)性做到一定階段，一定是會(huì)損失部分美觀度的。

容錯(cuò)性是產(chǎn)品對(duì)錯(cuò)誤操作的承載性能，即一個(gè)產(chǎn)品操作時(shí)出現(xiàn)錯(cuò)誤的概率和錯(cuò)誤出現(xiàn)后得到解決的概率和效率。

容錯(cuò)性最初應(yīng)用于計(jì)算機(jī)領(lǐng)域，它的存在能保證系統(tǒng)在故障存在的情況下不失效，仍然正常工作。產(chǎn)品容錯(cuò)性設(shè)計(jì)能使產(chǎn)品與人的交流或人與人借助產(chǎn)品的交流更加流暢。

說起容錯(cuò)性，設(shè)計(jì)者最基本要考慮到當(dāng)產(chǎn)品本身出錯(cuò)而非用戶誤操作時(shí)，產(chǎn)品要有清晰的處理方式。比如當(dāng)用戶所處環(huán)境網(wǎng)絡(luò)環(huán)境較差時(shí)，也是就是弱網(wǎng)狀態(tài)下應(yīng)該如何去處理。

常規(guī)的處理方式是首先給予用戶明確的交互反饋，告訴用戶當(dāng)前頁面已經(jīng)在加載，如果當(dāng)前頁面加載了15秒還沒有加載完成則可以給予用戶Toast提示框，提醒用戶當(dāng)前網(wǎng)絡(luò)情況可能不太好。

如果加載30秒之后仍然加載不出來，就可以終止加載，不再浪費(fèi)用戶的時(shí)間了。這是容錯(cuò)性最基本要考慮到的，無論是概念設(shè)計(jì)還是落地設(shè)計(jì)。

當(dāng)然對(duì)于用戶主觀的誤操作來講，容錯(cuò)性可以體現(xiàn) “限制用戶錯(cuò)誤的選擇項(xiàng)”、“恢復(fù)現(xiàn)場(chǎng)的能力”、“協(xié)助用戶記憶”等幾個(gè)方面。

作為設(shè)計(jì)師來說，設(shè)計(jì)產(chǎn)品時(shí)就要盡量主觀地把那些錯(cuò)誤的操作避免，例如在買車票選擇日期時(shí)，把昨天或者更早的日期直接不顯示，或者在輸入表單信息時(shí)，文字長度不夠或者過長時(shí)，會(huì)出現(xiàn)一些無法進(jìn)行下一步的提示按鈕。

如圖所示，“微信”在限制用戶誤操作方面就做得比較好，左圖用戶在發(fā)送語音時(shí)如果錄音時(shí)間過短，會(huì)出現(xiàn)不可發(fā)送的Toast提示框；右圖微信在發(fā)布朋友圈時(shí)，如果沒有輸入信息，則右上角的發(fā)布按鈕不可點(diǎn)擊，不給用戶誤操作的機(jī)會(huì)。

講到“恢復(fù)現(xiàn)場(chǎng)的能力”或許很多小伙伴會(huì)有共鳴，在使用設(shè)計(jì)軟件時(shí)，打開的文件過多、文件過大或超出系統(tǒng)承受能力時(shí)經(jīng)常會(huì)出現(xiàn)卡死或者閃退的情況，當(dāng)發(fā)生這種情況時(shí)用戶是很容易產(chǎn)生負(fù)面情緒的。

放在移動(dòng)端來說，有時(shí)候用戶在瀏覽很長的文章或者信息很多的列表時(shí)，經(jīng)常會(huì)不小心點(diǎn)擊到另一個(gè)推薦的頁面，如果返回的話，很多App是直接返回到上一個(gè)頁面的原始狀態(tài)，但此時(shí)用戶更多的是想回到剛才閱讀到的位置。

例如我們?cè)陂喿x“微信”公眾號(hào)的文章時(shí)返回到信息頁面，再回到文章頁，是記錄了剛才閱讀的位置，而不是從頭開始，這種體驗(yàn)可以大大增強(qiáng)用戶對(duì)產(chǎn)品的好感。

當(dāng)然，類似的例子還有很多，很多情況都是舉一反三。如圖下圖所示，左圖是“美團(tuán)外賣”，在使用外賣產(chǎn)品訂外賣時(shí)，我們經(jīng)常會(huì)點(diǎn)到一半想再去看看別家，這時(shí)用戶在返回前一頁后系統(tǒng)會(huì)記錄這家餐廳所選的商品，再次進(jìn)入就不需要重復(fù)選餐了；

右圖中“字里行間”這種文字內(nèi)容類的產(chǎn)品作者用戶經(jīng)常需要碼很長的字，如果這個(gè)時(shí)候誤點(diǎn)擊了“返回”或者手機(jī)自動(dòng)關(guān)機(jī)，產(chǎn)品就需要幫助用戶去恢復(fù)現(xiàn)場(chǎng)，這也是產(chǎn)品可用性的一種體現(xiàn)。

“協(xié)助用戶記憶”這個(gè)方法就很容易理解了，在用戶使用淘寶購買物品，或者使用其他產(chǎn)品發(fā)起訂單，付款時(shí)用戶肯定不希望自己用大腦再回憶一遍剛才買了些什么，這就需要在付款頁把剛才所購買的東西羅列出來讓用戶再確認(rèn)一遍。

如果用戶有多買或者少買了什么東西，這個(gè)體驗(yàn)是非常不容易接受的。如下圖所示，左圖“淘寶”在提交訂單付款前會(huì)讓用戶再把購物車內(nèi)的商品確認(rèn)一遍；右圖“餓了么”也是同理。

上面所舉例的是最基礎(chǔ)要注意的容錯(cuò)性設(shè)計(jì)，對(duì)于一些落地設(shè)計(jì)來講，還有很多地方需要去迎合用戶習(xí)慣，降低用戶的學(xué)習(xí)成本。

但是概念設(shè)計(jì)則可以多在交互手勢(shì)上面增加一些創(chuàng)新，逐漸培養(yǎng)用戶習(xí)慣更簡(jiǎn)單高效的交互形式，這就是視覺美觀性與容錯(cuò)性方向的差異體現(xiàn)。

< 真實(shí)信息體現(xiàn)，避免重復(fù)信息 >

信息重復(fù)且無規(guī)則是設(shè)計(jì)者在概念設(shè)計(jì)階段最容易犯的錯(cuò)誤，除了視覺上不美觀之外，其實(shí)就算是文本信息的排列其中同樣有很多要注意的細(xì)節(jié)，忽略這些細(xì)節(jié)會(huì)讓頁面的邏輯出現(xiàn)問題。

比如僅僅文本的適配規(guī)則就可以分為四種，即“換行”、“超出省略”、“縮字號(hào)”、“限定字符”。

換行的處理方式適用于多行幾率較高的文本信息，并且對(duì)于當(dāng)前頁面的信息展示較為重要時(shí)。還有一種情況就是當(dāng)前頁面無二級(jí)頁面時(shí)，必須通過換行的方式來顯示全部。

比如微信朋友圈這種形式，沒有必要單開一個(gè)二級(jí)頁面，并且文本多行幾率非常高，就適用于換行的處理方式，當(dāng)然微信的規(guī)則是當(dāng)文字超過一定長度后會(huì)單開一個(gè)二級(jí)頁面進(jìn)行承載。

超出省略的處理方式需要當(dāng)前省略的信息有二級(jí)頁面，并且二級(jí)頁面點(diǎn)擊頻率較高，或者當(dāng)前需要省略的內(nèi)容非重要信息。

比如每日優(yōu)鮮這類產(chǎn)品，圖片為重要信息，文字為輔助信息，并且二級(jí)頁面的點(diǎn)擊頻率較高，所以商品標(biāo)題就可以采用超出省略的顯示方式。

縮字號(hào)的使用場(chǎng)景相對(duì)較少，基本上只適用于文本超出一行的幾率不大，但偶爾會(huì)出現(xiàn)時(shí)，或當(dāng)前文本沒有二級(jí)頁面或者信息內(nèi)容對(duì)于當(dāng)前頁面較為重要。

縮字號(hào)的處理方式有個(gè)缺點(diǎn)就是可能會(huì)導(dǎo)致兩行文字大小不一致，比如由于一行文本超出顯示范圍而自動(dòng)縮字號(hào)，而另一沒有超出時(shí)，視覺上就會(huì)較為不統(tǒng)一。

比如京東品類區(qū)的這些活動(dòng)入口，標(biāo)題下方的描述文字超出顯示區(qū)域時(shí)就可以使用縮字號(hào)的形式來體現(xiàn)。

防止文本適配出現(xiàn)問題最根本也是最方便的處理方式就是從后臺(tái)錄入信息的字符數(shù)量上解決，當(dāng)然偏向于UGC的產(chǎn)品可以從前端用戶輸入信息時(shí)就設(shè)定明確的字符數(shù)量。

當(dāng)然這種處理方式需要很明確的預(yù)估最大字符數(shù)量，如果預(yù)估的最大字符數(shù)量滿足不了大部分用戶，那么體驗(yàn)也會(huì)是極差的。

比如UC頭條這種PGC內(nèi)容類產(chǎn)品，后臺(tái)直接限制新聞標(biāo)題的文本數(shù)量可以從根本上解決文本的顯示問題。

當(dāng)然文本的真實(shí)數(shù)量顯示只是一小部分，圖片相比來講需要考慮的規(guī)則更多，一張圖時(shí)該如何顯示，兩張圖該如何顯示，最大可以顯示幾張等等，這些都需要設(shè)計(jì)者在做設(shè)計(jì)時(shí)有一個(gè)很明確的顯示規(guī)則。

< 配圖貼合主題且規(guī)則明確 >

無論是落地設(shè)計(jì)還是概念設(shè)計(jì)都離不開配圖，尤其一些圖片為主的產(chǎn)品其配圖同樣是需要精心挑選的，因?yàn)榕鋱D的質(zhì)量可以直接影響整個(gè)產(chǎn)品的格調(diào)。

關(guān)于配圖的選擇是否合適，這里我給出4個(gè)評(píng)測(cè)的標(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時(shí)間的瀏覽復(fù)雜圖片會(huì)讓用戶過早的出現(xiàn)視覺疲勞感；

最后是角度深淺，除了圖片的拍攝角度要盡量一致以外，圖片的景深也盡量一致，特寫的圖片的話就盡量都是特寫，遠(yuǎn)景的話就盡量都是遠(yuǎn)景。

遵循以上4個(gè)選圖技巧會(huì)讓頁面整體更統(tǒng)一和諧，產(chǎn)品品質(zhì)感更高。

以一個(gè)家居電商類產(chǎn)品的首頁為例，主色為黃色，產(chǎn)品風(fēng)格的關(guān)鍵詞為“極簡(jiǎn)、清新、安靜、溫暖?！?

打開站酷海洛，根據(jù)圖片的關(guān)鍵詞搜索，結(jié)合產(chǎn)品的格調(diào)篩選，最后將挑選的圖片以選圖四大原則進(jìn)行衡量，確保色調(diào)統(tǒng)一、圖片高清，復(fù)雜程度統(tǒng)一，角度深淺統(tǒng)一，最終效果如下圖。

除了基于選圖四大原則之外，又根據(jù)板塊的相似性原則，相同板塊的圖片角度保持一致，不同板塊的角度加以對(duì)比防止頁面視覺單調(diào)，圖片迎合產(chǎn)品主色檸檬黃，頭圖加以對(duì)比色給頁面增加活力氣息。

<多種狀態(tài)考慮>

靜態(tài)頁面同樣需要展示出界面的交互情況，比如同一個(gè)頁面中可以顯示3個(gè)列表，其中1個(gè)列表就可以顯示點(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ì)的感性層面可能只會(huì)占到30%。

正如標(biāo)題所講，設(shè)計(jì)應(yīng)該是先感性的放飛，然后理性的收回。不要拿自己上限去拼別人的下限，概念設(shè)計(jì)可以極大的鍛煉設(shè)計(jì)者的思維方式，未來一定是設(shè)計(jì)驅(qū)動(dòng)技術(shù)，技術(shù)改變世界。