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