在B端產(chǎn)品做設(shè)計(jì)的時(shí)候，第一件事是決定界面的結(jié)構(gòu)布局，導(dǎo)航放在哪成為一件亟需要考慮的事情。典型的，有橫向?qū)Ш脚c縱向?qū)Ш街郑胊nt design來(lái)舉例，如下面2張圖所示；
兩者看起來(lái)都行，但選擇哪個(gè)，心理會(huì)有第一眼的直覺(jué)，但光有直覺(jué)不行，還得羅列個(gè)123出來(lái)，這樣展示方案的時(shí)候，才能服己服人。
橫向?qū)Ш?
優(yōu)點(diǎn)：
通常使用比較少的菜單，簡(jiǎn)單，容易記憶；
位于頁(yè)面頂部，不占用橫向空間；
由于位于頂部，在視覺(jué)上更突出，更容易識(shí)別；
菜單選項(xiàng)之間視覺(jué)權(quán)重的區(qū)分更明顯，左邊最強(qiáng)右邊最弱；
缺點(diǎn)：
擴(kuò)展性有限，不能很好的承載大量和多層級(jí)菜單；
占用屏幕高度，特備是當(dāng)固定于屏幕頂部時(shí)；
來(lái)回切換菜單選項(xiàng)時(shí)，橫向移動(dòng)鼠標(biāo)的距離更長(zhǎng)，操作效率更低；
縱向?qū)Ш?
優(yōu)點(diǎn)：
能夠承載的菜單項(xiàng)數(shù)量和層級(jí)更多，擴(kuò)展性強(qiáng)；
不占用屏幕高度且可以收起，為內(nèi)容提供更多空間；
在菜單間切換時(shí)鼠標(biāo)移動(dòng)距離短；
能夠更好地適應(yīng)屏幕寬度較小的設(shè)備；
缺點(diǎn)：
菜單數(shù)量多層級(jí)復(fù)雜時(shí)，不容易記憶；
菜單選項(xiàng)文字不宜過(guò)長(zhǎng)，可能會(huì)截?cái)啵?
各菜單選項(xiàng)之間的視覺(jué)權(quán)重差別不明顯。
他們都可以在已有的方向上進(jìn)行擴(kuò)展，如下圖
橫向?qū)Ш綌U(kuò)展
但總體來(lái)說(shuō)，單獨(dú)的橫向?qū)Ш椒绞綄蛹?jí)不能超過(guò)3層，多于3級(jí)就不利于用戶的閱讀和選擇。
縱向?qū)Ш綌U(kuò)展
相對(duì)于橫向縱向的拓展性強(qiáng)，不管多少級(jí)都可以一致往下加，但層級(jí)高過(guò)于3層，用戶對(duì)導(dǎo)航的分辨和記憶會(huì)明顯下降。
當(dāng)然，有時(shí)候單獨(dú)只有橫向或者縱向一種導(dǎo)航不能完全滿足我們的需求，他們有那么，根據(jù)以上特點(diǎn)，我們也可以有如下組合的形式。
組合導(dǎo)航
很明顯，這樣的組合導(dǎo)航，適用于一級(jí)導(dǎo)航不太多（做好少于5個(gè)）且內(nèi)容權(quán)重差別很明顯，一級(jí)導(dǎo)航之后的導(dǎo)航內(nèi)容和層級(jí)比較多且內(nèi)容復(fù)雜。
另外，如果嫌縱向?qū)Ш秸伎臻g，則可以考慮將縱向?qū)Ш阶龀煽烧郫B收起的模式，適用于貼著瀏覽器的縱向?qū)Ш健?
可折疊的縱向?qū)Ш?
總結(jié)一下：
橫向?qū)Ш揭子洃?、易看，各?dǎo)航權(quán)重區(qū)分明顯，越靠左越重要，但切換效率慢； 2.縱向?qū)Ш綌U(kuò)展性強(qiáng)，可折疊，各導(dǎo)航權(quán)重區(qū)分不明顯，切換效率更高；3.如果兩者都不能單獨(dú)滿足，可嘗試組合的形式。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：Sophia的玲瓏閣 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
頭像，作為我們?cè)谔摂M世界展現(xiàn)給別人的形象，無(wú)疑擁有強(qiáng)烈的社交屬性，還記得當(dāng)年剛剛擁有QQ的我，隔一周就會(huì)換上自己喜歡的圖片，通過(guò)頭像還添加了好些擁有同樣愛(ài)好的人。
但是隨著年齡的增長(zhǎng)，我們開(kāi)始不太愛(ài)去設(shè)置自己的頭像(有些APP甚至?xí)⒃O(shè)置頭像作為領(lǐng)取獎(jiǎng)勵(lì)的任務(wù)，可見(jiàn)大家越來(lái)越不愛(ài)設(shè)置頭像)，一些不經(jīng)常使用的APP都是習(xí)慣性的使用默認(rèn)頭像。
這時(shí)候設(shè)計(jì)合適產(chǎn)品的默認(rèn)頭像能夠使產(chǎn)品整體更加和諧。接下來(lái)我們就來(lái)看看默認(rèn)頭像的7種設(shè)計(jì)方式。
單個(gè)無(wú)性別頭像是最常見(jiàn)的默認(rèn)頭像設(shè)計(jì)方式，以無(wú)性別灰色或單色系半身人像為主，有些會(huì)使用宇航員的形象（也看不出性別），且一般只有一個(gè)。如下圖：
特點(diǎn)：無(wú)性別頭像具有更廣的包容性，設(shè)計(jì)簡(jiǎn)單快捷適合比較趕的項(xiàng)目；但設(shè)計(jì)單一，單個(gè)無(wú)性別頭像的社交屬性不夠強(qiáng)烈。
性別頭像以男女性別劃分，根據(jù)用戶男女比例的不同有以下三種情況。
產(chǎn)品定位以男性居多，無(wú)論用戶男女都僅有男性默認(rèn)頭像。
特點(diǎn)：只設(shè)計(jì)一個(gè)男性頭像，比較快捷，但對(duì)女性用戶不太友好
產(chǎn)品定位以女性居多，無(wú)論用戶男女都僅有女性默認(rèn)頭像。
特點(diǎn)：只設(shè)計(jì)一個(gè)女性頭像，比較快捷，但對(duì)男性用戶不太友好
產(chǎn)品定位沒(méi)有明顯的性別偏向，分別設(shè)計(jì)男性和女性頭像，需要注意的是該方式常常需要用戶設(shè)置性別。
特點(diǎn)：分別設(shè)計(jì)男性與女性頭像，能滿足大部分用戶，需要開(kāi)發(fā)判定用戶的性別。
吉祥物頭像也是使用很頻繁的，一般擁有吉祥物的APP都會(huì)采用該方式設(shè)計(jì)默認(rèn)頭像，設(shè)計(jì)1個(gè)或是多個(gè)。
常見(jiàn)吉祥物多以動(dòng)物為主，也有以人物、擬人物為主的吉祥物，比如B站的看板娘萌妹子和黃油相機(jī)的一坨黃油。
特點(diǎn)：吉祥物頭像更具辨識(shí)度，隨時(shí)隨刻加深用戶對(duì)吉祥物的印象，便于制作延伸設(shè)計(jì)。
這里的logo頭像是除去以吉祥物為logo的APP后，其他的logo頭像。使用這種默認(rèn)頭像的APP比較少見(jiàn)，目前我看到的有悅動(dòng)圈和開(kāi)眼，如下圖：
特點(diǎn)：logo頭像能加深品牌的印象，但缺失了頭像應(yīng)有的社交屬性。
頭像中以文字為主，一般僅有兩個(gè)字。以釘釘為列，它的默認(rèn)頭像使用用戶姓名后兩位作為中心，我認(rèn)為其實(shí)釘釘?shù)哪J(rèn)頭像已經(jīng)可以很好地幫助用戶找到公司對(duì)應(yīng)的同事，反而比起某些圖片類(lèi)自定義頭像來(lái)的直接。
還有一種文字頭像是以APP名稱為主，比如叮當(dāng)快藥，它的默認(rèn)頭像取了”叮當(dāng)“二字，和logo頭像類(lèi)似，同樣能加深品牌印象。
特點(diǎn)：以文字為主，多為兩個(gè)字。OA辦公系統(tǒng)可借鑒釘釘以員工姓名為主。也可將APP名稱置入頭像中，能迅速設(shè)計(jì)出來(lái)，適合時(shí)間緊的項(xiàng)目。
多主題默認(rèn)頭像，常用在擁有強(qiáng)烈社交屬性的產(chǎn)品中，APP給了用戶更加豐富的默認(rèn)頭像選擇，有了這些豐富的默認(rèn)頭像即便用戶不自定義頭像也不會(huì)對(duì)界面的層次感造成影響。
soul設(shè)置頭像時(shí)可以選擇多種畫(huà)風(fēng)的不同人物，男女分別有36個(gè)默認(rèn)頭像供用戶選擇，并且還可以改變背景色，使得默認(rèn)頭像變化豐富，具有一定的趣味性。
類(lèi)似的還有B站的隨機(jī)頭像，共有11個(gè)以B站看板娘為形象的默認(rèn)頭像，可以幫助用戶減輕因選擇困難癥不知用何頭像的焦慮。
特點(diǎn)：為用戶提供了豐富的默認(rèn)頭像，能減輕用戶不知使用什么頭像的選擇困難，并且具有一定的趣味性，但設(shè)計(jì)花費(fèi)時(shí)間較多，不適合時(shí)間緊的項(xiàng)目。
最后介紹的捏臉頭像，追溯起來(lái)應(yīng)該是從iOS12發(fā)布的Memoji延伸而來(lái)，這種可以像捏泥人一樣任意改變的頭像具有非常強(qiáng)烈的趣味性，甚至形成了一夜爆紅專(zhuān)門(mén)捏臉的APP-ZEPETO。
捏臉頭像的有趣不僅在于可以捏臉，它就像是我們?cè)谔摂M世界中的形象，可以給她打扮、布置房間等，更像是延伸出來(lái)的裝扮游戲。比如淘寶點(diǎn)擊個(gè)人中心的頭像就會(huì)進(jìn)入淘寶人生。
soul則將捏臉頭像真正應(yīng)用到了頭像的制作中，在個(gè)人中心點(diǎn)擊頭像即可進(jìn)行超級(jí)捏臉，捏好后就可以直接應(yīng)用了。
特點(diǎn)：具有強(qiáng)烈的趣味性，可以延伸為單獨(dú)的互動(dòng)游戲，實(shí)現(xiàn)難度較大，不適合廣泛的應(yīng)用。
本文著重介紹了7種默認(rèn)頭像的設(shè)計(jì)方式，分別是單個(gè)無(wú)性別頭像、性別頭像、吉祥物頭像、logo頭像、文字頭像、多主題頭像、捏臉頭像，我們?cè)谠O(shè)計(jì)時(shí)可以根據(jù)項(xiàng)目時(shí)間、產(chǎn)品的定位、趣味性等選擇合適的默認(rèn)頭像。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：人類(lèi)君 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
數(shù)據(jù)可視化的表現(xiàn)形式現(xiàn)在也2D和3D（這里的2D和3D只是通俗的叫法，不具備行業(yè)普遍性，只是作為文章中的分析，進(jìn)行表達(dá)），在網(wǎng)上還是有很多關(guān)于2D數(shù)據(jù)文章和教程，我覺(jué)得還比較具備行業(yè)的普遍性，所以今天我們就來(lái)聊聊3D數(shù)據(jù)可視化。
現(xiàn)狀：3D可視化目前來(lái)說(shuō)還是屬于一個(gè)比較小眾的設(shè)計(jì)群體，而且因?yàn)橹饕鎸?duì)的客戶大多是ToG或者ToB的項(xiàng)目，項(xiàng)目保密工作做的很好，對(duì)外發(fā)聲較少，因此也會(huì)顯得特別神秘，行業(yè)門(mén)檻也相對(duì)較高。但是由于政府和企業(yè)對(duì)于這類(lèi)項(xiàng)目的需求大，再加上城市智慧建設(shè)、軍事電子沙盤(pán)、智慧交通，項(xiàng)目多且廣泛，也就導(dǎo)致了這類(lèi)設(shè)計(jì)師較為稀缺。
通常所表達(dá)的就是通過(guò)3D的游戲引擎（例如：Unity3D）制作出來(lái)的數(shù)據(jù)可視化項(xiàng)目，他能夠更直觀的還原出所要展示數(shù)據(jù)可視化的真實(shí)場(chǎng)景，并且能夠?qū)崟r(shí)接入數(shù)據(jù)，使得整個(gè)項(xiàng)目更具立體、更具有科技感。使得項(xiàng)目在面對(duì)復(fù)雜操作時(shí)能靈活應(yīng)對(duì)。
在我看來(lái)，雖然也是UI設(shè)計(jì)師，但是他和大眾認(rèn)知中的UI設(shè)計(jì)師又有很多不同，比如承載設(shè)計(jì)的屏幕可能大到16m*9m、小到只有iPad的尺寸，因此很考驗(yàn)設(shè)計(jì)師對(duì)不同尺寸屏幕下的設(shè)計(jì)方法。而3D數(shù)據(jù)可視化更多是向空間、建模形式的表達(dá)，因此對(duì)于三位的理解、空間的交互轉(zhuǎn)變都尤為重要，我在下面來(lái)一一拆解需要哪些能力～
視覺(jué)能力：在設(shè)計(jì)當(dāng)中，視覺(jué)也是最基本的能力，其主要滿足這個(gè)數(shù)據(jù)可視化當(dāng)中對(duì)于場(chǎng)景、物體的視覺(jué)能力、數(shù)據(jù)圖表的視覺(jué)效果，對(duì)于地圖、建筑、數(shù)據(jù)的視覺(jué)表達(dá)。通常風(fēng)格以科技感的風(fēng)格為主，因此考驗(yàn)的更多是我們?cè)O(shè)計(jì)師的想象力、對(duì)于科技產(chǎn)品的表達(dá)能力，因此對(duì)于FUI比較重視，如果平時(shí)能夠多看科幻電影能夠?qū)@方面能力也會(huì)有所提升～
數(shù)據(jù)可視化能力：首先你需要具備很強(qiáng)的數(shù)據(jù)表達(dá)能力，即將用戶想的數(shù)據(jù)現(xiàn)象通過(guò)你的數(shù)據(jù)化設(shè)計(jì)進(jìn)行表現(xiàn)出來(lái)。同時(shí)需要去理解每個(gè)數(shù)據(jù)之間的真正含義，然后再去設(shè)計(jì)，因此對(duì)于圖表的理解必須更加深刻。再次因?yàn)槭峭ㄟ^(guò)3D的手法實(shí)現(xiàn)，你所更需要了解是我設(shè)計(jì)的這個(gè)圖表，2D和3D之間到底存在什么差異，既然我用了3D，在圖表層面上怎么和2D圖表拉開(kāi)差距、有所區(qū)別，這是我們需要去認(rèn)真思考的。
三維交互能力：三維軟件的交互和二維不同，雖然在移動(dòng)端大家都提出了Z軸的概念，但是和現(xiàn)如今所需要的可視化的項(xiàng)目不同。
建模能力：因?yàn)樵趯?shí)際工作當(dāng)中，很多建筑物不能夠靠你的三維想象來(lái)進(jìn)行設(shè)計(jì)稿的制作，因此通常我們也會(huì)使用c4d這一類(lèi)的三維建模軟件，這樣能夠保證快速出設(shè)計(jì)稿的同時(shí)，對(duì)于物體的表現(xiàn)又能非常到位。
對(duì)于接觸數(shù)據(jù)可視化的UI設(shè)計(jì)師來(lái)說(shuō)，最關(guān)心的莫過(guò)于這個(gè)項(xiàng)目你們是怎么落地。因?yàn)槊總€(gè)公司要求不同，我說(shuō)的只是我們自己的做法，只是想說(shuō)出來(lái)和大家分享分享～
一般我們產(chǎn)出的會(huì)幾個(gè)東西：設(shè)計(jì)靜幀圖（包含靜幀圖、標(biāo)注、切圖）、視頻demo、交互流程（看項(xiàng)目）
基本流程：這個(gè)是必須要的，首先項(xiàng)目會(huì)根據(jù)我們所出的設(shè)計(jì)靜幀圖進(jìn)行和需求方進(jìn)行對(duì)接，確定他們想要的效果和設(shè)計(jì)靜幀稿上是否一直。如果雙方理解存在差異，就會(huì)按照要求進(jìn)行修改。修改完成后會(huì)將設(shè)計(jì)靜幀稿交到建模師手中，3D建模會(huì)根據(jù)你這個(gè)靜幀圖進(jìn)行建模。當(dāng)然，我們?cè)O(shè)計(jì)師是不需要制作模型的，如果會(huì)，當(dāng)然也是更好，能夠方便建模師進(jìn)行快速建模。但是因?yàn)槊總€(gè)項(xiàng)目的要求不同，對(duì)于我們這種設(shè)計(jì)師來(lái)說(shuō)時(shí)間相對(duì)很緊。對(duì)于我們來(lái)說(shuō)需要進(jìn)行快速的出圖，從而能夠和需求方進(jìn)行方案的確定。
設(shè)計(jì)靜幀圖：他最大的作用是和需求方進(jìn)行溝通，以及和建模師進(jìn)行效果確定。還有后續(xù)驗(yàn)收時(shí)會(huì)根據(jù)靜幀圖進(jìn)行效果評(píng)定～
標(biāo)注：字體、字號(hào)、顏色、位置、基本數(shù)據(jù)參數(shù)，標(biāo)注和之前大家熟悉的思路基本一致。
切圖：icon、圖片，開(kāi)發(fā)不能通過(guò)代碼進(jìn)行實(shí)現(xiàn)的
視頻demo：會(huì)根據(jù)項(xiàng)目的難以程度進(jìn)行制作，通常在較大項(xiàng)目中，會(huì)有時(shí)間進(jìn)行視頻demo的制作，同時(shí)demo也會(huì)給需求方、開(kāi)發(fā)進(jìn)行很好的演示，使得整個(gè)項(xiàng)目在開(kāi)發(fā)當(dāng)中能夠更加明確。
交互流程：但是我們需要考慮到的是設(shè)計(jì)后整個(gè)效果是如何，以及設(shè)計(jì)后整個(gè)點(diǎn)擊過(guò)后的交互，因此在基本方案確定后，靜幀圖會(huì)和交互方案
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：CE青年 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
篩選可以說(shuō)是我使用比較頻繁的一種交互形式，比如我點(diǎn)外賣(mài)，會(huì)選擇滿減優(yōu)惠力度大，同時(shí)我也可以選擇在哪一個(gè)價(jià)格區(qū)間內(nèi)的產(chǎn)品，這就會(huì)用到篩選，而到了B端產(chǎn)品上來(lái)，一個(gè)CRM系統(tǒng)當(dāng)中，篩選的邏輯也會(huì)比移動(dòng)端的復(fù)雜，伴隨著：且關(guān)系、或關(guān)系、大于、小于等等這樣復(fù)雜的邏輯，也為設(shè)計(jì)本身增加了很多難度。因此，今天我們就來(lái)討論討論篩選控件
篩選存在的對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的，它可以幫助用戶，在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的定位；可以對(duì)表單進(jìn)行快速劃分，縮短用戶對(duì)于數(shù)據(jù)的尋找時(shí)間；能夠滿足用戶在工作中，實(shí)際業(yè)務(wù)場(chǎng)景的篩選。
對(duì)于實(shí)際B端場(chǎng)景來(lái)說(shuō)，篩選是日常數(shù)據(jù)分類(lèi)的一個(gè)重要途徑，我們先來(lái)看看實(shí)際場(chǎng)景到底有哪些？
比如今天作為一個(gè)電話銷(xiāo)售人員，想要聯(lián)系最近注冊(cè)的用戶時(shí)，通常會(huì)通過(guò)篩選來(lái)選出最近幾天注冊(cè)過(guò)，同時(shí)又沒(méi)有銷(xiāo)售更進(jìn)的客戶，進(jìn)行一個(gè)優(yōu)先級(jí)的排布；
再比如說(shuō)，在銷(xiāo)售周報(bào)當(dāng)中，銷(xiāo)售主管可以通過(guò)篩選得到每個(gè)人這周完成的狀態(tài)，也可以通過(guò)篩選得出每個(gè)人對(duì)于線索的更進(jìn)情況和對(duì)客戶的流失狀態(tài)等等，這些都可以通過(guò)各種各樣的篩選形式來(lái)滿足用戶對(duì)于特定情況下的使用
篩選可以通過(guò)多個(gè)篩選條件進(jìn)行多維度的尋找，而導(dǎo)航、搜索只能通過(guò)單一條件進(jìn)行指定篩選。
雖然在現(xiàn)在很多搜索都可以支持多維度用空格去進(jìn)行多字段的關(guān)鍵詞搜索，但本質(zhì)上區(qū)別不大
所以在B端項(xiàng)目當(dāng)中，如果你有表單，那你就需要篩選
我們將篩選分為基礎(chǔ)篩選和高級(jí)篩選兩種，兩種篩選會(huì)根據(jù)業(yè)務(wù)場(chǎng)景不同，在不同的頁(yè)面去使用
基礎(chǔ)篩選一般為系統(tǒng)預(yù)設(shè)好的篩選字段，具有很強(qiáng)的業(yè)務(wù)和場(chǎng)景的需求?；A(chǔ)篩選一般分為四個(gè)部分：
篩選條件：是指用戶可以篩選的范圍
篩選項(xiàng)：是指用戶可以選擇的篩選項(xiàng)目
已選項(xiàng)：是指用戶已經(jīng)選中的篩選項(xiàng)
備選項(xiàng)：是指用戶還沒(méi)有選擇的篩選選項(xiàng)
基礎(chǔ)篩選更多作為用戶快捷篩選的一種方式，因?yàn)橐话闶褂脠?chǎng)景當(dāng)中用戶幾個(gè)篩選邏輯為“且”
同時(shí)篩選的邏輯也為簡(jiǎn)單篩選，所以在使用場(chǎng)景上只適合在對(duì)篩選要求不高的場(chǎng)景下使用。
高級(jí)篩選一般為篩選中含有運(yùn)算符，同時(shí)篩選當(dāng)中包含條件關(guān)系，比如且關(guān)系或者否關(guān)系。一般高級(jí)篩選包含以下幾類(lèi)關(guān)鍵詞
篩選關(guān)系：是指幾個(gè)篩選條件之間的關(guān)系，一般為 且、或關(guān)系，即 且 關(guān)系為幾個(gè)條件之間的交集；或 關(guān)系為幾個(gè)條件之間的聯(lián)集（并集）
篩選字段：是指在篩選當(dāng)中，所要的篩選項(xiàng)，一般為表單當(dāng)中的所有可篩選的字段
篩選操作：是指篩選字段和篩選值之間的關(guān)系，常見(jiàn)的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。
篩選值：你所需要篩選的數(shù)值
高級(jí)篩選一般滿足更多的用戶場(chǎng)景，為用戶多條件多字段、多個(gè)篩選關(guān)系、多個(gè)篩選操作 提供有利保障。
當(dāng)在篩選器條件少于5個(gè)的情況下，最常使用的就是上下布局，這樣篩選能與網(wǎng)站保持統(tǒng)一的情況下，上下布局也更方便用戶進(jìn)行閱讀
當(dāng)篩選器過(guò)多的情況下（一般在5-15個(gè)之間），篩選器過(guò)多，需要滾屏才能看到篩選結(jié)果，用戶使用起來(lái)會(huì)很別扭。所以在5-15個(gè)的情況下，一般會(huì)將篩選項(xiàng)進(jìn)行收折，這樣保證篩選整體面積不會(huì)太大，同時(shí)將用戶常用的篩選放在前面，可以滿足用戶基本的業(yè)務(wù)需求和使用場(chǎng)景
左右布局在PC端一般是以字段選擇進(jìn)行篩選，通俗來(lái)講就是將用戶可以篩選的所有字段全部羅列出來(lái)，然后通過(guò)勾選選，擇出你需要篩選的字段，進(jìn)行篩選器的使用
左右布局的好處是能夠?qū)⒑Y選的所有條件都直接的展示出來(lái)，可以適應(yīng)很多場(chǎng)景，在篩選器用15個(gè)以上時(shí)。通過(guò)左右布局的方式，能夠讓篩選條件進(jìn)行滾動(dòng)，在最大限度保持用戶使用體驗(yàn)
在日常的B端產(chǎn)品中，篩選的形式有哪些？篩選到底應(yīng)該怎么設(shè)計(jì)？接下來(lái)為大家總結(jié)梳理一些在 B端產(chǎn)品 中的篩選玩法，希望為你開(kāi)啟新大陸。
平鋪型一般為用戶搜索結(jié)果數(shù)據(jù)量過(guò)大，使用戶搜索出來(lái)的結(jié)果與其預(yù)期差距過(guò)大，用戶然后可以通過(guò)篩選對(duì)數(shù)據(jù)的再一次分類(lèi)，使用戶能夠精準(zhǔn)尋找其想要的結(jié)果。
平鋪型一般為篩選條件少于6個(gè)，這樣能夠通過(guò)1行或者2行去展示篩選項(xiàng)的結(jié)果
多用于信息量大的產(chǎn)品，比如電商、視頻網(wǎng)站等等。常見(jiàn)的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式，將所有的篩選條件列出來(lái)。
平鋪型的好處是將篩選項(xiàng)的結(jié)果全部或者部分放出，能夠幫助用戶快速理解篩選項(xiàng)以及快讀找到自己想要的結(jié)果。
缺點(diǎn)也是很明顯，平鋪型的控件占比大，需要占據(jù)大量面積展示平鋪出的篩選結(jié)果。
比如淘寶PC端，搜索一個(gè)產(chǎn)品后花去40%的面積去展示所有的篩選條件，其實(shí)就是想引導(dǎo)用戶，淘寶搜索過(guò)后spu的數(shù)量仍然過(guò)大，想通過(guò)進(jìn)一步的篩選，讓用戶明確自己對(duì)想要東西。同時(shí)因?yàn)槊娣e占比大，通常平鋪型都是以收折的狀態(tài)，只有在搜索觸發(fā)后才會(huì)完全展開(kāi)
收折型篩選是一種簡(jiǎn)單直接的篩選形式，將用戶常用的篩選形式通過(guò)下拉框的形式進(jìn)行篩選。每一個(gè)篩選條件就是一個(gè)下拉框，這種形式看上去很簡(jiǎn)單，但是在B端場(chǎng)景中，下拉框?qū)τ谟脩魜?lái)說(shuō)認(rèn)知成本低，操作性也較強(qiáng)，同時(shí)在用戶重度使用時(shí)，又能給用戶很好的使用體驗(yàn)的一種方式
用戶可以直接對(duì)其常用的字段篩選進(jìn)行一步操作，并且沒(méi)有復(fù)雜的篩選關(guān)系，全部都是“且”的篩選邏輯，能夠保證用戶進(jìn)行快速的篩選選擇
將所有信息全部平鋪展開(kāi)，信息量過(guò)于冗雜繁多，同時(shí)在做通用性產(chǎn)品時(shí)，這種方式很難做到通用性
單側(cè)篩選是一種更通用的篩選形式，通過(guò)對(duì)于你想篩選的字段進(jìn)行勾選，勾選完成后就會(huì)出現(xiàn)篩選條件，然后選擇篩選字段、篩選操作、篩選值，一般選擇完成所有篩選后，還需要點(diǎn)擊查詢，篩選操作才算完成。
整個(gè)單側(cè)篩選，大量的篩選條件可以放置在表單的左側(cè)或者右側(cè)，通過(guò)表單縱向空間，去承載大量篩選條件。
節(jié)省空間、通用性強(qiáng)。因?yàn)樵诤芏郤aas系統(tǒng)、Paas系統(tǒng)當(dāng)中，無(wú)法針對(duì)每一個(gè)客戶進(jìn)行設(shè)計(jì)，就要考慮到系統(tǒng)通用型高，做一些大而全的功能。在每個(gè)表單也所需要定制化修改的地方很少，同時(shí)能容納的信息量可以很大。
就是在后臺(tái)系統(tǒng)當(dāng)中只有這一種篩選形式會(huì)面臨在我常用的幾種篩選的字段中，要通過(guò)不斷尋找，來(lái)滿足我的篩選需求，操作麻煩。
我們產(chǎn)品在某一次改版就將篩選由收折式修改為單側(cè)式，因?yàn)槲覀冇脩羰褂煤Y選的場(chǎng)景非常的多，用戶每次篩選都要多進(jìn)行2、3步操作，導(dǎo)致用戶進(jìn)行了大量的吐槽，后來(lái)進(jìn)行修改，將篩選順序支持手動(dòng)調(diào)整順序，用戶吐槽的次數(shù)才慢慢減少。
表頭篩選是一種復(fù)雜篩選的形式，其最開(kāi)始是來(lái)源于Excel的篩選形式。點(diǎn)擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。之后在后臺(tái)產(chǎn)品的發(fā)展中，得以借鑒過(guò)來(lái)。
可以通過(guò)表頭的點(diǎn)擊，使用戶更快捷進(jìn)入到自己的篩選條件，在通常情況下，在表單越左的數(shù)據(jù)顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場(chǎng)景基本還是得到滿足。
用戶第一次進(jìn)入系統(tǒng)很難理解這種交互形式，且在每個(gè)表頭都會(huì)有一個(gè)icon，影響用戶對(duì)于表頭的識(shí)別。
通過(guò)點(diǎn)擊篩選按鈕，展現(xiàn)出篩選彈窗，進(jìn)行篩選。這種篩選適合在篩選功能在系統(tǒng)中不是很重要的層級(jí)。最常見(jiàn)的就是Tapd，在其中篩選不是很強(qiáng)的一個(gè)功能，同時(shí)也是系統(tǒng)中十分有必要的。
是能夠在節(jié)省面積的情況下，可以進(jìn)行很復(fù)雜的篩選，同時(shí)可以支持復(fù)雜情況下的篩選
彈窗會(huì)遮擋一部分表單數(shù)據(jù)，會(huì)影響篩選人的判斷，其次篩選條件的添加也相對(duì)更加繁瑣。
在我們一系列篩選的調(diào)整過(guò)后，我們團(tuán)隊(duì)也總結(jié)了對(duì)于我們來(lái)說(shuō)更重要的條件和形式，來(lái)和大家分享探討一下。
我們認(rèn)為影響篩選控件最重要的是用戶的使用頻率，因?yàn)橛脩舻氖褂妙l率和使用方式，直接影響到我們篩選是用普通篩選or高級(jí)篩選，也會(huì)影響到篩選的形式。
篩選功能的做法，取決于我們產(chǎn)品未來(lái)是想往哪一個(gè)方向發(fā)展，如果想把功能做的強(qiáng)大，就得考慮到篩選的后續(xù)擴(kuò)展性。因此滿足實(shí)際業(yè)務(wù)也是十分重要。
在B端系統(tǒng)當(dāng)中，最可能遇見(jiàn)的就是你給用戶設(shè)計(jì)的路徑但是其實(shí)用戶根本沒(méi)有往你想的方向去操作。我們系統(tǒng)最開(kāi)始給用戶設(shè)計(jì)好了很多功能點(diǎn)，但是用戶對(duì)于這個(gè)點(diǎn)的認(rèn)知成本實(shí)在過(guò)低，也導(dǎo)致了后面系統(tǒng)功能點(diǎn)很多都被埋沒(méi)。因?yàn)樵谀阍O(shè)計(jì)好了一個(gè)功能點(diǎn)后，要適當(dāng)引導(dǎo)用戶，解釋這個(gè)功能的使用場(chǎng)景才不會(huì)讓你設(shè)計(jì)的功能被淹沒(méi)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：CE青年 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
提起用戶激勵(lì)體系你會(huì)想到什么？積分體系？簽到體系？或者是簡(jiǎn)單粗暴的現(xiàn)金優(yōu)惠？
以上都不是，今天我想和大家分享的是任務(wù)成就體系中的勛章設(shè)計(jì)。
一、什么是勛章
我們先來(lái)看看勛章的定義： 勛章，是指授給有功者的榮譽(yù)證章或者標(biāo)志。 古代歐洲為了區(qū)別在戰(zhàn)場(chǎng)上的騎士，一個(gè)名為勛章的標(biāo)志制度得以發(fā)展。每一個(gè)貴族都會(huì)設(shè)計(jì)出一個(gè)獨(dú)特的標(biāo)志，制作在他的盾牌、外衣、旗幟和印章上。（摘自百度百科）
上面這段話有三個(gè)詞語(yǔ)是重點(diǎn)，有功者、榮譽(yù)、獨(dú)特標(biāo)志。有功者反應(yīng)了勛章不是每個(gè)人都能獲得的，而榮譽(yù)則反應(yīng)了勛章是榮譽(yù)的象征，能帶給獲得者精神上的滿足。獨(dú)特標(biāo)志則區(qū)分了獲得者與其他人。
小到小時(shí)候得到的小紅花，大到奧運(yùn)會(huì)國(guó)家贏得獎(jiǎng)牌，這些都算是勛章（不同產(chǎn)品的叫法可能不同，有勛章、徽章、獎(jiǎng)?wù)碌龋?
二、勛章的作用
上面我們說(shuō)了勛章能帶給獲得者精神上的滿足，那么延伸到互聯(lián)網(wǎng)中，勛章設(shè)計(jì)的完善則能一定程度上起到滿足用戶的成就感，激勵(lì)用戶不斷使用產(chǎn)品的作用，常用在內(nèi)容類(lèi)產(chǎn)品中，如視頻類(lèi)、知識(shí)付費(fèi)類(lèi)、閱讀類(lèi)產(chǎn)品中。
但是把勛章設(shè)計(jì)運(yùn)用的最好的當(dāng)屬游戲類(lèi)產(chǎn)品了，比如王者榮耀的勛章成就體系，借助獲得難易程度不同的勛章，能使用戶自主的不斷使用產(chǎn)品，獲得高等級(jí)勛章后還會(huì)被膜拜為大神，充分滿足了用戶的虛榮心。
三、勛章頁(yè)的構(gòu)成
勛章頁(yè)大致由六部分構(gòu)成。包括勛章頁(yè)入口、勛章墻、勛章詳情說(shuō)明、進(jìn)度展示、勛章圖標(biāo)。
1.勛章頁(yè)入口
勛章入口一般有兩個(gè)位置，一是放置在個(gè)人中心頁(yè)中，還有一種則是放置在個(gè)人主頁(yè)中。個(gè)人中心頁(yè)只需點(diǎn)擊底部tab切換即可看見(jiàn)入口，而個(gè)人主頁(yè)還需用戶再點(diǎn)擊一次才可看見(jiàn)。
放置在個(gè)人中心
放置在個(gè)人中心的勛章入口大致也有兩種樣式，一種是以圖標(biāo)的形式跟隨在昵稱旁邊，另一種則是放入個(gè)人中心列表功能入口中。如下圖：
二者的選擇主要是看個(gè)人中心的主要導(dǎo)航方式，一般宮格導(dǎo)航為主的個(gè)人中心頁(yè)會(huì)采用勛章入口跟隨昵稱旁邊，列表導(dǎo)航為主的則會(huì)將入口放入列表中。
當(dāng)然，具體選擇還是看勛章功能的重要程度，比如波洞的個(gè)人中心以列表導(dǎo)航為主，但勛章入口卻是放置在頂部宮格中，我的理解是波洞的勛章功能層級(jí)較高，因此放在了更顯眼的位置。
放置在個(gè)人主頁(yè)
勛章入口多以圖標(biāo)形式跟隨昵稱放置在個(gè)人主頁(yè)中，此類(lèi)產(chǎn)品往往擁有較強(qiáng)的社交屬性，用戶擁有自己的動(dòng)態(tài)主頁(yè)，因此既能查看自己的，也能查看他人的勛章。
上圖知乎的勛章入口還將用戶擁有的勛章展示了出來(lái)，比起單個(gè)圖標(biāo)入口更能吸引用戶點(diǎn)擊進(jìn)入
2.勛章墻
點(diǎn)擊勛章入口進(jìn)入的頁(yè)面就是勛章墻了，勛章墻主要包括用戶已獲得的勛章信息以及產(chǎn)品包含的所有類(lèi)別的勛章展示。
勛章墻展示幾乎都是采用的宮格式布局，一般一行分布2~5個(gè)勛章，多以3個(gè)為主。
勛章墻中的已獲得勛章信息包括用戶總獲得的以及不同類(lèi)別勛章的單類(lèi)獲得數(shù)，顯示總獲得數(shù)的勛章墻會(huì)在頂部加入用戶的獲得信息，幫助用戶一眼識(shí)別。
在勛章墻的設(shè)計(jì)中，注意要做好獲取與未獲取勛章的區(qū)別樣式，重點(diǎn)是保證用戶能一眼識(shí)別出獲得與未獲得的勛章，多是將未獲得的勛章置灰處理。反面例子如下：
上圖KEPP中，已獲得勛章是將其正常顏色展示，而未獲得勛章采用的淺紫灰色，我一眼看過(guò)去時(shí)真的沒(méi)有反應(yīng)過(guò)來(lái)哪些是未獲得的。
3.勛章詳情說(shuō)明
勛章詳情說(shuō)明是在勛章墻展示中，點(diǎn)擊勛章后以彈窗的形式展示出來(lái)的，包括全屏彈窗與非全屏彈窗兩種展現(xiàn)形式。
全屏彈窗詳情說(shuō)明
勛章詳情說(shuō)明采用全屏彈窗能承載更多的信息，除了可以包括獲取說(shuō)明外，還可以承載獎(jiǎng)勵(lì)說(shuō)明、獲取進(jìn)度以及獲得后的分享炫耀按鈕等。
上圖中得到與咕咚的該勛章都屬于升級(jí)類(lèi)勛章，勛章本身有級(jí)別的劃分，左右切換可查看不同級(jí)別的勛章，像這樣有等級(jí)劃分的勛章采用全屏彈窗會(huì)更加直觀
非全屏彈窗詳情說(shuō)明
承載的信息較少，一般只包括簡(jiǎn)短的說(shuō)明信息，更加簡(jiǎn)潔輕量。如下圖：
知乎與開(kāi)眼都采用的非全屏圖片彈窗，視覺(jué)效果更加輕量。知乎雖然也有等級(jí)劃分類(lèi)的勛章，但由于采用的非全屏彈窗，等級(jí)切換采用的是點(diǎn)擊切換，說(shuō)明文字也更加簡(jiǎn)潔。而開(kāi)眼則直接在文字中說(shuō)明下一等級(jí)勛章，并不能直接切換查看。
4.進(jìn)度展示
需要累積獲得的以及等級(jí)劃分的勛章還需要加入獲取進(jìn)度。我匯總了3種勛章進(jìn)度展示的樣式，包括進(jìn)度條、數(shù)字進(jìn)度、文字說(shuō)明。
進(jìn)度條
以一個(gè)橫向進(jìn)度條展示在勛章詳情說(shuō)明中，能夠直觀看出當(dāng)前進(jìn)度占比，對(duì)升級(jí)進(jìn)度有一個(gè)大致的判斷，占屏比較大，適合放入全屏彈窗詳情說(shuō)明中。
上圖中咕咚進(jìn)度條只展示了進(jìn)度百分比，而波洞的進(jìn)度條同時(shí)配上文字說(shuō)明，升級(jí)進(jìn)度更加精確。
數(shù)字進(jìn)度
左邊為當(dāng)前達(dá)到數(shù)字，中間斜杠隔開(kāi)，右邊為該勛章獲取總達(dá)到數(shù)字。升級(jí)進(jìn)度精確，占屏比小，即可放入全屏彈窗詳情說(shuō)明也可放入非全屏彈窗詳情說(shuō)明。
文字說(shuō)明
文字說(shuō)明進(jìn)度直接告訴用戶還差多少具體的進(jìn)度，沒(méi)有總進(jìn)度展示，進(jìn)度也很精確，占比小，注意需要對(duì)文字進(jìn)行字?jǐn)?shù)限制。
5.勛章圖標(biāo)
勛章圖標(biāo)作為勛章設(shè)計(jì)中最重要的一環(huán)，需要UI設(shè)計(jì)師花費(fèi)很多的心思。勛章圖標(biāo)目前多為圖形圖標(biāo)，我只看到開(kāi)眼是采用的圖片類(lèi)勛章。
在設(shè)計(jì)圖形勛章時(shí)以現(xiàn)實(shí)生活中的勛章為靈感，多采用統(tǒng)一的勛章背景模板，保證整體勛章墻的視覺(jué)統(tǒng)一，便于多次復(fù)用。常用的形狀有六邊形、圓形、盾牌形狀等。
切忌在設(shè)計(jì)圖形勛章時(shí)采用復(fù)雜的背景模板，以免降低了勛章內(nèi)部主體的層級(jí)。
四、劃重點(diǎn)
本文主要為大家淺析了勛章設(shè)計(jì)的定義、作用以及勛章頁(yè)的構(gòu)成。
勛章的定義：勛章是指授給有功者的榮譽(yù)證章或者標(biāo)志；
勛章的作用：勛章能帶給獲得者精神上的滿足，一定程度上激勵(lì)用戶不斷使用產(chǎn)品；
勛章頁(yè)的構(gòu)成：包括勛章頁(yè)入口、勛章墻、勛章詳情說(shuō)明、進(jìn)度展示以及勛章圖標(biāo)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：人類(lèi)君 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
隨著跨設(shè)備跨平臺(tái)的趨勢(shì)不斷顯現(xiàn)，比如最近很火的鴻蒙，一部手機(jī)就可以完成辦公場(chǎng)景到生活?yuàn)蕵?lè)場(chǎng)景的轉(zhuǎn)化，未來(lái)B端的管理系統(tǒng)不在局限于pc端，體驗(yàn)將不斷向移動(dòng)化對(duì)齊，使B端用戶不再受時(shí)間和地點(diǎn)限制。
B端各個(gè)端口的特性：
在保證使用體驗(yàn)下。pc端、pad端、pc端的功能會(huì)是一個(gè)下放的過(guò)程，屏幕越小功能越簡(jiǎn)化。
比如有贊的美業(yè)工作臺(tái)，手機(jī)端只有宮格功能入口，PAD端除了功能入口外，把工作內(nèi)容也做了露出，PC端則展示了數(shù)據(jù)圖表、快捷功能，以及其他提升效率的入口，內(nèi)容交互更加的復(fù)雜。三端里，不僅屏幕尺寸不一樣，使用場(chǎng)景和角色也完全不同，比如PC端店長(zhǎng)使用頻次更高，用于管理店鋪查看經(jīng)營(yíng)狀況。PAD端則普通員工頻次更高，用于查看具體工作內(nèi)容，需要接待的客人。手機(jī)端更通用，所有角色所有場(chǎng)景都會(huì)使用，有可能是在店里、家里、路上所以在設(shè)計(jì)移動(dòng)端時(shí)要考慮如何在提升操作效率的同時(shí)兼容可用性。
B端的典型表單，由數(shù)據(jù)錄入和操作按鈕構(gòu)成，往細(xì)拆解的話包含1.標(biāo)題、2.標(biāo)簽、3.提示信息、4.輸入?yún)^(qū)、5操作按鈕。
標(biāo)題：表單的主題，起到說(shuō)明表單模塊的作用，尤其是在分組的表單中格外重要。
必填提示：用于區(qū)分多個(gè)表單內(nèi)容項(xiàng)的必填和非填項(xiàng)，一般使用紅色的“*”表示。
標(biāo)簽標(biāo)簽：表單內(nèi)容項(xiàng)的名稱，說(shuō)明對(duì)應(yīng)表單含義以及向用戶說(shuō)明應(yīng)該錄入信息的類(lèi)型。
提示：幫助用理解表單，最多見(jiàn)的是引導(dǎo)說(shuō)明信息和反饋信息。
輸入?yún)^(qū)：表單的核心區(qū)域，承載用戶主要的交互。
操作按鈕：完結(jié)表單操作的觸發(fā)器，用于確認(rèn)數(shù)據(jù)或者取消數(shù)據(jù)，表單越復(fù)雜按鈕也會(huì)越多樣。
大部分場(chǎng)景我們希望用戶能盡快完成表格。但在有些場(chǎng)景呢又希望用戶能放慢速度，使他們能夠深思熟慮，比如下面的三個(gè)場(chǎng)景：
1.在一些資質(zhì)審核的頁(yè)面，希望用戶能仔細(xì)填寫(xiě)。
2.小屏幕的場(chǎng)景，要求表單縱向或者橫向最小化。
3.國(guó)際本地化的需求，表單需要適應(yīng)不同的長(zhǎng)度和多種語(yǔ)言。
這張圖是醫(yī)生端注冊(cè)流程的競(jìng)品對(duì)比。他們哪種方案能更好的為用戶和產(chǎn)品服務(wù)呢？接下來(lái)我們來(lái)看下三種典型的表單，能幫助你更好的理解。
1.左對(duì)齊標(biāo)簽
優(yōu)點(diǎn)：如果用戶不熟悉表單要錄入的數(shù)據(jù)，或者是復(fù)雜內(nèi)容，左對(duì)齊會(huì)更容易些。視覺(jué)動(dòng)線會(huì)更符合人們閱讀習(xí)慣，并能節(jié)省縱向的空間。
缺點(diǎn)：長(zhǎng)標(biāo)簽會(huì)增加標(biāo)簽和輸入框的距離，導(dǎo)致延長(zhǎng)完成時(shí)間。
從馬泰奧-彭佐在2006年進(jìn)行的眼動(dòng)研究里發(fā)現(xiàn)，左對(duì)齊標(biāo)簽速度是最慢的，用戶眼動(dòng)定位的次數(shù)最多的。如果希望用戶能放慢速度，并仔細(xì)閱讀表單中的每個(gè)輸入框，左對(duì)齊會(huì)是一個(gè)很好的辦法。特別是含有大量的可選輸入框，或者陌生數(shù)據(jù)，比如像資質(zhì)認(rèn)證頁(yè)、金融申請(qǐng)頁(yè)等。
在左對(duì)齊標(biāo)簽里，內(nèi)容也有右對(duì)齊的方案，如下圖。這解決了長(zhǎng)標(biāo)簽帶來(lái)的適配問(wèn)題，使空間能更好地利用。但關(guān)聯(lián)度會(huì)降低，增加理解成本。并會(huì)導(dǎo)致眼動(dòng)距離拉長(zhǎng)，適合選擇類(lèi)的錄入方式，緩解此缺點(diǎn)。
2.頂對(duì)齊標(biāo)簽
優(yōu)點(diǎn)：有較多的橫向空間，并且閱讀效率快，對(duì)于國(guó)際化的設(shè)計(jì)或長(zhǎng)標(biāo)簽特別有用。
缺點(diǎn)：會(huì)占用較多的縱向空間。
在同一個(gè)實(shí)驗(yàn)中，標(biāo)簽到輸入框只花了50毫秒，比左對(duì)齊快了10倍。
以下是B端的典型列表，主要是信息的查看和操作?；臼怯?.卡片、2.切換篩選、3.搜索、構(gòu)成。
卡片：在移動(dòng)端列表中更多的是以卡片式的形式呈現(xiàn)，卡片利于展示信息的深度和承載更好的交互。在移動(dòng)app中我們可以大膽的嘗試使用卡片式設(shè)計(jì)，不僅信息能夠很好的突出，也能適應(yīng)多端設(shè)備的展示。
篩選：篩選對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的，它可以幫助用戶在表單茫茫數(shù)據(jù)中進(jìn)行快速的數(shù)據(jù)定位以及劃分，縮短用戶對(duì)于數(shù)據(jù)的尋找時(shí)間；
搜索：將想要查詢的信息輸入到相應(yīng)的搜索器中，用戶可直達(dá)任務(wù)目標(biāo)。
貼近場(chǎng)景的設(shè)計(jì)可以舒緩數(shù)據(jù)頁(yè)面帶來(lái)的心理壓力，擬物元素與表單的結(jié)合的呈現(xiàn)形式能夠給用戶帶來(lái)愉悅感。
如下圖的例子，途牛商旅用了差旅審批單粗細(xì)線條元素，醫(yī)鹿用了病歷本上面的釘扣，餓了么商家版模擬小票的設(shè)計(jì)。
B端典型數(shù)據(jù)頁(yè)，他們基本是由1.數(shù)據(jù)統(tǒng)計(jì)、2.可視化卡片、3.篩選、4.數(shù)據(jù)明細(xì)構(gòu)成。
數(shù)據(jù)統(tǒng)計(jì)：將用戶所需關(guān)注的重點(diǎn)摘出來(lái)，并展示和業(yè)務(wù)相關(guān)的其他數(shù)據(jù)。通常是主數(shù)據(jù)+副數(shù)據(jù)的結(jié)構(gòu)。
可視化卡片：數(shù)據(jù)分析里有一句話叫“一圖勝千言”，當(dāng)面對(duì)海量數(shù)據(jù)時(shí)（右圖），利用圖表可以幫助用戶快速理解數(shù)據(jù)含義。
而圖表是數(shù)據(jù)頁(yè)面里的重要組件，經(jīng)過(guò)圖形化、通俗化、形象化后的數(shù)據(jù)可以幫助我們直觀的理解數(shù)據(jù)。
激勵(lì)性數(shù)據(jù)設(shè)計(jì)
2008 年，為了減少電力消耗，有一家電力公司向 35,000 名客戶發(fā)送了一封帶有簡(jiǎn)單圖表的信，向客戶展示了他們和鄰居的電力消耗情況。
在圖表中，可以看到一個(gè)條形圖，代表 3 個(gè)不同組的功耗：節(jié)能的鄰居、所有鄰居和收信人的家庭。這向客戶顯示他們是否比鄰居消耗更多或更少的電力。
最后這些收到信件的客戶平均降低了 2% 的功耗 ，雖然就個(gè)人電費(fèi)而言，這似乎很小，但對(duì)所有客戶而言，這相當(dāng)于節(jié)省了大量電力和百萬(wàn)美元。從那時(shí)起，全國(guó)其他電力公司都采用了這種方法。而這種方法也叫做激勵(lì)性的數(shù)據(jù)設(shè)計(jì)。
移動(dòng)端圖表
實(shí)際執(zhí)行中，要針對(duì)具體場(chǎng)景，選擇合適的方案。比如在一個(gè)多折圖表要選曲線的還是直角的，直角能精準(zhǔn)的體現(xiàn)數(shù)據(jù)而曲線降低認(rèn)知負(fù)擔(dān)使視覺(jué)愉悅。
下圖淘特首頁(yè)設(shè)計(jì)中，需要在較少的縱向空間里設(shè)計(jì)可視化圖表，可以看出這里簡(jiǎn)化了y軸的標(biāo)簽以及取值范圍，最后反應(yīng)到圖表上會(huì)是一個(gè)較平滑的曲線。而這種設(shè)計(jì)方案上更多的是感知價(jià)值而不是精準(zhǔn)的數(shù)據(jù)，這跟激勵(lì)性的數(shù)據(jù)設(shè)計(jì)有相同的作用。
工作臺(tái)是一個(gè)幫助用戶快速掌握工作進(jìn)度及進(jìn)入工作狀態(tài)的導(dǎo)航頁(yè)面。也是用戶感知產(chǎn)品價(jià)值的重要門(mén)面；所以首頁(yè)工作臺(tái)是體驗(yàn)規(guī)范和視覺(jué)風(fēng)格的核心場(chǎng)景。
我們來(lái)觀察下醫(yī)蝶谷為什么這樣改版。從原型的變化可以發(fā)現(xiàn)，這次改版更多的是去滿足業(yè)務(wù)上的變化，我認(rèn)為有以下幾點(diǎn)
業(yè)務(wù)優(yōu)化：
1.這樣的改版體現(xiàn)了醫(yī)蝶谷在業(yè)務(wù)策略上的變化。觀察老版本我們發(fā)現(xiàn)，極速問(wèn)診占了首頁(yè)的4/10。這個(gè)階段更多是考慮患者訂單響應(yīng)時(shí)間，所以接單較慢的新手醫(yī)生體驗(yàn)較差。
2.將極速問(wèn)診的內(nèi)容進(jìn)行收起，醫(yī)生搶單的成本更高，并且將原本tab的問(wèn)診整合進(jìn)了首頁(yè)。使醫(yī)生在首屏就可以快速掌握工作進(jìn)度及進(jìn)入工作狀態(tài)。
視覺(jué)優(yōu)化：
1.老版本的快捷工具圖標(biāo)顏色更豐富容易被用戶發(fā)現(xiàn)，但是在醫(yī)生常用的工作臺(tái)里，又顯得有些用力過(guò)猛，新版本弱化常用功能圖標(biāo)的視覺(jué)，讓醫(yī)生關(guān)注到更有價(jià)值的信息上。
2.在新版的首頁(yè)里，因?yàn)闃O速問(wèn)診改變了位置，我們可以在設(shè)計(jì)上做一些差異化的改變，去適應(yīng)新功能的承載。
前面提到了B端的表單、列表、數(shù)據(jù)頁(yè)面、工作臺(tái)的案例。為了表達(dá)透徹下面我跟大家分享下我在工作中碰到的案例。
醫(yī)生這個(gè)職業(yè)對(duì)我們來(lái)說(shuō)熟悉又陌生，在我們生活里每過(guò)一段時(shí)間幾乎都會(huì)去和醫(yī)生打交道。醫(yī)生一上午可能就有多達(dá)幾十位患者就診，平均到每位患者僅有3～4分鐘的診斷時(shí)長(zhǎng)。在這短暫的時(shí)間內(nèi)，要完成病癥的診斷處置、病歷填寫(xiě)，還要面對(duì)來(lái)自病患各種問(wèn)題，難度可想而知。而這種場(chǎng)景映射到互聯(lián)網(wǎng)上也是同樣的，何況大部分還是兼職醫(yī)生。所以我們要做的是讓產(chǎn)品更易用，降低流程的復(fù)雜度。
通過(guò)醫(yī)生調(diào)研發(fā)現(xiàn)，醫(yī)院排班并不按照周循環(huán)，平常臨時(shí)突發(fā)事情多。所以一日的排班里，時(shí)間會(huì)有一定的跨度。
舉個(gè)例子，大家去看病時(shí)候時(shí)候一定遇到一個(gè)場(chǎng)景，是醫(yī)生讓你去拿報(bào)告，在回來(lái)的時(shí)候你不是重新排隊(duì)的狀態(tài)，醫(yī)生需要在這時(shí)候?qū)δ氵M(jìn)行干預(yù)。
設(shè)計(jì)應(yīng)當(dāng)順應(yīng)醫(yī)生的工作特點(diǎn)，考慮在特殊場(chǎng)景上的使用，我們提出的以下策略。
精簡(jiǎn)布局，提升屏效
1.在前文B端列表有提到，列表頂對(duì)齊的方式用戶閱讀起來(lái)效率是最高的。所以這里將時(shí)間標(biāo)簽調(diào)整到內(nèi)容上方，同時(shí)調(diào)整卡片里任務(wù)名稱和時(shí)間的權(quán)重。
2.優(yōu)化前任務(wù)排序結(jié)構(gòu)是按時(shí)間規(guī)律往下排布，一小時(shí)占用一行。因?yàn)獒t(yī)生平日事情多突發(fā)，排期上無(wú)法按照一定的規(guī)律。如果需要查看下午、晚上的排期交互步驟則會(huì)被增長(zhǎng)。所以在設(shè)計(jì)上將無(wú)任務(wù)的時(shí)間標(biāo)簽進(jìn)行收縮，這樣在首屏也能看到在晚上的排期狀況。
利用色彩，少即是多
色彩是最具本質(zhì)影響力的表現(xiàn)因素，在設(shè)計(jì)即簡(jiǎn)單又重要。研究表明，人們只需 90 秒就能對(duì)一種產(chǎn)品做出下意識(shí)的判斷，而其中高達(dá) 60%以上的判斷僅基于顏色。
排期表借助色彩關(guān)系，提高用戶查找效率和傳遞更多的信息。如下圖一開(kāi)始的想法是按照患者端的邏輯，依據(jù)業(yè)務(wù)圖標(biāo)進(jìn)行區(qū)分，但兩端統(tǒng)一要考慮的因數(shù)比較多，不適合復(fù)用。最后考慮采用顏色標(biāo)簽的形式進(jìn)行區(qū)分
優(yōu)化路徑，去繁化簡(jiǎn)
從前期的調(diào)研的結(jié)果來(lái)看，醫(yī)生的排班是無(wú)規(guī)律多突發(fā)的，會(huì)出現(xiàn)在一天里添加多個(gè)不連續(xù)時(shí)段的場(chǎng)景。所以我們針對(duì)醫(yī)生的排班的設(shè)置做了以下優(yōu)化
優(yōu)化前添加一個(gè)時(shí)段需要4步，添加一天不連續(xù)的3個(gè)時(shí)段需要3x4=12步，需要用戶判斷復(fù)雜的邏輯，而優(yōu)化后添加一個(gè)時(shí)段需要3步，添加一天不連續(xù)3個(gè)時(shí)段需要4x1=4步，邏輯簡(jiǎn)單明了
這是醫(yī)生端其中一個(gè)案例，可以看到一個(gè)視覺(jué)、交互上的優(yōu)化都是針對(duì)醫(yī)生實(shí)際的工作場(chǎng)景去設(shè)計(jì)的，在醫(yī)生這個(gè)行業(yè)，有著很大的行業(yè)壁壘，需要我們逐一去調(diào)研給出設(shè)計(jì)方案。這也是B端設(shè)計(jì)中需要重點(diǎn)關(guān)注的地方。
代碼框架
B端設(shè)計(jì)師最常接觸的設(shè)備就是PC，而要做移動(dòng)B端基本上也是會(huì)通過(guò)H5、RN等技術(shù)實(shí)現(xiàn)。這樣方便多平臺(tái)復(fù)用，下面我以web為例子，講述我們?cè)撊绾卫斫馇岸说捻?yè)面結(jié)構(gòu)
提升開(kāi)發(fā)效率
設(shè)計(jì)的過(guò)程中，好的工作流程可以幫助開(kāi)發(fā)節(jié)約工時(shí)。如果公司有交互的基本是能做到提前開(kāi)發(fā)的。沒(méi)有的話，我們最好有框架思維，先搭好框架，截圖給開(kāi)發(fā)參考，開(kāi)發(fā)會(huì)根據(jù)你提供截圖，進(jìn)行基礎(chǔ)模塊搭建，最后在根據(jù)標(biāo)注文檔進(jìn)行css上面的調(diào)整。
降低服務(wù)器成本
我們將切圖給予到開(kāi)發(fā)以后，開(kāi)發(fā)會(huì)將其傳到服務(wù)器上面。
用戶在訪問(wèn)我們的頁(yè)面時(shí)其實(shí)是相當(dāng)于發(fā)送一次請(qǐng)求，將服務(wù)器里面的圖片下載下來(lái)，如果圖片的數(shù)量太多或者文件太大，會(huì)占用大量用戶的帶寬帶來(lái)極差的體驗(yàn)。
而服務(wù)器的空間也是需要公司付費(fèi)購(gòu)買(mǎi)的，所以盡量一張圖在多處使用。如果是非常高清的圖片，可以將圖片里的人物切出來(lái)，在不同的場(chǎng)景去復(fù)用。實(shí)測(cè)一張4k的官網(wǎng)banner，人物單獨(dú)切出進(jìn)行復(fù)用可以減少banner50%的大小。
占位符
在一些需要實(shí)現(xiàn)文本換行的效果里，開(kāi)發(fā)很難去通過(guò)去寫(xiě)間距，因?yàn)闀?huì)有換行的關(guān)系。一般會(huì)通過(guò)占位符的方式去實(shí)現(xiàn)，而在占位符里有分為好幾種，下圖我列舉了最常用的三種占位，分別能實(shí)現(xiàn)三種不同的間距。
字重
字重的功能是為了在文本種突出重點(diǎn)強(qiáng)調(diào)內(nèi)容，在文本中常采用3種規(guī)格的字重（regular，Medium，Smlbold）。但在h5的環(huán)境里，只有字體標(biāo)準(zhǔn)和粗的還原效果。在標(biāo)注文件里也能發(fā)現(xiàn)標(biāo)準(zhǔn)體和粗體在標(biāo)注文件里都會(huì)顯示字重為500，而500在前端里的顯示和標(biāo)準(zhǔn)體是是沒(méi)有區(qū)別的，我們需要寫(xiě)好規(guī)則，和開(kāi)發(fā)約定，以后只要看到medium就寫(xiě)成600字重。
如何推動(dòng)規(guī)范
通常在一個(gè)版本我們就算把開(kāi)發(fā)大佬的頭搞禿了，都很難吧所有規(guī)范改完，因此我們需要將自己作為PM的角色，針對(duì)現(xiàn)有的需求進(jìn)行拆分，并排出優(yōu)先級(jí)、分版本迭代進(jìn)產(chǎn)品，并同步需求。
另外在推動(dòng)規(guī)范的過(guò)程中，有可能會(huì)出現(xiàn)上圖的情況。這里可以使用表格的方式進(jìn)行推動(dòng)上線，可以好的避免以下情況。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：丸子說(shuō)設(shè)計(jì) 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
其實(shí)說(shuō)到設(shè)計(jì)的價(jià)值，它是非常大的，可以從很多不同的維度去出發(fā)，每一個(gè)小點(diǎn)都可以作為閃亮的發(fā)光點(diǎn)去助力產(chǎn)品獲得價(jià)值，并且現(xiàn)在互聯(lián)網(wǎng)時(shí)代，多元化思維越發(fā)重要，我們不僅需要在本職范圍內(nèi)去發(fā)光，還需要拓展更多的能力。
但是我也發(fā)現(xiàn)目前普遍存在一個(gè)很?chē)?yán)重的問(wèn)題，有很多小伙伴設(shè)計(jì)一個(gè)紅包也能扯出一堆增長(zhǎng)模型，這也是因?yàn)殡S著全鏈路、全棧設(shè)計(jì)的噱頭出現(xiàn)，以及一系列的模板化思維體系所影響。
設(shè)計(jì)思維本沒(méi)有對(duì)錯(cuò)，但是需要合理的運(yùn)用，并且將設(shè)計(jì)點(diǎn)需要落在實(shí)際的內(nèi)容上，像我們常見(jiàn)的用戶畫(huà)像、體驗(yàn)地圖、情緒版等等，那么我們應(yīng)該如何有效的將設(shè)計(jì)點(diǎn)落實(shí)在內(nèi)容上呢？
眾所周知，在整個(gè)產(chǎn)品設(shè)計(jì)中，視覺(jué)感受是最直觀的，也是我們作為一名UI設(shè)計(jì)師能直接去影響的，而視覺(jué)層面的內(nèi)容基本可以劃分為六個(gè)點(diǎn)，也就是我們常常所說(shuō)的 - 形色字構(gòu)質(zhì)動(dòng)
在很多的設(shè)計(jì)運(yùn)用場(chǎng)景中，這六點(diǎn)都是作為比較基礎(chǔ)的內(nèi)容，像一些視覺(jué)語(yǔ)言制定上，而產(chǎn)品設(shè)計(jì)的過(guò)程中，縱使有再多的方法論和思維體現(xiàn)，最終都需要通過(guò)視覺(jué)的表現(xiàn)，所以我打算利用這幾點(diǎn)去深入挖掘，也許可以找到更多的設(shè)計(jì)發(fā)力點(diǎn)。
形也就是設(shè)計(jì)中最基礎(chǔ)的圖形元素，在平面和品牌設(shè)計(jì)中經(jīng)?？梢砸?jiàn)到，像一些點(diǎn)線面、圖形構(gòu)成等等，而回到產(chǎn)品設(shè)計(jì)中呢，最典型的形就是我們經(jīng)常見(jiàn)到的圖標(biāo)，那除此之外，形還有哪些體現(xiàn)方式呢？
圖形的設(shè)計(jì)表現(xiàn)中，我第一個(gè)聯(lián)想到的就是插畫(huà)，但是插畫(huà)的類(lèi)型和使用方式也分為很多種。
首先我們先設(shè)想一個(gè)場(chǎng)景，當(dāng)我們接觸到一個(gè)新鮮的事物時(shí)，我們首先需要快速的了解他，我們可以通過(guò)產(chǎn)品說(shuō)明書(shū)、產(chǎn)品結(jié)構(gòu)圖，場(chǎng)景使用模擬等不同的方式來(lái)表現(xiàn)。
因此在一些服務(wù)頁(yè)面或新功能介紹中，都會(huì)適當(dāng)?shù)娜谌牍δ懿瀹?huà)，而這種表現(xiàn)形式可以使得界面展示更直觀，快速的讓用戶理解所描繪的功能含義，減少用戶學(xué)習(xí)成本。
像一些頁(yè)面中還可以利用場(chǎng)景插畫(huà)去表現(xiàn)，不僅可以打造內(nèi)容的差異性，還可以快速讓用戶融入到場(chǎng)景中，進(jìn)一步提升用戶的情感體驗(yàn)。
品牌設(shè)計(jì)的目的就是為了利用圖形化的元素，去加強(qiáng)用戶的記憶，而隨著產(chǎn)品發(fā)展成熟，為了可以非常有效的去強(qiáng)化品牌，形成產(chǎn)品間的差異性，設(shè)計(jì)在表現(xiàn)層可以利用不同的形式去強(qiáng)化品牌。
設(shè)計(jì)表現(xiàn)上可以賦予產(chǎn)品非常明確的設(shè)計(jì)風(fēng)格，例如抖音的故障風(fēng)格，在圖標(biāo)、插畫(huà)、活動(dòng)頁(yè)面都有很好的延展，這也賦予了很深的產(chǎn)品印象，甚至有很大一部分用戶看到故障風(fēng)格就會(huì)聯(lián)想到抖音。
除此之外也可以利用品牌元素進(jìn)行一定的延展設(shè)計(jì)，像Logo圖形可以用到很多的圖標(biāo)和默認(rèn)圖上，或者也可以使用品牌形象，在一些界面的提示信息、內(nèi)容引導(dǎo)、以及一些插畫(huà)繪制上，都可以進(jìn)行有效的融入，進(jìn)一步達(dá)到品牌延展的功能。
那么說(shuō)到延展，其實(shí)我們也可以針對(duì)一種元素進(jìn)行適當(dāng)?shù)难诱?，將所需要體現(xiàn)的內(nèi)容進(jìn)行強(qiáng)滲透，從而進(jìn)一步打造內(nèi)容的專(zhuān)屬調(diào)性，以及強(qiáng)化用戶的心智。
下面的案例來(lái)自攜程精選榜單，而在整個(gè)入口、詳情頁(yè)，均采用鉆石元素貫穿到整個(gè)頁(yè)面當(dāng)中，不僅可以使得畫(huà)面更加具有視覺(jué)沖擊力，也可以使得鉆石品質(zhì)的氛圍在頁(yè)面中多次露出，進(jìn)而加深頁(yè)面品質(zhì)感。
圖形的表現(xiàn)還有一個(gè)非常重要的內(nèi)容體現(xiàn)，那就是數(shù)據(jù)圖表。在一些工具型或B端產(chǎn)品中，都會(huì)有著大量數(shù)據(jù)，而為了讓產(chǎn)品使用更高效，我們可以利用這種形式來(lái)展示。
但每一個(gè)結(jié)構(gòu)不同的圖表，所側(cè)重的功能都是不一樣的，有的偏向于于數(shù)據(jù)對(duì)比，有的偏向于連續(xù)變化數(shù)據(jù)，有的偏向于占比情況等等，因此在使用的過(guò)程中需要區(qū)分內(nèi)容的側(cè)重以及用戶對(duì)數(shù)據(jù)使用的傾向。
在現(xiàn)實(shí)中，顏色賦予了這個(gè)世界繽紛多彩，它是我們?nèi)庋圩钪庇^的感受。在設(shè)計(jì)中，顏色是尤為關(guān)鍵的一部分，它賦予了內(nèi)容不同的表現(xiàn)形式。
顏色的學(xué)問(wèn)也比較廣泛，除了我們常說(shuō)的色彩關(guān)系、顏色搭配等等一系列之外，色彩上到心理學(xué)、下到用戶體驗(yàn)，涉及的范圍十分全面，那接下來(lái)我們就來(lái)感受一下色彩的美妙吧～
生活中有著不同的顏色，例如黃昏與清晨、深夜與極光，都有著不同的色彩傾向。除此之外，色彩心理學(xué)中介紹，不同的顏色給予用戶不同的心理感受。
例如我們常常所說(shuō)的金色表示尊貴，這就好比現(xiàn)實(shí)生活中的金銀銅牌，他們利用不同的顏色去體現(xiàn)內(nèi)容的品質(zhì)，我們恰好可以利用這種顏色運(yùn)用到會(huì)員、勛章等內(nèi)容中，去凸顯會(huì)員的尊享感、情感化，進(jìn)一步強(qiáng)化用戶的身份感知。
顏色的感受也可以利用到全局的設(shè)計(jì)配色上，我相信大家肯定都非常熟悉前段時(shí)間非?；鸨陌岛谀Ｊ剑@就是利用不同的顏色來(lái)打造特殊的模式，而暗黑模式可以使得用戶在黑夜也能舒適的使用產(chǎn)品，并且一定程度上節(jié)約手機(jī)的電耗。
但不是所有的深色系產(chǎn)品都是暗黑模式，我們也可以利用這種顏色搭配打造不同的產(chǎn)品氛圍與特色。例如抖音、MOO音樂(lè)等等。
并且隨著互聯(lián)網(wǎng)的發(fā)展，用戶群體逐漸龐大，其中也有部分身體有局限的用戶，對(duì)于他們來(lái)說(shuō)更加迫切通過(guò)互聯(lián)網(wǎng)獲取信息，因此越來(lái)越多大公司注重到這一方向，而這也是我們作為一名設(shè)計(jì)師，更應(yīng)該去優(yōu)化的方向。
可以采用無(wú)障礙色系，以及顏色的色差處理，針對(duì)性的服務(wù)于色盲和色弱群體，使得他們可以在信息閱讀上更符合他們的習(xí)慣，從而進(jìn)一步打造更人性化的產(chǎn)品體驗(yàn)。
色彩搭配講究顏色統(tǒng)一、協(xié)調(diào)，在一些界面中，我們可以利用這種色彩技巧去營(yíng)造氛圍，可以有效的提高界面沉浸感，但是產(chǎn)品中由于內(nèi)容的差異無(wú)法固定顏色，而這也會(huì)導(dǎo)致顏色統(tǒng)一性較難處理，因此可以利用代碼的能力判斷封面色彩傾向，從而進(jìn)行填色，例如豆瓣app。
不僅如此，我們也會(huì)市場(chǎng)看到頭部背景圖和banner圖的色彩也會(huì)統(tǒng)一處理，這是單獨(dú)配置了一張背景圖，從而達(dá)到頁(yè)面頭部的協(xié)調(diào)性。
字體在設(shè)計(jì)中占有很重要的一部分，在UI設(shè)計(jì)中也是最為關(guān)鍵的信息傳遞載體之一，而關(guān)于字體的內(nèi)容也是十分廣泛的，下面我將從字體排版、字體設(shè)計(jì)和字體內(nèi)容三個(gè)方向來(lái)分享我的心得。
字體排版中的字體行高、間距、段落等等，這些都是一名設(shè)計(jì)師必須去掌握的基礎(chǔ)，但是有一些看似簡(jiǎn)單的規(guī)則，卻常常會(huì)被忽略。
例如下面案例中的結(jié)尾標(biāo)點(diǎn)符號(hào)在首，這個(gè)是避首位法則中最關(guān)鍵的內(nèi)容，那為了解決這種方式，我們可以利用「推出式避頭尾」，這也是目前主流的方式之一，利用這種換行的形式避免問(wèn)題，但是往往會(huì)形成句尾參差不齊。
因此我們可以利用「優(yōu)先推入式」標(biāo)點(diǎn)擠壓的方式，將標(biāo)點(diǎn)符號(hào)進(jìn)行空間擠壓，這樣可以在很大程度上確保文字在合適的版心內(nèi)整齊一致。
空格是我們平時(shí)接觸最多的一種字符了，常使用與內(nèi)容分割中，但是在排版中有很多場(chǎng)景也會(huì)用到空格。
例如英文排版中的點(diǎn)號(hào)后面需要加空格，不然會(huì)導(dǎo)致語(yǔ)句之間過(guò)于擁擠，而中英文結(jié)合的時(shí)候，之間也是需要空格進(jìn)行分割處理，除此之外中文和數(shù)字之間也是如此。
字體的類(lèi)型分為很多種，而常規(guī)的界面信息展示中，一般都采用無(wú)襯線字體，但個(gè)別產(chǎn)品利用特殊字體去傳遞產(chǎn)品的氣質(zhì)，例如閱讀產(chǎn)品中采用襯線字體。
除此之外， 大廠也紛紛設(shè)計(jì)屬于自己的專(zhuān)屬字體，通過(guò)這樣的方式去強(qiáng)化自身的品牌感。
一年前的MIUI11版本更新，最重磅的內(nèi)容即是推出動(dòng)態(tài)字體，用戶可以自由選擇字體粗細(xì)，同時(shí)為了讓界面的美觀度及文本識(shí)別性不會(huì)被破壞掉。
既然聊到字體，那我們順便再來(lái)談?wù)劷诒容^火的微文案，雖說(shuō)內(nèi)容聽(tīng)起來(lái)側(cè)重于文案策劃，但是其目的是為了優(yōu)化用戶體驗(yàn)，甚至提高轉(zhuǎn)化率等等，那么作為一名設(shè)計(jì)師，我們更應(yīng)該去關(guān)注這樣的內(nèi)容。
而微文案的體現(xiàn)也分為兩個(gè)部分，例如下圖中所展示的情感文案，百度網(wǎng)盤(pán)的會(huì)員到期提示，擬用“藏頭詩(shī)”的形式，渴望留住用戶。
除了上面所描述情感文案外，我們還可以利用文案內(nèi)容來(lái)影響用戶行為，往往是這種越細(xì)節(jié)的地方越是存在著成就或破壞用戶體驗(yàn)和轉(zhuǎn)化率的因素，而這些文案一般出現(xiàn)于，提示文案，引導(dǎo)文案，彈窗文案等等，不僅可以解決用戶的疑惑，還能進(jìn)一步引導(dǎo)操作。
說(shuō)到結(jié)構(gòu)，我們一般都會(huì)聯(lián)想到用戶體驗(yàn)五要素中的結(jié)構(gòu)層，他在產(chǎn)品設(shè)計(jì)中更多體現(xiàn)于信息布局和內(nèi)容結(jié)構(gòu)布局，而對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)，更多的感覺(jué)就好像畫(huà)面中的布局與排版。
結(jié)構(gòu)的內(nèi)容相對(duì)來(lái)說(shuō)還是比較廣泛的，我主要是圍繞界面布局來(lái)進(jìn)行分析，講一些我覺(jué)得還不錯(cuò)的優(yōu)秀案例，希望從這幾個(gè)角度出發(fā)，可以帶給大家一些啟發(fā)。
場(chǎng)景化設(shè)計(jì)是體驗(yàn)設(shè)計(jì)中較好的發(fā)力點(diǎn)，也是我最近一直在研究的方向，后續(xù)有空我會(huì)單獨(dú)寫(xiě)一篇文章再進(jìn)行深入分析?？偟膩?lái)說(shuō)呢，場(chǎng)景化設(shè)計(jì)分為多個(gè)側(cè)重點(diǎn)，今天分享的內(nèi)容主要圍繞著用戶分層，為不同的用戶設(shè)計(jì)。
像我們常見(jiàn)的一些首頁(yè)布局中，其實(shí)有也簡(jiǎn)單的分層，我們可以根據(jù)用戶不同的目的來(lái)進(jìn)行布局拆分。
下面的案例從上到下依次為，目的明確的搜索用戶、分類(lèi)明確的用戶以及只想隨便看看的用戶，這樣的話，可以有效的服務(wù)與不同用戶的目的，也可以快速實(shí)現(xiàn)流量分發(fā)的作用。
而這兩個(gè)界面都屬于功能服務(wù)類(lèi)界面，用戶去完成某件事的行為也可能會(huì)存在差異，所以我們也可以對(duì)于功能進(jìn)行合適的分層布局。
下面的案例從上倒下依次為，想快速申請(qǐng)貸款或者快速完成任務(wù)獲取現(xiàn)金的用戶，我們提供了直接操作區(qū)域，并且置于頭部進(jìn)行業(yè)務(wù)屬性強(qiáng)化，中間融入了更多的分類(lèi)與內(nèi)容引導(dǎo)，進(jìn)一步激發(fā)用戶的興趣，最后可以再通過(guò)不同的形式適當(dāng)?shù)臏p少用戶顧慮，例如優(yōu)惠券的福利（強(qiáng)化申請(qǐng)貸款），為新用戶提供發(fā)帖示例（確保社區(qū)的內(nèi)容品質(zhì)）
雖然兩個(gè)界面的內(nèi)容差異較大，但是結(jié)構(gòu)拆分的方式以及目的都是大同小異的，主要還是為了滿足不同行為的用戶，進(jìn)一步輔助他們完成功能服務(wù)。
而關(guān)于用戶分層的場(chǎng)景設(shè)計(jì)中，我們還可以區(qū)分用戶不同的狀態(tài)/身份來(lái)對(duì)界面進(jìn)行差異化布局，下面的案例來(lái)自于百度網(wǎng)盤(pán)會(huì)員界面。
我們都了解會(huì)員他分為很多不同的階段，而不同階段的用戶，對(duì)于內(nèi)容的關(guān)注上也存在很大的差異的，我們可以從這個(gè)角度出發(fā)，區(qū)分用戶的會(huì)員狀態(tài)，進(jìn)一步來(lái)進(jìn)行差異化設(shè)計(jì)。從而有效的提高不同階段用戶的行為決策。
論最出色的界面布局結(jié)構(gòu)，那滴滴的 xpanel 必定讓人印象深刻，它是一個(gè)將卡片附著于第一信息架構(gòu)層級(jí)上，內(nèi)容上分為“消息卡片”“主體卡片”“拓展卡片”三個(gè)維度，通過(guò)這種方式將一屏內(nèi)搶占的空間通過(guò)簡(jiǎn)易的交互模式補(bǔ)償回來(lái)了，這樣既不打破用戶的核心體驗(yàn)，同時(shí)又增強(qiáng)了運(yùn)營(yíng)、功能的玩法與拓展。
所以我們會(huì)發(fā)現(xiàn)在大部分的打車(chē)、導(dǎo)航產(chǎn)品中，均會(huì)采用這樣的結(jié)構(gòu)布局，這也是對(duì)特定場(chǎng)景垂直領(lǐng)域的深耕和挖掘，尋找“接觸點(diǎn)”，幫助獲取更多的功能、內(nèi)容、服務(wù)，實(shí)現(xiàn)業(yè)務(wù)的“有效增長(zhǎng)”。
而對(duì)于一個(gè)設(shè)計(jì)點(diǎn)，在歷經(jīng)了一段時(shí)間的發(fā)展后，也演變出了一系列的其他內(nèi)容，我從這個(gè)點(diǎn)深入出發(fā)，圍繞著內(nèi)容和布局進(jìn)行延展。
眾所周知，產(chǎn)品和運(yùn)營(yíng)都希望我們能在有限的空間中去展示更多的信息，并且有效的給其他功能進(jìn)行導(dǎo)流，因此我們可以根據(jù)長(zhǎng)尾效應(yīng)，在無(wú)限長(zhǎng)的信息流當(dāng)中，利用不同的卡片布局，給予不同的活動(dòng)、功能進(jìn)行導(dǎo)流。
上面所說(shuō)到的xpanel，是將卡片附著與信息之上，跟著這個(gè)思路發(fā)展，我們便產(chǎn)生了下圖所示中的半模態(tài)卡片布局，雖然追波之前出現(xiàn)一大批疊上疊上疊中疊的布局，但通過(guò)線上的實(shí)際使用最終發(fā)現(xiàn)，疊一層才是比較合理的方式，而這種布局有著良好的空間收納能力與信息拓展能力。
質(zhì)感是設(shè)計(jì)師在表現(xiàn)的時(shí)候最直觀的體現(xiàn)，也可以稱為設(shè)計(jì)風(fēng)格，但風(fēng)格近幾年間也發(fā)生了很大的變化，從起初的擬物到扁平，而最近也有很多不同“流派”的質(zhì)感表現(xiàn)，下面我將舉例給大家欣賞一番。
前段時(shí)間流行了一段時(shí)間的新擬態(tài)，一度被扣上有望成為未來(lái)趨勢(shì)主流的設(shè)計(jì)風(fēng)格，但由于質(zhì)感表現(xiàn)上細(xì)節(jié)過(guò)多，影響信息內(nèi)容，并且局限性太大，因此并沒(méi)有被廣泛流傳，但是在視覺(jué)設(shè)計(jì)上，是一個(gè)不錯(cuò)的設(shè)計(jì)表現(xiàn)。
磨砂玻璃的質(zhì)感表現(xiàn)其實(shí)很早很早在iOS的界面設(shè)計(jì)中就已經(jīng)存在，但當(dāng)時(shí)并沒(méi)有廣泛普及，而最近這種風(fēng)格又以一種全新的姿態(tài)回到我們的視線中，他給我們最直觀的感受就是虛虛實(shí)實(shí)。
在用戶界面中，這種虛實(shí)的變化可以有效的創(chuàng)建視覺(jué)層次結(jié)構(gòu)，增加自然精心的細(xì)節(jié)，并且在多復(fù)雜內(nèi)容中能讓用戶全面感知與處理信息，有效傳達(dá)信息，讓信息可閱讀、易閱讀。
隨著大屏手機(jī)的興起，單屏顯示高度也明顯增高，而大部分頁(yè)面內(nèi)容并不能占據(jù)一屏空間，因此利用設(shè)計(jì)手法去強(qiáng)化頁(yè)面頭部，除了元素裝飾外，就是這種淡淡的色彩漸變效果，起初只運(yùn)用于少部分頁(yè)面中，但慢慢的這種效果開(kāi)始流行起來(lái)，越發(fā)廣泛。
動(dòng)效設(shè)計(jì)，顧名思義就是動(dòng)起來(lái)的效果，這種表現(xiàn)形式使得靜態(tài)的頁(yè)面可以更加靈活的動(dòng)起來(lái)，不僅可以使得操作體驗(yàn)更加順暢，也可以在某種程度上吸引、引導(dǎo)用戶。
在動(dòng)效的編排中，轉(zhuǎn)場(chǎng)是非常關(guān)鍵的一部分，我之前也專(zhuān)門(mén)寫(xiě)過(guò)一篇《交互動(dòng)效-轉(zhuǎn)場(chǎng)的那些事兒》，感興趣的朋友可以再碰個(gè)場(chǎng)，支持下。
用戶操作進(jìn)入新頁(yè)面后，通常會(huì)比較關(guān)注入場(chǎng)元素，像一些金融產(chǎn)品、數(shù)據(jù)圖表，都會(huì)采用短暫的動(dòng)態(tài)效果，強(qiáng)化元素的展示效果，進(jìn)一步吸引用戶關(guān)注數(shù)據(jù)與內(nèi)容。
在很多優(yōu)秀的設(shè)計(jì)網(wǎng)站上，我們可以發(fā)現(xiàn)大多數(shù)交互動(dòng)效都是對(duì)持續(xù)元素進(jìn)行特殊處理，他們不僅可以讓動(dòng)效更加特別，還可以提高產(chǎn)品的流暢度。
例如下面的案例，前后頁(yè)面的內(nèi)容關(guān)系比較大，因此操作后可以采用持續(xù)效果，進(jìn)一步引導(dǎo)用戶的視線，提高視覺(jué)體驗(yàn)，強(qiáng)化交互流暢感。
在整個(gè)動(dòng)效編排中，除了關(guān)注入場(chǎng)和持續(xù)元素之外，停留元素也是非常值得關(guān)注且可以深入打磨的內(nèi)容。
例如下面的案例，在整個(gè)搜索體驗(yàn)的鏈路中，我們可以發(fā)現(xiàn)搜索框提示文字、輸入的單詞等等均在進(jìn)行了停留處理，確保在頁(yè)面切換時(shí)，減少用戶的視覺(jué)跳轉(zhuǎn)，可以有效提供用戶的專(zhuān)注度，打造更加輕松的體驗(yàn)。
產(chǎn)品設(shè)計(jì)中都希望在足夠的空間內(nèi)可以展示更多的信息，但這樣往往會(huì)帶來(lái)信息過(guò)載的問(wèn)題，因此我們需要在設(shè)計(jì)的過(guò)程中對(duì)信息展示進(jìn)行區(qū)分，利用行動(dòng)觸發(fā)結(jié)合動(dòng)效的形式，輔助信息布局更合理。
下圖的案例來(lái)自vivo全新的原子隨身聽(tīng)，利用現(xiàn)實(shí)生活中音樂(lè)播放器的樣式，將同類(lèi)app進(jìn)行收納，完美的體現(xiàn)了，在較小的空間布局下如何展示更多的內(nèi)容。
與此同時(shí)也會(huì)發(fā)現(xiàn)很多產(chǎn)品中利用容器來(lái)承載信息，典型的案例就是FAB按鈕，用戶操作后再利用動(dòng)效的形式進(jìn)行反饋，其實(shí)和上面的相差不大，只不過(guò)他屬于不同信息共用同一區(qū)域。
網(wǎng)頁(yè)端有一個(gè)不同于移動(dòng)端的交互，那就是hover，因此我們可以利用這種交互方式，去處理信息的重要層級(jí)，然后根據(jù)用戶的操作再進(jìn)行詳細(xì)露出，很大程度上優(yōu)化了信息空間展示。
隨著產(chǎn)品體量越來(lái)越大，功能繁多的同時(shí)，頁(yè)面結(jié)構(gòu)也變得十分復(fù)雜，為了確保用戶體驗(yàn)過(guò)程中，更清楚頁(yè)面層級(jí)，以及操作后的流程，所以我們可以通過(guò)動(dòng)效合理安排交互流程，助力用戶的舒適體驗(yàn)。
我之前也專(zhuān)門(mén)寫(xiě)過(guò)一篇《交互流程中的三大重點(diǎn)》，感興趣的朋友可以再碰個(gè)場(chǎng)，支持下。
利用動(dòng)效的形式，提升用戶在交互流程中的操作預(yù)知，例如下圖的分類(lèi)圖表，充分的體現(xiàn)內(nèi)容的含義，進(jìn)一步強(qiáng)化用戶操作前的預(yù)知性。
在一些結(jié)構(gòu)復(fù)雜的頁(yè)面中，我們可以通過(guò)合理安排交互動(dòng)效，轉(zhuǎn)場(chǎng)方式、狀態(tài)反饋等等一系列的設(shè)計(jì)，有效的對(duì)界面層級(jí)路徑梳理。
其實(shí)設(shè)計(jì)師的發(fā)力點(diǎn)不單單只是我們平時(shí)看到的產(chǎn)品分析、用戶畫(huà)像、體驗(yàn)地圖，其實(shí)從設(shè)計(jì)的角度出發(fā)，也有很多價(jià)值點(diǎn)，我們作為一名設(shè)計(jì)師，更應(yīng)該根據(jù)產(chǎn)品現(xiàn)狀去制定明確的設(shè)計(jì)目標(biāo)，深入挖掘，利用有效的設(shè)計(jì)價(jià)值觀，正確的驅(qū)動(dòng)設(shè)計(jì)前行，最終通過(guò)設(shè)計(jì)去提高產(chǎn)品體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：三石設(shè)計(jì) 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
大家有沒(méi)有遇到這樣的問(wèn)題，當(dāng)你面對(duì)非常復(fù)雜的信息時(shí)，在進(jìn)行信息整理設(shè)計(jì)時(shí)，往往會(huì)陷入比較糾結(jié)的場(chǎng)面，不知道怎么把這一堆信息進(jìn)行比較好的排列。如果你剛好也有這部分疑問(wèn)，這篇文章適合你繼續(xù)閱讀。
本篇文章會(huì)提供一種解決排列問(wèn)題的簡(jiǎn)單底層邏輯，我們可以圍繞這個(gè)邏輯去排布我們的頁(yè)面，從而讓整體排版變得更加清晰合理。
信息層級(jí)存在于我們目前看到的每一個(gè)畫(huà)面。它本質(zhì)上是信息組織的一種方式，通過(guò)信息的放大縮小和對(duì)應(yīng)的位置，能夠?qū)?fù)雜的信息分為不同的模塊呈現(xiàn)在我們的視野中。
大家先簡(jiǎn)單看一下圖中兩個(gè)畫(huà)面，你就能夠直觀感受到信息層級(jí)對(duì)于用戶認(rèn)知的作用。
不好的信息層級(jí)就像左圖一樣會(huì)讓畫(huà)面比較雜亂，難以進(jìn)行視覺(jué)上的識(shí)別。而優(yōu)秀的信息層級(jí)就像右圖一樣能夠讓我們快速且準(zhǔn)確的識(shí)別出畫(huà)面想要傳遞的信息。
因此信息層級(jí)的排列不僅影響視覺(jué)上的美觀度，更影響人們?cè)跈z索信息時(shí)候的效率。尤其是對(duì)于B端復(fù)雜場(chǎng)景，我們不僅需要考慮清晰傳遞業(yè)務(wù)價(jià)值，合理的信息層級(jí)劃分也是提高產(chǎn)品體驗(yàn)的重要部分，好的信息層級(jí)則意味著更好的使用體驗(yàn)。
既然信息層級(jí)對(duì)于使用體驗(yàn)比較關(guān)鍵，那么怎樣做好頁(yè)面的信息層級(jí)則顯得尤為重要。而目前網(wǎng)上的資料也是參差不齊，我也曾為此類(lèi)問(wèn)題查閱了大量資料，想要找到一個(gè)簡(jiǎn)單高效的答案。
但目前查閱到的資料幾乎都在講排列的四個(gè)基本原則：對(duì)比、對(duì)齊、親密、重復(fù)。不可否認(rèn)的是這四個(gè)方法對(duì)于我們排布信息層級(jí)確實(shí)起到了很大的作用。但也闡述得太過(guò)寬泛，讓人很難在實(shí)際中更有效地利用。
即使我對(duì)排版四個(gè)原則非常熟悉，在面對(duì)復(fù)雜層級(jí)排版時(shí)仍會(huì)面對(duì)困惑。因此我對(duì)目前頁(yè)面上比較好的頁(yè)面排版進(jìn)行了進(jìn)一步的探索：
經(jīng)過(guò)線上頁(yè)面與概念的整體研究發(fā)現(xiàn)，他們?cè)谧裱虐嬖瓌t的基礎(chǔ)上，本質(zhì)上都存在一個(gè)簡(jiǎn)單的邏輯：那些優(yōu)秀的頁(yè)面設(shè)計(jì)都把主內(nèi)容的層級(jí)控制在了三層左右，如下圖所示。
因?yàn)槿龑幼笥业膶蛹?jí)是最容易被用戶感知，且視覺(jué)上不易混亂。超過(guò)三層后隨著層級(jí)越多復(fù)雜性會(huì)相對(duì)增加。
比如我們看下面這兩個(gè)例子，左邊層級(jí)因?yàn)樘貏e復(fù)雜，造成用戶獲取信息效率變低，而通過(guò)層級(jí)的轉(zhuǎn)換，我們可以將其變得更簡(jiǎn)單且易讀。
再舉一個(gè)例子，我們?cè)诖蟛糠謭?chǎng)景見(jiàn)到的純文字排版基本都離不開(kāi)以下幾種形式：
因此，我們需要在排版時(shí)需要首先思考一個(gè)邏輯：那就是盡量將我們的內(nèi)容層級(jí)控制在三層左右。且這三層內(nèi)有比較明顯的對(duì)比關(guān)系。
有同學(xué)看到這肯定要問(wèn)了，這個(gè)道理我也懂啊，可是在實(shí)際業(yè)務(wù)中大部分時(shí)間拿到的信息太多，根本做不到保持在三層以內(nèi)。別急，這篇文章的重點(diǎn)當(dāng)然不是告訴你這么簡(jiǎn)單的道理，而是在面對(duì)復(fù)雜層級(jí)的時(shí)候，我們應(yīng)該怎樣去控制它的層級(jí)表現(xiàn)，從而讓它在最終呈現(xiàn)上保持在三層左右，讓用戶獲取信息的效率更高。
其實(shí)我們?cè)趯?shí)際中的大部分優(yōu)秀頁(yè)面，在本身的信息層級(jí)上可能都非常復(fù)雜，但我們可以通過(guò)一系列的方法，去減輕這種多層級(jí)的影響，從而讓我們的頁(yè)面即使承載了很多復(fù)雜的信息，也能變得更加簡(jiǎn)單清晰。那我們接下來(lái)就闡述一下對(duì)復(fù)雜層級(jí)的處理方案。
這可能是被很多人忽略的一點(diǎn)，就是信息的前置處理。我也曾遇到過(guò)某些信息很復(fù)雜導(dǎo)致排版很困難，但卻忽略了這些信息是否真實(shí)地被需要。這就需要我們從源頭上進(jìn)行第一層的判斷。
源頭降低的本質(zhì)就是判斷我們當(dāng)前所要呈現(xiàn)的信息是不是必要的。其實(shí)這也是在目前工作中遇到的場(chǎng)景，比如某些時(shí)候產(chǎn)品給到了我們很多信息，但我們并不一定會(huì)全盤(pán)接受，而是通過(guò)當(dāng)前頁(yè)面的業(yè)務(wù)場(chǎng)景去進(jìn)行判斷。確定每個(gè)信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設(shè)計(jì)的一致性。
1. 當(dāng)前的所有信息真的需要存在于頁(yè)面中嗎，如果去掉某些信息有無(wú)影響。
比如當(dāng)你在進(jìn)行打車(chē)的時(shí)候，當(dāng)你輸入目的地之前，一切其他的信息都無(wú)需呈現(xiàn)。當(dāng)你輸入目的地后，車(chē)輛的相關(guān)信息和價(jià)格才會(huì)進(jìn)行呈現(xiàn)，當(dāng)你打車(chē)后，司機(jī)的相關(guān)信息才會(huì)進(jìn)行呈現(xiàn)。這些都是按照用戶的使用場(chǎng)景來(lái)進(jìn)行對(duì)應(yīng)的呈現(xiàn)。
2.當(dāng)前信息的重要程度是怎樣的，對(duì)于某些不重要的信息是否可以通過(guò)隱藏的方式展現(xiàn)。
當(dāng)你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當(dāng)你瀏覽新聞的時(shí)候，標(biāo)題永遠(yuǎn)是最關(guān)注的，而評(píng)論，作者，簡(jiǎn)介等都是可以忽略的信息。
上述兩個(gè)問(wèn)題的確認(rèn)，會(huì)影響我們對(duì)后面的信息排布。因此我們需要在源頭，比如去和產(chǎn)品或者業(yè)務(wù)溝通，弄清楚該信息呈現(xiàn)的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級(jí)。
信息排布的本質(zhì)是通過(guò)我們對(duì)信息進(jìn)行排列上的調(diào)整，來(lái)將多余的層級(jí)融入到三層以內(nèi)。從而讓我們整體的頁(yè)面顯得更加簡(jiǎn)潔。
通過(guò)目前的實(shí)踐總結(jié)，我覺(jué)得目前可以有以下五種方法來(lái)幫助我們更合理地安排信息層級(jí)。
信息分組是大家在設(shè)計(jì)時(shí)都能夠想到的形式，分組能夠?qū)?fù)雜的信息打散，從而降低頁(yè)面整體的復(fù)雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。
那么這三種方式有沒(méi)有區(qū)分呢，VIVO設(shè)計(jì)團(tuán)隊(duì)曾經(jīng)就這個(gè)問(wèn)題展開(kāi)過(guò)用戶調(diào)研，但結(jié)果表示，如果純粹從用戶的角度來(lái)講，對(duì)其變化感知不大。但這三種分割方式會(huì)影響我們?cè)诔尸F(xiàn)信息時(shí)的整體視覺(jué)觀感，因此我們可以根據(jù)當(dāng)前信息的復(fù)雜度作出以下規(guī)則：
通過(guò)這三種場(chǎng)景的區(qū)別，我們可以根據(jù)信息復(fù)雜度更好地選擇分割方式，讓界面的表達(dá)清晰明確。
組件其實(shí)是目前大部分設(shè)計(jì)師在進(jìn)行信息排布時(shí)必備的部分，因此對(duì)于這部分設(shè)計(jì)師的熟練度也是最高的。而本篇想要強(qiáng)調(diào)的是，目前這幾種組件對(duì)于我們信息層級(jí)的劃分起到了比較重要的作用：樹(shù)形結(jié)構(gòu)、表格結(jié)構(gòu)、步驟條、選項(xiàng)卡。
▍樹(shù)形結(jié)構(gòu)
對(duì)于有關(guān)聯(lián)性的多層級(jí)非常適合，可以將復(fù)雜的層級(jí)結(jié)構(gòu)進(jìn)行收攏，從而能夠顯著降低信息的復(fù)雜度。
▍表格結(jié)構(gòu)
對(duì)于信息多且關(guān)聯(lián)性不大的復(fù)雜信息，可以聚合到表格來(lái)進(jìn)行呈現(xiàn)，但表格的呈現(xiàn)方式不宜濫用，需要根據(jù)我們場(chǎng)景來(lái)進(jìn)行選擇。
▍步驟條
步驟條則對(duì)場(chǎng)景要求非常明確，我們可以將多個(gè)場(chǎng)景通過(guò)分布的形式進(jìn)行呈現(xiàn)，從而減少當(dāng)前頁(yè)面的復(fù)雜度。
▍選項(xiàng)卡
選項(xiàng)卡更適合與同級(jí)的數(shù)據(jù)，對(duì)于同類(lèi)型的結(jié)構(gòu)可以更好地將頁(yè)面進(jìn)行拆分，從而讓當(dāng)前頁(yè)面更簡(jiǎn)潔。
由于組件這一塊大家的認(rèn)知已經(jīng)比較全了，在這里就不進(jìn)行更深入的講解了。如果有需要的同學(xué)可以通過(guò)瀏覽各大廠的組件文檔去進(jìn)行更細(xì)致的查閱。
通過(guò)改變布局的方式，我們可以將多層結(jié)構(gòu)的樣式通過(guò)拆分布局來(lái)將其控制在三層內(nèi)。這句話什么意思呢，舉個(gè)簡(jiǎn)單的例子：
從上圖中你可以看出目前的層級(jí)較多，尤其是兩層tab的疊加，視覺(jué)上就會(huì)顯得稍微有點(diǎn)凌亂。我們可以通過(guò)將第二層tab換個(gè)布局，從上下結(jié)構(gòu)變?yōu)樽笥医Y(jié)構(gòu)，達(dá)到從視覺(jué)上簡(jiǎn)化層級(jí)的作用：
當(dāng)然以上只是舉了一個(gè)簡(jiǎn)單的例子。這里底層邏輯就是當(dāng)遇到相對(duì)比較復(fù)雜邏輯時(shí)，我們可以考慮通過(guò)改變結(jié)構(gòu)來(lái)減少其復(fù)雜度，比如上述的兩欄結(jié)構(gòu)，甚至三欄結(jié)構(gòu)，從而讓整體變得更加簡(jiǎn)潔。
我們可以利用信息融入的形式來(lái)減弱其對(duì)層級(jí)的影響。信息融入從本質(zhì)上講就是將某兩種層級(jí)信息通過(guò)不同的組合方式，讓其融入到同一個(gè)層級(jí)中。比如我們看下面這一個(gè)例子，Coding產(chǎn)品設(shè)計(jì)中將標(biāo)題與tab利用分割排列在一起，從而變?yōu)橥粚蛹?jí)，這個(gè)時(shí)候就不會(huì)出現(xiàn)四層的復(fù)雜結(jié)構(gòu)，頁(yè)面還是保持三層結(jié)構(gòu)，通過(guò)這種方式有效降低了頁(yè)面的復(fù)雜度。
信息融入這個(gè)方法，當(dāng)我們?cè)谶M(jìn)行B端布局時(shí)，用得比較多。比如我們最常見(jiàn)的標(biāo)題、搜索和按鈕等都放在同一行上。這樣既能夠節(jié)省視覺(jué)空間，還能夠降低信息層級(jí)的復(fù)雜度。
但在進(jìn)行信息融入的過(guò)程中，我們需要注意的是：如果放在同一層級(jí)會(huì)造成理解上的誤解時(shí)，這個(gè)時(shí)候不要采用該方案。比如搜索框的位置，放在哪個(gè)層級(jí)決定了對(duì)應(yīng)的搜索范圍。
信息弱化的原則是，將某些超出層級(jí)的部分進(jìn)行弱化。比如有5個(gè)層級(jí)，但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中，使得即使超過(guò)3層我們也不會(huì)覺(jué)得其特別復(fù)雜，我們?cè)倏匆粋€(gè)例子：
可以看到TAPD將「另存為視圖功能」與「缺陷統(tǒng)計(jì)」進(jìn)行了弱化，雖然還是有4種層級(jí)，但從視覺(jué)感知的層面上不會(huì)覺(jué)得視覺(jué)凌亂。
在很多時(shí)候，我們覺(jué)得信息混亂的原因，就是頁(yè)面要素太多太花哨。比如工作中的一個(gè)小卡片，也就是利用信息弱化去減少畫(huà)面的復(fù)雜度：
因此我們需要學(xué)會(huì)對(duì)信息分級(jí)，不重要的信息就進(jìn)行弱化，這樣整體的表述上會(huì)好很多。
通過(guò)上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級(jí)過(guò)多的復(fù)雜信息簡(jiǎn)化在三層以內(nèi)，從而讓我們最終的頁(yè)面呈現(xiàn)不會(huì)太過(guò)復(fù)雜，更容易被用戶理解。但不可否認(rèn)仍會(huì)有更復(fù)雜的頁(yè)面，即使縮減也仍有過(guò)多層級(jí)，那么這個(gè)時(shí)候就一定要記得最開(kāi)始的從源頭去追溯這些所有信息是否必要。
在研究的過(guò)程中，也總結(jié)了目前在進(jìn)行信息層級(jí)排布過(guò)程中比較糾結(jié)的一些細(xì)節(jié)點(diǎn)，也分享給大家。希望對(duì)遇到相同問(wèn)題的同學(xué)一些幫助。
大家對(duì)「對(duì)齊」并不陌生，它存在于我們的每個(gè)頁(yè)面。但在對(duì)齊的過(guò)程中，我們可能會(huì)忽視一個(gè)小細(xì)節(jié)點(diǎn)，那就是沿著字的軸線對(duì)齊。比如下圖兩個(gè)例子：
在看見(jiàn)左圖時(shí)，總覺(jué)得哪里會(huì)有點(diǎn)奇怪，但又不知如何表述。而右圖看著就會(huì)相對(duì)更舒服。經(jīng)過(guò)對(duì)比過(guò)后明顯發(fā)現(xiàn)右邊的圖整體相比于左側(cè)會(huì)更整齊，而這就是說(shuō)的沿著字的軸線對(duì)齊。這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會(huì)被我們的視覺(jué)組合在一起，即相似的部分在感知中會(huì)形成若干組。
而左側(cè)因?yàn)闃?biāo)題字和底部字沒(méi)有形成對(duì)齊，因此會(huì)顯得更加凌亂一點(diǎn)。所以沿著字的軸線對(duì)齊會(huì)讓我們?cè)谡w的頁(yè)面呈現(xiàn)中顯得更整齊。
這是我平時(shí)在做設(shè)計(jì)呈現(xiàn)時(shí)也會(huì)糾結(jié)的一個(gè)問(wèn)題。當(dāng)你想用卡片來(lái)呈現(xiàn)視覺(jué)時(shí)，你有沒(méi)有糾結(jié)過(guò)到底是用線框卡片還是背景色填充呢。
我就曾陷入這種糾結(jié)，但在去搜索查閱時(shí)，發(fā)現(xiàn)目前其實(shí)關(guān)于這塊相關(guān)的資料，因此在大部分情況下都是由設(shè)計(jì)師自行決定的。但經(jīng)過(guò)線上產(chǎn)品的調(diào)研發(fā)現(xiàn)，這塊內(nèi)容其實(shí)也包含著一定的規(guī)則：
1.取決于卡片的數(shù)量
對(duì)于卡片少的其實(shí)可以用色塊來(lái)呈現(xiàn)，對(duì)于卡片多的可以考慮用線框來(lái)進(jìn)行。這其實(shí)主要是從一個(gè)視覺(jué)的維度來(lái)進(jìn)行呈現(xiàn)，舉個(gè)簡(jiǎn)單的例子：
通過(guò)coding和飛書(shū)的卡片對(duì)比，你會(huì)發(fā)現(xiàn)卡片過(guò)多時(shí)線性設(shè)計(jì)會(huì)讓頁(yè)面顯得更整潔和清新，色塊設(shè)計(jì)就會(huì)讓頁(yè)面顯得更厚重。右側(cè)整體的呈現(xiàn)行會(huì)顯得更好一些。
2.取決于頁(yè)面的視覺(jué)重心
這里頁(yè)面視覺(jué)重心的含義是當(dāng)你整個(gè)頁(yè)面都全是線框時(shí)，你可以利用色塊的卡片來(lái)達(dá)到突出頁(yè)面重心的效果，讓整體頁(yè)面沒(méi)有那么單調(diào)，可以看到下圖的例子，右側(cè)的頁(yè)面會(huì)相對(duì)更穩(wěn)重一點(diǎn)。
在進(jìn)行色塊時(shí)，時(shí)常會(huì)糾結(jié)用灰色底還是彩色底來(lái)進(jìn)行。那么這兩者到底有沒(méi)有界限的區(qū)分呢，我們應(yīng)該何時(shí)使用這兩種色彩呢。
我們先看一下案例：
可以看出目前這兩種顏色的運(yùn)用更多的是功能上的區(qū)分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導(dǎo)或者營(yíng)銷(xiāo)性質(zhì)的頁(yè)面。從表現(xiàn)性質(zhì)上來(lái)講更重。
2.而灰色背景更適用于「利用灰色背景來(lái)區(qū)分層級(jí)關(guān)系」或者一些微弱提示的信息。從表現(xiàn)形式上來(lái)講更輕。
所以我們可以根據(jù)當(dāng)前的信息場(chǎng)景來(lái)選擇合適的色彩，后面再面對(duì)時(shí)就可以不用那么糾結(jié)。
本期的內(nèi)容到這里就結(jié)束了。關(guān)于這期的信息層級(jí)內(nèi)容，真正需要深入了解的是控制信息層級(jí)背后的方法。很多時(shí)候我們看見(jiàn)的優(yōu)秀頁(yè)面并不是因?yàn)樗旧砭秃?jiǎn)單，而是通過(guò)我們合理的信息層級(jí)控制，讓最終呈現(xiàn)上顯得不復(fù)雜，這其實(shí)也是我們?cè)趯?shí)際工作中需要注意的很重要的一個(gè)點(diǎn)。
本文重點(diǎn)內(nèi)容再回顧，當(dāng)我們遇見(jiàn)復(fù)雜的信息層級(jí)時(shí)，需要分三步：
1.明確當(dāng)前所有信息的必要性和重要分級(jí)，需要從源頭去深入了解；
2.運(yùn)用五個(gè)方法可以有效減低信息層級(jí)：信息分組、組件拆分、更改布局、信息融入、信息弱化
3.同時(shí)在運(yùn)用過(guò)程中需要注意影響層級(jí)的小細(xì)節(jié)
以上是本文關(guān)于信息層級(jí)的另一種角度的描繪，雖然沒(méi)有提及四大基本原則，但在實(shí)際運(yùn)用中也是很重要的。最后，雖然進(jìn)行了很多資料查詢，但在在闡述過(guò)程中不可避免會(huì)有闡述不到位的地方，歡迎進(jìn)行反饋。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：進(jìn)擊的M 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
關(guān)于設(shè)計(jì)思維的文章我們也看過(guò)不少，也聽(tīng)過(guò)大佬們講什么是設(shè)計(jì)思維，可都停滯于帶我們了解初識(shí)階段，并沒(méi)有教到我們?cè)趺慈ホ`行設(shè)計(jì)思維。設(shè)計(jì)思維 (Design Thinking) 是一種設(shè)計(jì)方法，提供基于解決方案的方法來(lái)解決問(wèn)題。解決方案是什么？究竟要解決什么問(wèn)題？如何去解決？在參考了大量的文獻(xiàn)后，更多的是在闡述設(shè)計(jì)思維是什么，具體的分類(lèi)和步驟，更偏向于介紹和展示相關(guān)的知識(shí)。比如 Google 的 Design Sprint 方法論，比如 IDEO 首席執(zhí)行官 Tim Brown 提出的可行性三原則，比如斯坦福大學(xué)哈斯普拉特納設(shè)計(jì)學(xué)院（d.school）提出的五階段設(shè)計(jì)思維模型，而根據(jù) d.school 提出的五階段設(shè)計(jì)思維模型，大部分公司都基于這個(gè)模型進(jìn)行變量修改后作為自己的設(shè)計(jì)思維模式，這五階段設(shè)計(jì)思維模型為：同理心 (Empathise) - 定義 (Define) - 假設(shè) (Ideate) - 原型 (Prototype) -測(cè)試 (Test) ,幾乎大部分的設(shè)計(jì)思維都基于這五階段模型做的改變。
用同理心代入 (Derivation) 定義，用同理心建立 (Build) 原型，通過(guò)原型反推 (Reverse) 原型的成立，最后用測(cè)試結(jié)果證實(shí) (Validate) 定義的正確性。
現(xiàn)在對(duì)設(shè)計(jì)思維有了大致的認(rèn)識(shí)，這里也不花太多篇幅去描述，但是全部看下來(lái)感覺(jué)自己腦袋暈乎乎的，那究竟我們?cè)诰唧w的工作學(xué)習(xí)中，要如何嘗試性代入且應(yīng)用設(shè)計(jì)思維來(lái)做設(shè)計(jì)呢？通過(guò)一些項(xiàng)目的經(jīng)驗(yàn)我總結(jié)出關(guān)于如何運(yùn)用設(shè)計(jì)思維做設(shè)計(jì)的方法，就是通過(guò)尋找產(chǎn)品之間的共通性和異樣性，深挖出關(guān)鍵性的問(wèn)題所在，最后去解決這個(gè)關(guān)鍵性問(wèn)題。
共通性與共同性
共通性和共同性在意義上有根本的區(qū)別，共通性是指相通或者適用于各方面的東西，比如共通的道理，共通的方法；共同性則是指彼此都具有相同的性質(zhì)，比如大家共同的目標(biāo)，共同的性格；產(chǎn)品與產(chǎn)品之間也是有共通性和共同性的，只有找準(zhǔn)產(chǎn)品的共通性，才能深度挖掘到核心問(wèn)題的所在，從而通過(guò)設(shè)計(jì)手段解決核心問(wèn)題。
與同類(lèi)競(jìng)品分析不同的是，競(jìng)品分析需要通過(guò)大量且快速的對(duì)比找到各類(lèi)產(chǎn)品之間的共同處和差異處，而尋找產(chǎn)品的共通性，則需要對(duì)逐個(gè)產(chǎn)品進(jìn)行深度剖析，挖掘共通的點(diǎn) (Point)，然后把這個(gè)點(diǎn)透過(guò)三原則：可行性 (Feasibility)，可取性 (Preferability) 和創(chuàng)新性 (Innovativeness)分析來(lái)設(shè)計(jì)產(chǎn)品解決問(wèn)題。一款產(chǎn)品或者某個(gè)功能模塊，只有在可行性和可取性中產(chǎn)生交集時(shí)，才可以在此之上進(jìn)行創(chuàng)新設(shè)計(jì)，可行性可以理解為開(kāi)發(fā)可實(shí)現(xiàn)，或者和業(yè)務(wù)需求沒(méi)有沖突的模塊，可取性是指性質(zhì)上可以取用。
舉一個(gè)簡(jiǎn)單的例子，某個(gè)模塊希望通過(guò)彈窗的形式提升某二級(jí)頁(yè)面的跳轉(zhuǎn)率，那么提煉出業(yè)務(wù)訴求關(guān)鍵點(diǎn)：
1.提升二級(jí)頁(yè)面的跳轉(zhuǎn)率；
2.通過(guò)彈窗的形式展現(xiàn)；
那么可取性就是【彈窗】這個(gè) Piont，而可行性同樣為彈窗形式，那么他們共同的交集之處就是彈窗頂部的氛圍層和行動(dòng)點(diǎn)，設(shè)計(jì)師就可以在這兩個(gè)交集處做自己的創(chuàng)意發(fā)散，比如在彈窗頭部氛圍做的很強(qiáng)烈吸引用戶，或者把行動(dòng)點(diǎn)設(shè)計(jì)成帶有動(dòng)效的按鈕以此來(lái)吸引用戶點(diǎn)擊等等。產(chǎn)品設(shè)計(jì)中通過(guò)共通性挖掘問(wèn)題，而承諾和顧客的體驗(yàn)達(dá)成共同相通，這是為了贏得用戶信任和尊重的需要。
產(chǎn)品的共通性
做產(chǎn)品第一步就是找出同類(lèi)競(jìng)品之間共同之處，把他們共同的地方記錄下來(lái)并做出統(tǒng)計(jì)。比如我需要做一個(gè)關(guān)于 UGC(用戶原創(chuàng)內(nèi)容)的內(nèi)容社區(qū)，那么我前期得搜集同類(lèi)競(jìng)品，比如 MONO、新草、Lofter等等，找出他們共同的地方。首先來(lái)解釋為什么要尋找共同的地方，根據(jù)模塊出現(xiàn)的頻率排列出模塊的優(yōu)先級(jí)，這是一款產(chǎn)品從零到一必須要經(jīng)歷的階段，但往往很多產(chǎn)品到這一步就停止了，然后像堆磚砌瓦一樣，它有的我 Duang 地加上去，另一個(gè)它有的我也要 Duang 地加上去，我全都要！最后導(dǎo)致產(chǎn)品做出來(lái)架構(gòu)不清晰，目標(biāo)不明確。這就是為什么老有設(shè)計(jì)師疑惑：為啥總是左改一版右改一版業(yè)務(wù)方/老板就是不滿意，這在戰(zhàn)略層就出現(xiàn)了的問(wèn)題，跳到執(zhí)行層上改來(lái)改去，肯定怎么改都不會(huì)有一個(gè)滿意的結(jié)果。這時(shí)候就需要將搜集到共同的地方做分析，找出它們各自存在的性質(zhì)，然后挖掘產(chǎn)品的共通性。
通過(guò)各類(lèi)競(jìng)品搜集下來(lái)可以看出關(guān)于社區(qū)模塊的內(nèi)容大致分列為：話題標(biāo)題占比18%，統(tǒng)計(jì)信息占比18%，話題說(shuō)明占比16%，心智氛圍占比8%，內(nèi)容分級(jí)占比4%以及其他內(nèi)容填充占比36%，具體歸類(lèi)成A.標(biāo)題&統(tǒng)計(jì)、B.話題說(shuō)明、C.心智氛圍、D.分級(jí)信息和 E.其他信息，然后排列優(yōu)先級(jí)順序?yàn)椋篈>B>C>D>E，最后一步就是分析各自獨(dú)有的性質(zhì)：
A.標(biāo)題&統(tǒng)計(jì)信息：話題標(biāo)題和統(tǒng)計(jì)信息屬于必要模塊，標(biāo)題顯示話題主題，統(tǒng)計(jì)信息展示話題關(guān)注度等信息，增強(qiáng)話題氛圍；
B.話題說(shuō)明：是對(duì)話題進(jìn)行的補(bǔ)充說(shuō)明，也可增設(shè)相關(guān)活動(dòng)等文案；
C.心智氛圍：心智氛圍的增設(shè)用于對(duì)話題主題的傳達(dá)以及突出用戶的參與感；
D.分級(jí)信息：分級(jí)信息對(duì)用戶的篩選起到至關(guān)重要的作用；
E.其他信息：其他信息皆為用戶提供UGC或者平臺(tái)提供PGC。
而這類(lèi)性質(zhì)可以統(tǒng)稱為社區(qū)類(lèi)模塊產(chǎn)品的共通性，提煉出產(chǎn)品的共通性有什么用呢？如果一個(gè)社區(qū)類(lèi)產(chǎn)品上線后發(fā)現(xiàn)用戶參與感熱度不是很強(qiáng)，那么就可以從心智氛圍模塊去分析是否問(wèn)題出在這里，是否應(yīng)該加強(qiáng)話題的心智氛圍，或者是否可以通過(guò)投資邀請(qǐng)專(zhuān)業(yè)的人士通過(guò)生產(chǎn) PGC 來(lái)帶動(dòng)社區(qū)的熱度等等，只有先去了解產(chǎn)品之間的共通性，然后找出關(guān)鍵點(diǎn)提煉出關(guān)鍵問(wèn)題，在戰(zhàn)略上提出解決方案，才能從根本上解決產(chǎn)品問(wèn)題。
就好比一個(gè)人捂著肚子沖進(jìn)診所，醫(yī)生首先了解捂著肚子的性質(zhì)，是闌尾炎？是胃痛？還是其他的疾病，只有先熟悉各類(lèi)疾病的性質(zhì)原因后，通過(guò)排查篩選找出根本的原因，才能提出是做手術(shù)還是藥物治療的解決方案；同理，回到之前的那個(gè)問(wèn)題：為啥總是左改一版右改一版業(yè)務(wù)方/老板就是不滿意，都沒(méi)查出究竟是什么原因?qū)е露亲油矗烷_(kāi)始開(kāi)刀手術(shù)或者胡亂吃藥，運(yùn)氣好了胡亂吃藥吃對(duì)了解決了，運(yùn)氣不好被折騰涼了，最后的結(jié)果就是產(chǎn)品模塊下架撤離，所以無(wú)論是從零到一的產(chǎn)品還是業(yè)務(wù)改版，都需要找到產(chǎn)品之間的共通性，才能找出具體的解決方案。
設(shè)計(jì)細(xì)節(jié)的共通性
我們不難發(fā)現(xiàn)市場(chǎng)上很多出自于同一業(yè)務(wù)下的產(chǎn)品都有著自己的設(shè)計(jì)細(xì)節(jié)，而在這些母艦上都有著各個(gè)模塊的附屬模塊，比如在QQ產(chǎn)品里的興趣部落、NOW直播、微視等模塊，比如在淘寶產(chǎn)品里的天貓、聚劃算、飛豬等模塊，那么在這些母艦下的附屬模塊，在設(shè)計(jì)細(xì)節(jié)上自然而然要和母艦保持一致性。舉個(gè)很明顯的例子：手淘設(shè)計(jì)語(yǔ)言中卡片的圓角為24px，手貓?jiān)O(shè)計(jì)語(yǔ)言中卡片的圓角為10px（基于750px尺寸下），那么手貓其中的模塊自然是要遵循手貓的設(shè)計(jì)語(yǔ)言——圓角的尺寸為10px，但是如果這個(gè)模塊獲取到手淘透出的資源，那么在設(shè)計(jì)上，就要遵守手淘的設(shè)計(jì)語(yǔ)言——圓角尺寸為24px。
那么你會(huì)問(wèn)了，這樣最多只是相同啊，有什么性質(zhì)意義呢？這和共通性又有什么關(guān)系？不同的產(chǎn)品所面向的用戶群體是不一樣的，所以主打心智也不一樣，設(shè)計(jì)上的細(xì)節(jié)傳達(dá)給用戶的心智一樣的不同。眾所周知，淘寶主要面向的用戶群體是大眾的，天貓主要面向的用戶群體是追求更高質(zhì)量或者品牌的，那么在細(xì)節(jié)上，24px的圓角卡片帶給用戶的心智是友好親切的，10px的圓角卡片帶給用戶的心智是偏向更精致更高質(zhì)感的；其次，如果用戶通過(guò)手淘的場(chǎng)景進(jìn)入天貓的模塊，一會(huì)兒24px的圓角一會(huì)兒10px的圓角，長(zhǎng)時(shí)間下去用戶自然會(huì)分不清當(dāng)前場(chǎng)景是天貓還是淘寶，這是在產(chǎn)品一致性上做的共通性協(xié)調(diào)工作。所以如果是同類(lèi)系的產(chǎn)品或者是模塊，在設(shè)計(jì)細(xì)節(jié)上一定要注意，保持模塊與模塊之間的共通性。（有的人可能不會(huì)注意到這些設(shè)計(jì)細(xì)節(jié)，設(shè)計(jì)細(xì)節(jié)既然是細(xì)節(jié)，個(gè)體本身影響力不是很大，很容易造成忽視，但是如果個(gè)體增多形成量級(jí)的話，造成的視覺(jué)影響是很直觀的）
差異性
差異化策略是從改變產(chǎn)品的“絕對(duì)差異化”到改變認(rèn)知的“相對(duì)差異化”，越來(lái)越著眼于“人”的視角。在如今發(fā)展迅猛的網(wǎng)絡(luò)營(yíng)銷(xiāo)時(shí)代，“人”的因素更是被置于產(chǎn)品運(yùn)營(yíng)和品牌營(yíng)銷(xiāo)的核心位置，不過(guò)，這并非表明“定位”理論變得越來(lái)越重要了。這點(diǎn)做品牌的朋友相信有更多的感觸，但是無(wú)論你是做產(chǎn)品的，還是做品牌的，要想脫穎而出，首要的策略就是“差異化”。大家都知道平臺(tái)產(chǎn)品的最終目的是實(shí)現(xiàn)商業(yè)價(jià)值，可是如何實(shí)現(xiàn)商業(yè)價(jià)值，就是要通過(guò)產(chǎn)品之間的差異化來(lái)尋求突破點(diǎn)。
產(chǎn)品的差異性
依舊拿上面那個(gè)社區(qū)產(chǎn)品當(dāng)例子，同類(lèi)對(duì)比我們發(fā)現(xiàn)，大多數(shù)的社區(qū)產(chǎn)品更多的是流量引進(jìn)來(lái)營(yíng)造平臺(tái)氛圍，無(wú)論是通過(guò) PGC 的形式還是對(duì)內(nèi)容的打造，但是在商業(yè)價(jià)值化層面上則很少有渠道介入。那要如何通過(guò)設(shè)計(jì)表達(dá)出差異化并且實(shí)現(xiàn)商業(yè)價(jià)值，就需要對(duì)實(shí)現(xiàn)商業(yè)價(jià)值有一定的了解。當(dāng)社區(qū)把流量引進(jìn)時(shí)，實(shí)現(xiàn)商業(yè)價(jià)值常見(jiàn)的幾種方式有：
1.廣告宣傳的推廣；
2.電商平臺(tái)的轉(zhuǎn)化；
3.流量引導(dǎo)產(chǎn)品模塊的介入等等。
以電商產(chǎn)品舉例，我這個(gè)社區(qū)模塊將流量引進(jìn)后，需要致使用戶通過(guò) UGC 或者 PGC 種草的內(nèi)容去購(gòu)買(mǎi)所對(duì)應(yīng)的種草商品，知名的社區(qū)電商產(chǎn)品的確也是這樣做的，比如小紅書(shū)、Lips等等，但是不難發(fā)現(xiàn)此類(lèi)產(chǎn)品都有一個(gè)共同的弊端：用戶需要先記住種草商品的內(nèi)容后，自行去購(gòu)買(mǎi)采購(gòu)商品，這樣可能就去了淘寶、京東等等更加知名的電商平臺(tái)，最后為他人做了嫁衣，那么這一塊就是關(guān)鍵突破點(diǎn)。
通過(guò)尋找差異性找出關(guān)鍵突破點(diǎn)問(wèn)題所在，并推導(dǎo)出相關(guān)的設(shè)計(jì)策略：平臺(tái)可以通過(guò)招商的形式發(fā)布社區(qū)話題，并且可以通過(guò)“參與話題送 xx 額度的優(yōu)惠券”、“參與話題并分享給好友獲取 xx 限量商品”等形式刺激用戶參與話題，并且也給用戶很方便的渠道入口直接進(jìn)行商品購(gòu)買(mǎi)，防止流量丟失為他人做嫁衣；商家通過(guò)入駐平臺(tái)提供話題，平臺(tái)流量導(dǎo)入?yún)⑴c話題，商家通過(guò)參與話題給予優(yōu)惠等活動(dòng)引導(dǎo)用戶購(gòu)物，用戶通過(guò)平臺(tái)參與話題了解品牌獲取參與感；類(lèi)似線下商場(chǎng)搞一些活動(dòng)，品牌店給一些優(yōu)惠券之類(lèi)的當(dāng)作參與活動(dòng)的獎(jiǎng)勵(lì)，然后客人可以去到品牌店消費(fèi)，最終實(shí)現(xiàn)三方獲利的商業(yè)閉環(huán)！
不難發(fā)現(xiàn)，通過(guò)尋找產(chǎn)品之間的差異性來(lái)挖掘出關(guān)鍵點(diǎn)問(wèn)題，然后在此基礎(chǔ)上解決問(wèn)題做出創(chuàng)新。追求差異化，是產(chǎn)品基于競(jìng)爭(zhēng)角度永恒的主題。這種差異化甚至貫穿了產(chǎn)品生命不斷迭代的全程，也貫穿在與品牌相關(guān)的一切要素中——產(chǎn)品、包裝、廣告、價(jià)格、渠道、視覺(jué)、代言人等等，每種要讀的動(dòng)態(tài)演變，都是一種創(chuàng)新，具體需要那種要素在哪些時(shí)刻做出何種改變，既要考慮到競(jìng)爭(zhēng)，也要敏銳覺(jué)察用戶的需求、態(tài)度和行為的變化趨向。
設(shè)計(jì)細(xì)節(jié)的差異性
設(shè)計(jì)細(xì)節(jié)用共通性同樣也有差異性，而細(xì)節(jié)的差異性有時(shí)候往往能起到產(chǎn)品的關(guān)鍵性作用。這里使用之前做的一個(gè)實(shí)際項(xiàng)目做例子：淘搶購(gòu)模塊 v4.0.1的改版。（保密性原則不透露任何數(shù)據(jù)）因?yàn)樘該屬?gòu) v3.9樣式太過(guò)老舊，根據(jù)手淘語(yǔ)言更新的淘搶購(gòu) v4.0在投放過(guò)程中發(fā)現(xiàn)，成交量和成交率比 v3.9降低了很多，所以在 v4.0.1的改版中最主要的是解決這個(gè)問(wèn)題。
根據(jù)用戶采樣調(diào)研數(shù)據(jù)分析我們篩查和對(duì)比發(fā)現(xiàn)，成交量和成交率下降的根本原因是用戶在頁(yè)面丟失，而用戶丟失的原因則是因?yàn)樘該屬?gòu) v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一個(gè)，對(duì)的你沒(méi)看錯(cuò)，就是因?yàn)檫@么一個(gè)商品坑位的細(xì)節(jié)原因，導(dǎo)致 v4.0的成交量和成交率比 v3.9降低了很多，以至于引起重視從而需要解決問(wèn)題。
找出關(guān)鍵問(wèn)題后就要去解決問(wèn)題，那么如何解決問(wèn)題是關(guān)鍵。此處需要保證在不改變新版設(shè)計(jì)語(yǔ)言的基礎(chǔ)上對(duì)首屏 Sublist 的坑位透出做調(diào)整，那么只需要坑位透出3.5～4個(gè)坑位就能到達(dá)預(yù)期的效果，如何在有限的空間里解決這個(gè)問(wèn)題，做了很多版本的嘗試。
通過(guò)各類(lèi)嘗試得出ABCDEF六種方案后，這時(shí)候需要從設(shè)計(jì)細(xì)節(jié)的差異性逐一分析然后進(jìn)行取舍：
A.此方案為目前 v4.0實(shí)行方案，可以明顯看出單屏的效率只能展示3個(gè)商品坑位，因此是造成用戶在瀏覽的過(guò)程中會(huì)流失的根本原因；
B.此方案計(jì)與 v3.9通欄無(wú)太大差異，所以問(wèn)題就是：1.版式陳舊老化；2.信息過(guò)多整體會(huì)導(dǎo)致頁(yè)面看起來(lái)雜亂無(wú)章；
C.此方案除了版式陳舊信息過(guò)多問(wèn)題外，圖片變小導(dǎo)致用戶對(duì)信息細(xì)節(jié)辨識(shí)度不高，直接pass，所以通欄的方案在當(dāng)前場(chǎng)景中完全不可行。
D.此方案基于 v4.0上，縮進(jìn)了卡片內(nèi)信息的距離，更加突出“搶購(gòu)”的緊湊感氛圍，同時(shí)單屏能顯示3.5個(gè)商品坑位，解決了屏效的主要問(wèn)題，同時(shí)數(shù)據(jù)顯示比通欄式設(shè)計(jì)曝光點(diǎn)擊率有所提升，也符合淘寶的設(shè)計(jì)風(fēng)格規(guī)范，但是單卡片樣式商品與商品之間分割感太強(qiáng)烈；
E.此方案將所有商品坑位包含在一個(gè)大卡片內(nèi)，解決了商品與商品之間的分割感，商品信息細(xì)節(jié)也比小卡片展示得更完全，但存在問(wèn)題就是：每個(gè)商品之間的間隔存在的分割線導(dǎo)致間距過(guò)大，屏效又回到舊版只能展示3個(gè)的問(wèn)題，不能解決主要問(wèn)題，所以pass；
F.此方案在大卡片設(shè)計(jì)上進(jìn)行了優(yōu)化，取消了分割線的設(shè)計(jì)，縮進(jìn)了商品與商品之間的間距，解決了小卡片式商品與商品之間分割感強(qiáng)烈的問(wèn)題，圖片的大小信息細(xì)節(jié)也能給用戶良好的體驗(yàn)，最主要單屏顯示3.5個(gè)商品坑位，解決了最主要的問(wèn)題，也符合最新的淘寶設(shè)計(jì)規(guī)范和風(fēng)格，此方案為最佳方案。
最后采用了F方案，也就是目前我們線上看到的效果，在灰度上線和 A/B test 后數(shù)據(jù)反饋，淘搶購(gòu) v4.0.1的成交量&成交率相比 v4.0有很明顯的上升甚至超出了 v3.9的數(shù)據(jù)，這是通過(guò)尋找設(shè)計(jì)細(xì)節(jié)上的差異性來(lái)解決問(wèn)題最好的案例。再次證明：設(shè)計(jì)思維不應(yīng)被視為一種具體而不靈活的設(shè)計(jì)方法，細(xì)節(jié)的差異性有時(shí)候往往能起到產(chǎn)品的關(guān)鍵性作用，所以設(shè)計(jì)師從設(shè)計(jì)層面上去解決問(wèn)題的時(shí)候，要不斷通過(guò)尋找產(chǎn)品之間的差異性，培養(yǎng)自己設(shè)計(jì)思維中的差異性。
動(dòng)效差異性的運(yùn)用
產(chǎn)品設(shè)計(jì)中，動(dòng)效作為一種輔助手段，幫助設(shè)計(jì)師傳達(dá)具象的意愿，幫助開(kāi)發(fā)理解交互手段，是一種錦上添花的表達(dá)；前面的內(nèi)容更偏向于戰(zhàn)略層，而動(dòng)效則偏向于表現(xiàn)層，同一種想表達(dá)的心智不同的樣式表達(dá)的效果完全不同。如何做好動(dòng)效在產(chǎn)品中的表現(xiàn)，我們就需要了解不同的動(dòng)效所帶來(lái)的性質(zhì)傳達(dá)。
舉個(gè)例子，某個(gè)彈窗需要對(duì)行動(dòng)點(diǎn)通過(guò)動(dòng)效的展示進(jìn)行強(qiáng)化，但是同樣是強(qiáng)化行動(dòng)點(diǎn)，如果產(chǎn)品是需要體現(xiàn)出質(zhì)感、高端等心智時(shí)，那么在動(dòng)效上的處理上就應(yīng)該體現(xiàn)出高品質(zhì)高質(zhì)感的動(dòng)效，如果產(chǎn)品主要用戶為女性或者年齡偏小的用戶，則需要體現(xiàn)出可愛(ài)、親切感的心智。那么在動(dòng)效的選擇上，就需要通過(guò)平時(shí)對(duì)動(dòng)效的收集積累，然后熟悉不同的動(dòng)效所表達(dá)的性質(zhì)，才能從中選擇最優(yōu)的方案。比如 Q彈縮放的動(dòng)效看起來(lái)親切感更強(qiáng)，閃光的按鈕看起來(lái)質(zhì)感更加強(qiáng)烈一些。
動(dòng)效向來(lái)是產(chǎn)品的輔助，動(dòng)效應(yīng)該是克制的，只有了解動(dòng)效的性質(zhì)，通過(guò)動(dòng)效的差異性，完美地契合產(chǎn)品，才能發(fā)揮出動(dòng)效的最大作用。
總結(jié)
在如今網(wǎng)絡(luò)時(shí)代和社會(huì)化媒體的大潮下，產(chǎn)品設(shè)計(jì)差異化的力量不僅僅基于競(jìng)爭(zhēng)，更要基于消費(fèi)者需求的敏銳察覺(jué)和捕捉；設(shè)計(jì)思維的共通性和差異性，在今天也比以往任何時(shí)代都顯得重要。識(shí)別和競(jìng)爭(zhēng)的需要決定了產(chǎn)品一定要差異化，而誠(chéng)信和責(zé)任要求產(chǎn)品必須做到共通，差異性是產(chǎn)品價(jià)值的基礎(chǔ)，而共通性則是產(chǎn)品價(jià)值的保障。設(shè)計(jì)思維不應(yīng)被視為一種具體而不靈活的設(shè)計(jì)方法，而是需要設(shè)計(jì)師們通過(guò)自己的經(jīng)驗(yàn)積累，刻意地培養(yǎng)設(shè)計(jì)與產(chǎn)品之間差異性和共通性的意識(shí)，總結(jié)歸納出一套適用自己的設(shè)計(jì)思維。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945
作者：雨灰 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
1-線上圖片的四大類(lèi)別
2-線上圖片常見(jiàn)的五種處理方式
3-線上圖片使用的五大要點(diǎn)
4-總結(jié)
在頁(yè)面中單獨(dú)存在的圖片，以圖片為主要元素傳達(dá)給用戶有效信息。
例如好好住APP，它在“看圖板塊”中就使用了信息圖片，重點(diǎn)表現(xiàn)圖片的信息，周?chē)鸁o(wú)任何干擾元素或輔助信息元素。
背景圖片可以用于單個(gè)元素，也可以用于整體畫(huà)面，主要作用于營(yíng)造氛圍。
單個(gè)元素：例如嘀嗒出行的“優(yōu)惠券板塊”，把插畫(huà)圖片應(yīng)用在單個(gè)卡片中。
整體畫(huà)面：例如網(wǎng)易云音樂(lè)的“聽(tīng)歌頁(yè)面”，它就把歌曲封面的圖片作為頁(yè)面整體的背景。（圖片進(jìn)行了模糊處理）
作為導(dǎo)航入口，引導(dǎo)用戶點(diǎn)擊進(jìn)入詳情頁(yè)面，在各應(yīng)用都普遍使用。
Banner圖作為最常見(jiàn)的圖片使用形式之一，大家再熟悉不過(guò)了，它可以出現(xiàn)在APP中的各個(gè)界面中，如：首頁(yè)、個(gè)人中心、運(yùn)營(yíng)活動(dòng)頁(yè)等等，造作新家APP的首頁(yè)就用到了banner圖。
作為文字的輔助元素，圖片的含義需要和文字相符合才能更好地輔助傳達(dá)文字的意思，反之會(huì)讓用戶覺(jué)得困惑。
圖片與文字之間加黑色到透明度（10-60%）的遮罩，保證文字內(nèi)容區(qū)域在黑色區(qū)域，目的是為了能讓用戶看清文字。
根據(jù)圖片整體的色調(diào)，在圖片上加與圖片色調(diào)統(tǒng)一的顏色遮照，保證文字的可識(shí)別性，不影響圖片的正常顯示。 
圖片與文字之間加透明度的漸變遮罩，讓文字顯得更加清晰，使畫(huà)面過(guò)度更加協(xié)調(diào)。
在很多場(chǎng)景下我們都會(huì)采用到封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會(huì)在背景上加一個(gè)深色半透明蒙層。半透明層可以取黑色、深灰色、背景顏色（深），透明度為（25%-40%），它們呈現(xiàn)出來(lái)的效果都各有不同，我們可以根據(jù)不同的場(chǎng)景選擇不同的方案。
圖片圓角的使用也是十分有講究，根據(jù)不同的產(chǎn)品屬性去設(shè)定氣質(zhì)相符的圓角設(shè)計(jì)。
小圓角或直角：視覺(jué)印象是硬朗、高冷、具有攻擊性的，多用于時(shí)尚、高端、沖突感強(qiáng)烈的設(shè)計(jì)中；
大圓角：視覺(jué)映像是有親和力，柔軟，安全的，多用于母嬰產(chǎn)品、二次元產(chǎn)品、娛樂(lè)性強(qiáng)的設(shè)計(jì)中。
在設(shè)計(jì)banner圖時(shí)我們?nèi)绻皇窃诳蚩蚶镒鲈O(shè)計(jì)，有時(shí)候未免顯得太呆板，我們可以突破畫(huà)框讓內(nèi)容溢出，營(yíng)造更大的氛圍，近而使整個(gè)畫(huà)面更具有沖擊力。
圖片投影的方式一共分為7大類(lèi)別，分別為：普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動(dòng)投影。（投影制作步驟可查看我之前發(fā)布的文章《七種投影詳細(xì)解析》）。而在線上運(yùn)用的最多的就是：普通投影、等高線投影、圖片模糊投影，效果如下：
對(duì)于位圖，我們?cè)诰€上場(chǎng)景中最常使用的文件格式無(wú)非是PNG與JPEG（在特殊情況下會(huì)用到動(dòng)畫(huà)GIF）。
無(wú)損文件格式，我們UI設(shè)計(jì)師出圖的首選，不會(huì)輕易造成細(xì)節(jié)像素模糊或輸出文件變色的情況，并且支持alpha通道（透明度）。所以對(duì)于高質(zhì)量圖像文件建議輸出為PNG格式，不過(guò)正因?yàn)橄袼責(zé)o損，所以PNG文件大小相對(duì)較大，在特定情況下可以選擇8位處理的做法來(lái)減小文件大小，在保證盡可能縮小文件大小的同時(shí)，也不會(huì)降低圖像質(zhì)量。
JPEG格式會(huì)損失掉圖片中的一些像素細(xì)節(jié)，所以輸出JPEG通常會(huì)比輸出PNG的文件大小更小，適用于對(duì)于圖片質(zhì)量要求不過(guò)高的場(chǎng)景。并且JPEG格式支持對(duì)文件質(zhì)量進(jìn)行二次壓縮，我們可以選擇使用JPEG格式質(zhì)量壓縮的方式，在文件大小和圖像質(zhì)量之間找到平衡。
UI界面中常用的圖片比例是1:1、3:2、4:3、16:9。
1:1是傳統(tǒng)的120膠片畫(huà)幅，也叫大畫(huà)幅，因?yàn)橄鄼C(jī)結(jié)構(gòu)和其他一些原因?qū)е铝四z片是方形的，此比例更容易將構(gòu)圖規(guī)整的簡(jiǎn)單，能突出主體圖片，通常用于頭像、電商圖片等。
3:2這個(gè)尺寸源于135膠卷的比例，采用這一比例并不是因?yàn)樗屈S金比例，而是由相機(jī)的像場(chǎng)大小決定的，這個(gè)尺寸運(yùn)用到線上時(shí)適用于以內(nèi)容為主的應(yīng)用。
4:3是隨著攝影的發(fā)展，微單的出現(xiàn)而誕生的，3:2尺寸與4:3尺寸極為相似，在做設(shè)計(jì)時(shí)很容易混淆，不過(guò)在同屏顯示中，4:3的圖片內(nèi)容顯示略大于3:2，所以4:3尺寸更適用于以圖片為主或圖片與內(nèi)容比重相同的應(yīng)用。
16:9是根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人的兩只眼睛視野范圍是一個(gè)長(zhǎng)寬比例為16:9的長(zhǎng)方形，所以電視、顯示器行業(yè)根據(jù)這個(gè)的黃金比例尺寸設(shè)計(jì)產(chǎn)品。這個(gè)尺寸的圖片在線上運(yùn)用于視頻播放的圖片顯示。
柵格系統(tǒng)以規(guī)則的網(wǎng)絡(luò)陣列來(lái)指導(dǎo)和規(guī)范版面布局以及信息分布，而UI設(shè)計(jì)里常用的柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展起來(lái)，柵格系統(tǒng)有時(shí)候也稱為網(wǎng)格系統(tǒng)。
柵格系統(tǒng)在圖片的排版布局、尺寸設(shè)定方面給了設(shè)計(jì)者直觀的參考，它讓圖片變得有規(guī)律，從而減少了設(shè)計(jì)決策成本，使整個(gè)畫(huà)面更加具有條理，讓內(nèi)容的可讀性變高。
移動(dòng)端常用的柵格系統(tǒng)最小單位為4px（@1x）或3px（@1x），那么我們來(lái)看看airbnb是如何用3px（@1x）的柵格系統(tǒng)來(lái)確認(rèn)banner的尺寸大?。╯ketch軟件-顯示-布局，就可以打開(kāi)柵格系統(tǒng)布局面板）：
如上圖，airbnb的柵格系統(tǒng)布局設(shè)置總寬為328px（總寬為中間6列+4個(gè)間距寬度），偏置為24px（左側(cè)初始偏置像素），列數(shù)為6（一共分為6列），列寬45px（列數(shù)的寬度），間距寬度為12px（當(dāng)不能除正數(shù)時(shí)，會(huì)自動(dòng)把間距縮小1px，所以會(huì)看到有些間距為11px，有些間距為12px）
當(dāng)設(shè)定好柵格系統(tǒng)后，我們就可以很好的得出圖片的寬度：158px（45+11+45+12+45）。再根據(jù)圖片比例的尺寸3:2，我們就可以算出圖片的高度為：106px（158*3x2），所以圖片的像素為：158px X 106px。根據(jù)相同的方法，我們可以用柵格系統(tǒng)+尺寸比例得出更多的尺寸大小。（注：不管是3px或4px柵格，都會(huì)出現(xiàn)除不整的情況，如上圖中的11px，這個(gè)不用擔(dān)心，不影響大局。）
在對(duì)banner圖進(jìn)行輸出時(shí)要考慮倍率的大小，每個(gè)產(chǎn)品會(huì)根據(jù)產(chǎn)品的特性來(lái)決策輸出的倍率，有些產(chǎn)品用二倍圖輸出，有些產(chǎn)品用3倍圖輸出，各有利弊。
標(biāo)準(zhǔn)分辨率的顯示器具有1：1的像素密度（即@1x），其中一個(gè)像素占位一個(gè)點(diǎn)。高分辨率顯示器具有更高的像素密度， 2倍或3倍的比例系數(shù)（即@2x、@3x）。當(dāng)1倍的位圖放在2倍或3倍的尺寸下時(shí)，就會(huì)出現(xiàn)圖片損傷現(xiàn)象（失真），那么我們到底該用幾倍圖去制作banner圖呢？
優(yōu)點(diǎn)：導(dǎo)出文件比@3x小，可平衡圖片質(zhì)量和線上文件大小的一個(gè)優(yōu)質(zhì)方案。
缺點(diǎn)：雖然@2x可向下適配@1x，但適配@3x放大后圖片會(huì)微微模糊，所以我們?nèi)绻聾2x導(dǎo)出圖片，那么banner內(nèi)的文字不能過(guò)小或過(guò)于密集、粗曠，畫(huà)面中也不能出現(xiàn)過(guò)多的效果，不然會(huì)看出明顯的模糊痕跡（如下圖的頂部文字與按鈕文字放大后就有明顯的模糊痕跡）
優(yōu)點(diǎn)：@3x可向下適配@1x與@2x，能夠很好的保證不同尺寸下的圖片質(zhì)量，對(duì)視覺(jué)要求高的項(xiàng)目就必須用3倍圖來(lái)設(shè)計(jì)。
缺點(diǎn)：輸出的文件相對(duì)較大。
圖片的適配類(lèi)型非常多，對(duì)于不同的布局適配場(chǎng)景我們選擇的適配方案也不同，圖片適配一共分為3大類(lèi)：智能適配、設(shè)計(jì)師制圖適配、用戶裁剪適配。
簡(jiǎn)單來(lái)說(shuō)智能適配是指通過(guò)后臺(tái)代碼的約束對(duì)上傳的圖片進(jìn)行智能匹配，匹配內(nèi)容包含圖片大小、圖片尺寸以及圖片的展現(xiàn)方式。
圖片大小：可以限制上傳圖片的最大尺寸。
圖片尺寸：可以限制圖片的長(zhǎng)（寬）最小值，也可以限制圖片的精準(zhǔn)尺寸。
圖片展現(xiàn)方式：可以設(shè)定圖片在容器中的呈現(xiàn)方式，下面是最常見(jiàn)的8個(gè)圖片呈現(xiàn)方式。
當(dāng)你無(wú)法保證用戶發(fā)幾張圖片，無(wú)法預(yù)估圖片的比例時(shí)，我們就可以去設(shè)定它相應(yīng)的規(guī)則使之適配。
*1、單張布局：
不管用戶上傳幾張圖片，F(xiàn)eed流中以一張大圖進(jìn)行展現(xiàn)，使用大圖布局的圖片適配方式一般有兩種，一種是給予圖片一個(gè)容器大小，讓其內(nèi)容全部展示；另一種是按照?qǐng)D片的上傳比例而變化。
*1-1給予容器大小
我們可以給予圖片一個(gè)容器尺寸（如：300X300px），無(wú)論圖片有多大都不能超過(guò)此容器，為了讓圖片內(nèi)容全部展示出來(lái)且不變形，我們可以讓圖片保持正比例縮放，使長(zhǎng)邊能完全顯示出來(lái)（左上或中心區(qū)域）。這一類(lèi)的適配更偏向于以內(nèi)容為主的產(chǎn)品，下面是常用的兩種適配方案：
*1-2隨圖片比例而變化
如果你想保證圖片最佳的大圖預(yù)覽效果，那么就可以采用隨圖片比例而變化的方案，當(dāng)用戶上傳不同比例的圖片時(shí)，圖片展示的高度與寬度會(huì)根據(jù)我們提供比例縮放。采用該適配方式能將圖片信息表達(dá)完善，圖片占用空間大，適合圖片質(zhì)量高，這一類(lèi)的適配更偏向于以圖片為主的應(yīng)用。
要做這類(lèi)適配時(shí)我們首先要設(shè)定裁切的比例，裁剪比例一般設(shè)置為常用的圖片比例 1:1、4:3、3:2、16:9。我們上傳的圖片可以根據(jù)圖片的比例進(jìn)行自行匹配。當(dāng)圖片越接近正方形則選擇1:1，當(dāng)圖片長(zhǎng)寬比例越大則選擇16:9。
用戶上傳的很多圖片并不是標(biāo)準(zhǔn)比例，如果存在多余像素，那么可以采用保持圖片正比縮放，從圖片中心區(qū)域展示，根據(jù)比例一共可以分為7種展現(xiàn)方式：
我們可以看到上圖，根據(jù)不同比例的尺寸展現(xiàn)出來(lái)的頁(yè)面占比也是不同的，如果產(chǎn)品對(duì)頁(yè)面承載信息量有較高要求，那么可以去除16:9、3:2、4:3的縱向尺寸。
瀑布流的圖片適配方法需要規(guī)定圖片比例，并且每個(gè)比例的容器大小是固定的，呈現(xiàn)方式也是保持圖片正比縮放，從圖片中心區(qū)域展示。
*3、宮格：
宮格式布局簡(jiǎn)單來(lái)說(shuō)就是有規(guī)律的方形布局(1:1尺寸)，宮格布局的形式多種多樣可以是九宮格、四宮格、三宮格，下面以較為復(fù)雜的九宮格的適配為例，當(dāng)然最好的參考或者最常見(jiàn)的就是微信朋友圈。
對(duì)于特殊頁(yè)面的圖片展示，我們?yōu)榱顺尸F(xiàn)最好的視覺(jué)效果，需要設(shè)計(jì)師對(duì)圖片進(jìn)行單獨(dú)尺寸的適配設(shè)計(jì)，并且輸出多個(gè)尺寸的圖片進(jìn)行上傳。
例如在適配開(kāi)屏頁(yè)時(shí)就對(duì)其進(jìn)行了單獨(dú)的制圖適配，想要讓二倍圖適配三倍圖，最簡(jiǎn)單的方法就是把畫(huà)面的上下區(qū)域留出更多的空間，中心畫(huà)面放大10%，可操作按鈕放置畫(huà)面安全區(qū)域：
如果設(shè)計(jì)師不進(jìn)行制圖適配，把適配交給程序處理，那么最終呈現(xiàn)的圖片就會(huì)顯得非常糟糕。如下圖1的強(qiáng)行適配，使得整個(gè)banner比例非常不協(xié)調(diào)，讓人看了后覺(jué)得十分廉價(jià)；下圖2則稍微好一點(diǎn)，雖然保證了畫(huà)面的視覺(jué)中心，但是整體畫(huà)面看起來(lái)過(guò)于飽滿，沒(méi)有任何呼吸感，并且“點(diǎn)擊參與”按鈕過(guò)于靠下，容易與home指示器造成誤操作。
當(dāng)用戶想要呈現(xiàn)某些重要信息或識(shí)別性信息時(shí)，就可以把主動(dòng)權(quán)交給用戶，讓用戶進(jìn)行自行裁剪，如頭像、身份證信息。用戶上傳圖片后，我們可以給用戶設(shè)定一個(gè)默認(rèn)裁剪區(qū)域，當(dāng)用戶不想進(jìn)行繁瑣時(shí)可以直接默認(rèn)系統(tǒng)裁剪，如上傳頭像，我們可以把默認(rèn)區(qū)域設(shè)置為圖片的中心區(qū)域。
小紅書(shū)在選擇頭像時(shí)默認(rèn)裁剪區(qū)域是圖片的中心區(qū)域1:1圓形，并且圖片是短邊顯示，無(wú)論什么比例的圖片都能全部展示在選區(qū)內(nèi)，當(dāng)你想要把圖片脫離到選區(qū)外，系統(tǒng)會(huì)自動(dòng)使圖片彈回。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片模糊，選擇狀態(tài)則是選區(qū)內(nèi)圖片高清，選區(qū)外圖片黑色不透明遮罩（高透明度）。
微信在選擇頭像時(shí)默認(rèn)裁剪區(qū)域是圖片的中心區(qū)域1:1正方形，圖片一樣是短邊顯示，也不能讓圖片脫離到選區(qū)外，但是能拖動(dòng)并放大縮小選區(qū)框。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片有黑色不透明遮罩，選擇狀態(tài)則是圖片內(nèi)容全部高清呈現(xiàn)。
作者：黑獅力 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn