首頁(yè)

B端設(shè)計(jì)之導(dǎo)航

純純

在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ū)Ш?


| 橫向?qū)Ш?


優(yōu)點(diǎn):

  1. 通常使用比較少的菜單,簡(jiǎn)單,容易記憶;

  2. 位于頁(yè)面頂部,不占用橫向空間;

  3. 由于位于頂部,在視覺(jué)上更突出,更容易識(shí)別;

  4. 菜單選項(xiàng)之間視覺(jué)權(quán)重的區(qū)分更明顯,左邊最強(qiáng)右邊最弱;


缺點(diǎn):

  1. 擴(kuò)展性有限,不能很好的承載大量和多層級(jí)菜單;

  2. 占用屏幕高度,特備是當(dāng)固定于屏幕頂部時(shí);

  3. 來(lái)回切換菜單選項(xiàng)時(shí),橫向移動(dòng)鼠標(biāo)的距離更長(zhǎng),操作效率更低;


縱向?qū)Ш?


| 縱向?qū)Ш剑?


優(yōu)點(diǎn):

  1. 能夠承載的菜單項(xiàng)數(shù)量和層級(jí)更多,擴(kuò)展性強(qiáng);

  2. 不占用屏幕高度且可以收起,為內(nèi)容提供更多空間;

  3. 在菜單間切換時(shí)鼠標(biāo)移動(dòng)距離短;

  4. 能夠更好地適應(yīng)屏幕寬度較小的設(shè)備;


缺點(diǎn):

  1. 菜單數(shù)量多層級(jí)復(fù)雜時(shí),不容易記憶;

  2. 菜單選項(xiàng)文字不宜過(guò)長(zhǎng),可能會(huì)截?cái)啵?

  3. 各菜單選項(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é)一下:

  1. 橫向?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ì)公司



你居然不知道默認(rè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ú)性別頭像

單個(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ù)用戶男女比例的不同有以下三種情況。



1.只有男性默認(rèn)頭像

產(chǎn)品定位以男性居多,無(wú)論用戶男女都僅有男性默認(rèn)頭像。

特點(diǎn):只設(shè)計(jì)一個(gè)男性頭像,比較快捷,但對(duì)女性用戶不太友好



2.只有女性默認(rèn)頭像

產(chǎn)品定位以女性居多,無(wú)論用戶男女都僅有女性默認(rèn)頭像。

特點(diǎn):只設(shè)計(jì)一個(gè)女性頭像,比較快捷,但對(duì)男性用戶不太友好



3.分別設(shè)計(jì)男女默認(rèn)頭像

產(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頭像是除去以吉祥物為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)用。

 


八、劃重點(diǎn)

本文著重介紹了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ì)公司


B端設(shè)計(jì)指南—3D可視化

純純

數(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ì)師較為稀缺。


3D數(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ì)。


3D數(shù)據(jù)可視化的UI設(shè)計(jì)師需要具備哪些能力?

在我看來(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)又能非常到位。


3D數(shù)據(jù)可視化的UI設(shè)計(jì)師產(chǎ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ì)公司


B端設(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)討論討論篩選控件

 


1、篩選存在的意義


篩選存在的對(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è)我們CRM用戶日常使用的場(chǎng)景來(lái)說(shuō):

 

比如今天作為一個(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ì)于特定情況下的使用



篩選和搜索、導(dǎo)航的區(qū)別?

 

篩選可以通過(guò)多個(gè)篩選條件進(jìn)行多維度的尋找,而導(dǎo)航、搜索只能通過(guò)單一條件進(jìn)行指定篩選。

雖然在現(xiàn)在很多搜索都可以支持多維度用空格去進(jìn)行多字段的關(guān)鍵詞搜索,但本質(zhì)上區(qū)別不大

所以在B端項(xiàng)目當(dāng)中,如果你有表單,那你就需要篩選



2、篩選的類(lèi)型


我們將篩選分為基礎(chǔ)篩選和高級(jí)篩選兩種,兩種篩選會(huì)根據(jù)業(yè)務(wù)場(chǎng)景不同,在不同的頁(yè)面去使用

 

2.1、基礎(chǔ)篩選


基礎(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)景下使用。


2.2、高級(jí)篩選


高級(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è)篩選操作 提供有利保障。




3、篩選的布局


3.1、上下布局


當(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)景



3.2、左右布局


左右布局在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)




4、篩選的形式


在日常的B端產(chǎn)品中,篩選的形式有哪些?篩選到底應(yīng)該怎么設(shè)計(jì)?接下來(lái)為大家總結(jié)梳理一些在 B端產(chǎn)品 中的篩選玩法,希望為你開(kāi)啟新大陸。


4.1、平鋪型



平鋪型一般為用戶搜索結(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)


4.2、收折型



收折型篩選是一種簡(jiǎn)單直接的篩選形式,將用戶常用的篩選形式通過(guò)下拉框的形式進(jìn)行篩選。每一個(gè)篩選條件就是一個(gè)下拉框,這種形式看上去很簡(jiǎn)單,但是在B端場(chǎng)景中,下拉框?qū)τ谟脩魜?lái)說(shuō)認(rèn)知成本低,操作性也較強(qiáng),同時(shí)在用戶重度使用時(shí),又能給用戶很好的使用體驗(yàn)的一種方式

 

優(yōu)點(diǎn):

用戶可以直接對(duì)其常用的字段篩選進(jìn)行一步操作,并且沒(méi)有復(fù)雜的篩選關(guān)系,全部都是“且”的篩選邏輯,能夠保證用戶進(jìn)行快速的篩選選擇

 

缺點(diǎn):

將所有信息全部平鋪展開(kāi),信息量過(guò)于冗雜繁多,同時(shí)在做通用性產(chǎn)品時(shí),這種方式很難做到通用性


 

4.3、單側(cè)篩選



單側(cè)篩選是一種更通用的篩選形式,通過(guò)對(duì)于你想篩選的字段進(jìn)行勾選,勾選完成后就會(huì)出現(xiàn)篩選條件,然后選擇篩選字段、篩選操作、篩選值,一般選擇完成所有篩選后,還需要點(diǎn)擊查詢,篩選操作才算完成。

 

整個(gè)單側(cè)篩選,大量的篩選條件可以放置在表單的左側(cè)或者右側(cè),通過(guò)表單縱向空間,去承載大量篩選條件。

 

優(yōu)點(diǎn):

節(jié)省空間、通用性強(qiáng)。因?yàn)樵诤芏郤aas系統(tǒng)、Paas系統(tǒng)當(dāng)中,無(wú)法針對(duì)每一個(gè)客戶進(jìn)行設(shè)計(jì),就要考慮到系統(tǒng)通用型高,做一些大而全的功能。在每個(gè)表單也所需要定制化修改的地方很少,同時(shí)能容納的信息量可以很大。

 

缺點(diǎn):

就是在后臺(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ù)才慢慢減少。



4.4、表頭篩選

 


表頭篩選是一種復(fù)雜篩選的形式,其最開(kāi)始是來(lái)源于Excel的篩選形式。點(diǎn)擊表單的篩選按鈕,可以將表頭的篩選字段直接帶入,方便用戶。之后在后臺(tái)產(chǎn)品的發(fā)展中,得以借鑒過(guò)來(lái)。

 

優(yōu)點(diǎn):

可以通過(guò)表頭的點(diǎn)擊,使用戶更快捷進(jìn)入到自己的篩選條件,在通常情況下,在表單越左的數(shù)據(jù)顯然是越重要的,也是使用篩選去篩頻率最高的,因此高頻的篩選場(chǎng)景基本還是得到滿足。


缺點(diǎn):

用戶第一次進(jìn)入系統(tǒng)很難理解這種交互形式,且在每個(gè)表頭都會(huì)有一個(gè)icon,影響用戶對(duì)于表頭的識(shí)別。

 

 

4.5、彈窗式



通過(guò)點(diǎn)擊篩選按鈕,展現(xiàn)出篩選彈窗,進(jìn)行篩選。這種篩選適合在篩選功能在系統(tǒng)中不是很重要的層級(jí)。最常見(jiàn)的就是Tapd,在其中篩選不是很強(qiáng)的一個(gè)功能,同時(shí)也是系統(tǒng)中十分有必要的。

 

優(yōu)點(diǎn):

是能夠在節(jié)省面積的情況下,可以進(jìn)行很復(fù)雜的篩選,同時(shí)可以支持復(fù)雜情況下的篩選

 

缺點(diǎn):

彈窗會(huì)遮擋一部分表單數(shù)據(jù),會(huì)影響篩選人的判斷,其次篩選條件的添加也相對(duì)更加繁瑣。

 

 


5、選擇更合適的篩選

在我們一系列篩選的調(diào)整過(guò)后,我們團(tuán)隊(duì)也總結(jié)了對(duì)于我們來(lái)說(shuō)更重要的條件和形式,來(lái)和大家分享探討一下。

 

5.1、使用頻率

我們認(rèn)為影響篩選控件最重要的是用戶的使用頻率,因?yàn)橛脩舻氖褂妙l率和使用方式,直接影響到我們篩選是用普通篩選or高級(jí)篩選,也會(huì)影響到篩選的形式。

 

5.2、滿足實(shí)際業(yè)務(wù)所需

篩選功能的做法,取決于我們產(chǎn)品未來(lái)是想往哪一個(gè)方向發(fā)展,如果想把功能做的強(qiáng)大,就得考慮到篩選的后續(xù)擴(kuò)展性。因此滿足實(shí)際業(yè)務(wù)也是十分重要。

 

5.3、用戶認(rèn)知成本

在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ì)公司


勛章設(shè)計(jì)怎么搞?淺析勛章頁(yè)面設(shè)計(jì)細(xì)節(jié)

純純

提起用戶激勵(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ì)公司


從理論到落地,B端移動(dòng)app設(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ì)越多樣。


表單設(shè)計(jì)

大部分場(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)。

 

列表視覺(jué)差異化設(shè)計(jì)

貼近場(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ù)。


設(shè)計(jì)優(yōu)秀圖表

激勵(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)景。


工作臺(tái)案例

我們來(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ì)策略

設(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è)計(jì)師的發(fā)力點(diǎn)

純純

其實(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)容上呢?



  • 視覺(jué)層


眾所周知,在整個(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)方式呢?


1.1 插畫(huà)

圖形的設(shè)計(jì)表現(xiàn)中,我第一個(gè)聯(lián)想到的就是插畫(huà),但是插畫(huà)的類(lèi)型和使用方式也分為很多種。


1.1.1 功能插畫(huà)

首先我們先設(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í)成本。


1.1.2 場(chǎng)景插畫(huà)

像一些頁(yè)面中還可以利用場(chǎng)景插畫(huà)去表現(xiàn),不僅可以打造內(nèi)容的差異性,還可以快速讓用戶融入到場(chǎng)景中,進(jìn)一步提升用戶的情感體驗(yàn)。


1.2 品牌強(qiáng)化

品牌設(shè)計(jì)的目的就是為了利用圖形化的元素,去加強(qiáng)用戶的記憶,而隨著產(chǎn)品發(fā)展成熟,為了可以非常有效的去強(qiáng)化品牌,形成產(chǎn)品間的差異性,設(shè)計(jì)在表現(xiàn)層可以利用不同的形式去強(qiáng)化品牌。


1.2.1 風(fē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)想到抖音。


1.2.2 品牌應(yīng)用

除此之外也可以利用品牌元素進(jìn)行一定的延展設(shè)計(jì),像Logo圖形可以用到很多的圖標(biāo)和默認(rèn)圖上,或者也可以使用品牌形象,在一些界面的提示信息、內(nèi)容引導(dǎo)、以及一些插畫(huà)繪制上,都可以進(jìn)行有效的融入,進(jìn)一步達(dá)到品牌延展的功能。


1.3 元素滲透

那么說(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ì)感。


1.4 數(shù)據(jù)可視化

圖形的表現(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)感受一下色彩的美妙吧~


2.1 色彩體驗(yàn)

生活中有著不同的顏色,例如黃昏與清晨、深夜與極光,都有著不同的色彩傾向。除此之外,色彩心理學(xué)中介紹,不同的顏色給予用戶不同的心理感受。


2.1.1 色彩心理學(xué)

例如我們常常所說(shuō)的金色表示尊貴,這就好比現(xiàn)實(shí)生活中的金銀銅牌,他們利用不同的顏色去體現(xiàn)內(nèi)容的品質(zhì),我們恰好可以利用這種顏色運(yùn)用到會(huì)員、勛章等內(nèi)容中,去凸顯會(huì)員的尊享感、情感化,進(jìn)一步強(qiáng)化用戶的身份感知。


2.1.2 暗黑模式

顏色的感受也可以利用到全局的設(shè)計(jì)配色上,我相信大家肯定都非常熟悉前段時(shí)間非?;鸨陌岛谀J剑@就是利用不同的顏色來(lái)打造特殊的模式,而暗黑模式可以使得用戶在黑夜也能舒適的使用產(chǎn)品,并且一定程度上節(jié)約手機(jī)的電耗。


但不是所有的深色系產(chǎn)品都是暗黑模式,我們也可以利用這種顏色搭配打造不同的產(chǎn)品氛圍與特色。例如抖音、MOO音樂(lè)等等。


2.1.3 無(wú)障礙設(shè)計(jì)

并且隨著互聯(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)。


2.2 沉浸式體驗(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)分享我的心得。


3.1 字體排版

字體排版中的字體行高、間距、段落等等,這些都是一名設(shè)計(jì)師必須去掌握的基礎(chǔ),但是有一些看似簡(jiǎn)單的規(guī)則,卻常常會(huì)被忽略。


3.1.1 避首位法則

例如下面案例中的結(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)整齊一致。


3.1.2 空格處理

空格是我們平時(shí)接觸最多的一種字符了,常使用與內(nèi)容分割中,但是在排版中有很多場(chǎng)景也會(huì)用到空格。


例如英文排版中的點(diǎn)號(hào)后面需要加空格,不然會(huì)導(dǎo)致語(yǔ)句之間過(guò)于擁擠,而中英文結(jié)合的時(shí)候,之間也是需要空格進(jìn)行分割處理,除此之外中文和數(shù)字之間也是如此。


3.2 字體類(lèi)型

字體的類(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ì)被破壞掉。


3.3 字體內(nèi)容

既然聊到字體,那我們順便再來(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)容。


3.3.1 情感文案

而微文案的體現(xiàn)也分為兩個(gè)部分,例如下圖中所展示的情感文案,百度網(wǎng)盤(pán)的會(huì)員到期提示,擬用“藏頭詩(shī)”的形式,渴望留住用戶。


3.3.2 微文案

除了上面所描述情感文案外,我們還可以利用文案內(nèi)容來(lái)影響用戶行為,往往是這種越細(xì)節(jié)的地方越是存在著成就或破壞用戶體驗(yàn)和轉(zhuǎn)化率的因素,而這些文案一般出現(xiàn)于,提示文案,引導(dǎo)文案,彈窗文案等等,不僅可以解決用戶的疑惑,還能進(jìn)一步引導(dǎo)操作。



  • 結(jié)構(gòu)


說(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ā)。


4.1 場(chǎng)景化體驗(yàn)設(shè)計(jì)

場(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ì)。


4.1.1 用戶需求

像我們常見(jiàn)的一些首頁(yè)布局中,其實(shí)有也簡(jiǎn)單的分層,我們可以根據(jù)用戶不同的目的來(lái)進(jìn)行布局拆分。


下面的案例從上到下依次為,目的明確的搜索用戶、分類(lèi)明確的用戶以及只想隨便看看的用戶,這樣的話,可以有效的服務(wù)與不同用戶的目的,也可以快速實(shí)現(xiàn)流量分發(fā)的作用。


4.1.2 用戶行為

而這兩個(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ù)。


4.1.3 用戶身份

而關(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ì)。從而有效的提高不同階段用戶的行為決策。


4.2 拓展卡片

論最出色的界面布局結(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)行延展。


4.3 內(nèi)容 · 信息流

眾所周知,產(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)流。


4.4 布局 · 半模態(tài)卡片

上面所說(shuō)到的xpanel,是將卡片附著與信息之上,跟著這個(gè)思路發(fā)展,我們便產(chǎn)生了下圖所示中的半模態(tài)卡片布局,雖然追波之前出現(xiàn)一大批疊上疊上疊中疊的布局,但通過(guò)線上的實(shí)際使用最終發(fā)現(xiàn),疊一層才是比較合理的方式,而這種布局有著良好的空間收納能力與信息拓展能力。



  • 質(zhì)感


質(zhì)感是設(shè)計(jì)師在表現(xiàn)的時(shí)候最直觀的體現(xiàn),也可以稱為設(shè)計(jì)風(fēng)格,但風(fēng)格近幾年間也發(fā)生了很大的變化,從起初的擬物到扁平,而最近也有很多不同“流派”的質(zhì)感表現(xiàn),下面我將舉例給大家欣賞一番。


5.1 新擬態(tài)風(fēng)格

前段時(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)。


5.2 磨砂玻璃風(fēng)格

磨砂玻璃的質(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á)信息,讓信息可閱讀、易閱讀。


5.3 微色彩漸變

隨著大屏手機(jī)的興起,單屏顯示高度也明顯增高,而大部分頁(yè)面內(nèi)容并不能占據(jù)一屏空間,因此利用設(shè)計(jì)手法去強(qiáng)化頁(yè)面頭部,除了元素裝飾外,就是這種淡淡的色彩漸變效果,起初只運(yùn)用于少部分頁(yè)面中,但慢慢的這種效果開(kāi)始流行起來(lái),越發(fā)廣泛。



  • 動(dòng)效


動(dòng)效設(shè)計(jì),顧名思義就是動(dòng)起來(lái)的效果,這種表現(xiàn)形式使得靜態(tài)的頁(yè)面可以更加靈活的動(dòng)起來(lái),不僅可以使得操作體驗(yàn)更加順暢,也可以在某種程度上吸引、引導(dǎo)用戶。


6.1 動(dòng)效轉(zhuǎn)場(chǎng)

在動(dòng)效的編排中,轉(zhuǎn)場(chǎng)是非常關(guān)鍵的一部分,我之前也專(zhuān)門(mén)寫(xiě)過(guò)一篇《交互動(dòng)效-轉(zhuǎn)場(chǎng)的那些事兒》,感興趣的朋友可以再碰個(gè)場(chǎng),支持下。


6.1.1 入場(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)容。


6.1.2 持續(xù)元素

在很多優(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)化交互流暢感。


6.1.3 停留元素

在整個(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)。


6.2 信息折疊

產(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)效的形式,輔助信息布局更合理。


6.2.1 同類(lèi)信息

下圖的案例來(lái)自vivo全新的原子隨身聽(tīng),利用現(xiàn)實(shí)生活中音樂(lè)播放器的樣式,將同類(lèi)app進(jìn)行收納,完美的體現(xiàn)了,在較小的空間布局下如何展示更多的內(nèi)容。


6.2.1  容器折疊

與此同時(shí)也會(huì)發(fā)現(xiàn)很多產(chǎn)品中利用容器來(lái)承載信息,典型的案例就是FAB按鈕,用戶操作后再利用動(dòng)效的形式進(jìn)行反饋,其實(shí)和上面的相差不大,只不過(guò)他屬于不同信息共用同一區(qū)域。


6.2.3 觸發(fā)展示

網(wǎng)頁(yè)端有一個(gè)不同于移動(dòng)端的交互,那就是hover,因此我們可以利用這種交互方式,去處理信息的重要層級(jí),然后根據(jù)用戶的操作再進(jìn)行詳細(xì)露出,很大程度上優(yōu)化了信息空間展示。


6.3 交互流程

隨著產(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),支持下。


6.3.1 操作預(yù)知

利用動(dòng)效的形式,提升用戶在交互流程中的操作預(yù)知,例如下圖的分類(lèi)圖表,充分的體現(xiàn)內(nèi)容的含義,進(jìn)一步強(qiáng)化用戶操作前的預(yù)知性。


6.3.2 交互反饋

在一些結(jié)構(gòu)復(fù)雜的頁(yè)面中,我們可以通過(guò)合理安排交互動(dòng)效,轉(zhuǎn)場(chǎng)方式、狀態(tài)反饋等等一系列的設(shè)計(jì),有效的對(duì)界面層級(jí)路徑梳理。


  • 總結(jié)


其實(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ì)公司



關(guān)于信息層級(jí)那些事兒

純純

01.寫(xiě)在前面

大家有沒(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è)面,從而讓整體排版變得更加清晰合理。

02.信息層級(jí)的作用

信息層級(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)。

03.如何做好信息層級(jí)

既然信息層級(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í)的處理方案。

04.信息層級(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í)。

05.信息層級(jí)排布處理

信息排布的本質(zhì)是通過(guò)我們對(duì)信息進(jìn)行排列上的調(diào)整,來(lái)將多余的層級(jí)融入到三層以內(nèi)。從而讓我們整體的頁(yè)面顯得更加簡(jiǎn)潔。



通過(guò)目前的實(shí)踐總結(jié),我覺(jué)得目前可以有以下五種方法來(lái)幫助我們更合理地安排信息層級(jí)。



5.1 信息分組

信息分組是大家在設(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á)清晰明確。

5.2 利用組件拆分

組件其實(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ì)致的查閱。

5.3 更改布局

通過(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)潔。



5.4 信息融入

我們可以利用信息融入的形式來(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)的搜索范圍。

5.5 信息弱化

信息弱化的原則是,將某些超出層級(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)始的從源頭去追溯這些所有信息是否必要。

06.信息層級(jí)小細(xì)節(jié)

在研究的過(guò)程中,也總結(jié)了目前在進(jìn)行信息層級(jí)排布過(guò)程中比較糾結(jié)的一些細(xì)節(jié)點(diǎn),也分享給大家。希望對(duì)遇到相同問(wèn)題的同學(xué)一些幫助。

6.1 被忽略的沿著字的軸線對(duì)齊

大家對(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)中顯得更整齊。

6.2 卡片是用線框還是背景

這是我平時(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)。



6.3 底色用灰色塊還是彩色塊

在進(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é)。

07.寫(xiě)在最后

本期的內(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ì)公司


設(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. 1.提升二級(jí)頁(yè)面的跳轉(zhuǎn)率;

  2. 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. 1.廣告宣傳的推廣;

  2. 2.電商平臺(tái)的轉(zhuǎn)化;

  3. 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é)



一、線上圖片的四大類(lèi)別



1、 信息圖片:


在頁(yè)面中單獨(dú)存在的圖片,以圖片為主要元素傳達(dá)給用戶有效信息。


例如好好住APP,它在“看圖板塊”中就使用了信息圖片,重點(diǎn)表現(xiàn)圖片的信息,周?chē)鸁o(wú)任何干擾元素或輔助信息元素。

 

2、 背景圖片:


背景圖片可以用于單個(gè)元素,也可以用于整體畫(huà)面,主要作用于營(yíng)造氛圍。


單個(gè)元素:例如嘀嗒出行的“優(yōu)惠券板塊”,把插畫(huà)圖片應(yīng)用在單個(gè)卡片中。


整體畫(huà)面:例如網(wǎng)易云音樂(lè)的“聽(tīng)歌頁(yè)面”,它就把歌曲封面的圖片作為頁(yè)面整體的背景。(圖片進(jìn)行了模糊處理)

 


3、 Banner圖:


作為導(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圖。


 

4、 信息配圖:


作為文字的輔助元素,圖片的含義需要和文字相符合才能更好地輔助傳達(dá)文字的意思,反之會(huì)讓用戶覺(jué)得困惑。



二、線上圖片常見(jiàn)的五種處理方式


1、圖片遮照:


1-1黑色遮照:

圖片與文字之間加黑色到透明度(10-60%)的遮罩,保證文字內(nèi)容區(qū)域在黑色區(qū)域,目的是為了能讓用戶看清文字。

 

1-2顏色遮照:

根據(jù)圖片整體的色調(diào),在圖片上加與圖片色調(diào)統(tǒng)一的顏色遮照,保證文字的可識(shí)別性,不影響圖片的正常顯示。 


1-3漸變遮照:

圖片與文字之間加透明度的漸變遮罩,讓文字顯得更加清晰,使畫(huà)面過(guò)度更加協(xié)調(diào)。


 

2、背景模糊:

在很多場(chǎng)景下我們都會(huì)采用到封面圖模糊處理后作為背景圖的方案,為保證信息能夠清晰顯示會(huì)在背景上加一個(gè)深色半透明蒙層。半透明層可以取黑色、深灰色、背景顏色(深),透明度為(25%-40%),它們呈現(xiàn)出來(lái)的效果都各有不同,我們可以根據(jù)不同的場(chǎng)景選擇不同的方案。


3、圖片圓角:

圖片圓角的使用也是十分有講究,根據(jù)不同的產(chǎn)品屬性去設(shè)定氣質(zhì)相符的圓角設(shè)計(jì)。


小圓角或直角:視覺(jué)印象是硬朗、高冷、具有攻擊性的,多用于時(shí)尚、高端、沖突感強(qiáng)烈的設(shè)計(jì)中;


大圓角:視覺(jué)映像是有親和力,柔軟,安全的,多用于母嬰產(chǎn)品、二次元產(chǎn)品、娛樂(lè)性強(qiáng)的設(shè)計(jì)中。

 

4、內(nèi)容出界:

在設(shè)計(jì)banner圖時(shí)我們?nèi)绻皇窃诳蚩蚶镒鲈O(shè)計(jì),有時(shí)候未免顯得太呆板,我們可以突破畫(huà)框讓內(nèi)容溢出,營(yíng)造更大的氛圍,近而使整個(gè)畫(huà)面更具有沖擊力。

 

 5、投影

圖片投影的方式一共分為7大類(lèi)別,分別為:普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動(dòng)投影。(投影制作步驟可查看我之前發(fā)布的文章《七種投影詳細(xì)解析》)。而在線上運(yùn)用的最多的就是:普通投影、等高線投影、圖片模糊投影,效果如下:



三、線上圖片使用的五大要點(diǎn)


1、文件大小

對(duì)于位圖,我們?cè)诰€上場(chǎng)景中最常使用的文件格式無(wú)非是PNG與JPEG(在特殊情況下會(huì)用到動(dòng)畫(huà)GIF)。

 

PNG圖片:

無(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圖片:

JPEG格式會(huì)損失掉圖片中的一些像素細(xì)節(jié),所以輸出JPEG通常會(huì)比輸出PNG的文件大小更小,適用于對(duì)于圖片質(zhì)量要求不過(guò)高的場(chǎng)景。并且JPEG格式支持對(duì)文件質(zhì)量進(jìn)行二次壓縮,我們可以選擇使用JPEG格式質(zhì)量壓縮的方式,在文件大小和圖像質(zhì)量之間找到平衡。


2、比例


UI界面中常用的圖片比例是1:1、3:2、4:3、16:9。


1:1

1:1是傳統(tǒng)的120膠片畫(huà)幅,也叫大畫(huà)幅,因?yàn)橄鄼C(jī)結(jié)構(gòu)和其他一些原因?qū)е铝四z片是方形的,此比例更容易將構(gòu)圖規(guī)整的簡(jiǎn)單,能突出主體圖片,通常用于頭像、電商圖片等。


3:2

3:2這個(gè)尺寸源于135膠卷的比例,采用這一比例并不是因?yàn)樗屈S金比例,而是由相機(jī)的像場(chǎng)大小決定的,這個(gè)尺寸運(yùn)用到線上時(shí)適用于以內(nèi)容為主的應(yīng)用。

 

4:3

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

16:9是根據(jù)人體工程學(xué)的研究,發(fā)現(xiàn)人的兩只眼睛視野范圍是一個(gè)長(zhǎng)寬比例為16:9的長(zhǎng)方形,所以電視、顯示器行業(yè)根據(jù)這個(gè)的黃金比例尺寸設(shè)計(jì)產(chǎn)品。這個(gè)尺寸的圖片在線上運(yùn)用于視頻播放的圖片顯示。


3、柵格系統(tǒng)


柵格系統(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)心,不影響大局。)


4、倍率


在對(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ì)較大。


5、圖片適配


圖片的適配類(lèi)型非常多,對(duì)于不同的布局適配場(chǎng)景我們選擇的適配方案也不同,圖片適配一共分為3大類(lèi):智能適配、設(shè)計(jì)師制圖適配、用戶裁剪適配。


1、智能適配:

簡(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)方式。


*智能適配之Feed流圖片適配

當(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的縱向尺寸。



*2、瀑布流:

瀑布流的圖片適配方法需要規(guī)定圖片比例,并且每個(gè)比例的容器大小是固定的,呈現(xiàn)方式也是保持圖片正比縮放,從圖片中心區(qū)域展示。


*3、宮格:

宮格式布局簡(jiǎn)單來(lái)說(shuō)就是有規(guī)律的方形布局(1:1尺寸),宮格布局的形式多種多樣可以是九宮格、四宮格、三宮格,下面以較為復(fù)雜的九宮格的適配為例,當(dāng)然最好的參考或者最常見(jiàn)的就是微信朋友圈。


2、設(shè)計(jì)師制圖適配

對(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指示器造成誤操作。


3、用戶裁剪適配

當(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ì)公司



日歷

鏈接

個(gè)人資料

存檔