首頁

你居然不知道默認(rèn)頭像有這么多種設(shè)計方式?

純純

頭像,作為我們在虛擬世界展現(xiàn)給別人的形象,無疑擁有強(qiáng)烈的社交屬性,還記得當(dāng)年剛剛擁有QQ的我,隔一周就會換上自己喜歡的圖片,通過頭像還添加了好些擁有同樣愛好的人。

但是隨著年齡的增長,我們開始不太愛去設(shè)置自己的頭像(有些APP甚至?xí)⒃O(shè)置頭像作為領(lǐng)取獎勵的任務(wù),可見大家越來越不愛設(shè)置頭像),一些不經(jīng)常使用的APP都是習(xí)慣性的使用默認(rèn)頭像。

 

這時候設(shè)計合適產(chǎn)品的默認(rèn)頭像能夠使產(chǎn)品整體更加和諧。接下來我們就來看看默認(rèn)頭像的7種設(shè)計方式。





一、單個無性別頭像

單個無性別頭像是最常見的默認(rèn)頭像設(shè)計方式,以無性別灰色或單色系半身人像為主,有些會使用宇航員的形象(也看不出性別),且一般只有一個。如下圖:

特點:無性別頭像具有更廣的包容性,設(shè)計簡單快捷適合比較趕的項目;但設(shè)計單一,單個無性別頭像的社交屬性不夠強(qiáng)烈。



二、性別頭像

性別頭像以男女性別劃分,根據(jù)用戶男女比例的不同有以下三種情況。



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

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

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



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

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

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



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

產(chǎn)品定位沒有明顯的性別偏向,分別設(shè)計男性和女性頭像,需要注意的是該方式常常需要用戶設(shè)置性別。

特點:分別設(shè)計男性與女性頭像,能滿足大部分用戶,需要開發(fā)判定用戶的性別。



三、吉祥物頭像

吉祥物頭像也是使用很頻繁的,一般擁有吉祥物的APP都會采用該方式設(shè)計默認(rèn)頭像,設(shè)計1個或是多個。


常見吉祥物多以動物為主,也有以人物、擬人物為主的吉祥物,比如B站的看板娘萌妹子和黃油相機(jī)的一坨黃油。

特點:吉祥物頭像更具辨識度,隨時隨刻加深用戶對吉祥物的印象,便于制作延伸設(shè)計。



四、logo頭像

這里的logo頭像是除去以吉祥物為logo的APP后,其他的logo頭像。使用這種默認(rèn)頭像的APP比較少見,目前我看到的有悅動圈和開眼,如下圖:

特點:logo頭像能加深品牌的印象,但缺失了頭像應(yīng)有的社交屬性。



五、文字頭像

頭像中以文字為主,一般僅有兩個字。以釘釘為列,它的默認(rèn)頭像使用用戶姓名后兩位作為中心,我認(rèn)為其實釘釘?shù)哪J(rèn)頭像已經(jīng)可以很好地幫助用戶找到公司對應(yīng)的同事,反而比起某些圖片類自定義頭像來的直接。

還有一種文字頭像是以APP名稱為主,比如叮當(dāng)快藥,它的默認(rèn)頭像取了”叮當(dāng)“二字,和logo頭像類似,同樣能加深品牌印象。

特點:以文字為主,多為兩個字。OA辦公系統(tǒng)可借鑒釘釘以員工姓名為主。也可將APP名稱置入頭像中,能迅速設(shè)計出來,適合時間緊的項目。

 


六、多主題頭像

多主題默認(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)頭像,可以幫助用戶減輕因選擇困難癥不知用何頭像的焦慮。

特點:為用戶提供了豐富的默認(rèn)頭像,能減輕用戶不知使用什么頭像的選擇困難,并且具有一定的趣味性,但設(shè)計花費時間較多,不適合時間緊的項目。



七、捏臉頭像

最后介紹的捏臉頭像,追溯起來應(yīng)該是從iOS12發(fā)布的Memoji延伸而來,這種可以像捏泥人一樣任意改變的頭像具有非常強(qiáng)烈的趣味性,甚至形成了一夜爆紅專門捏臉的APP-ZEPETO。


捏臉頭像的有趣不僅在于可以捏臉,它就像是我們在虛擬世界中的形象,可以給她打扮、布置房間等,更像是延伸出來的裝扮游戲。比如淘寶點擊個人中心的頭像就會進(jìn)入淘寶人生。


soul則將捏臉頭像真正應(yīng)用到了頭像的制作中,在個人中心點擊頭像即可進(jìn)行超級捏臉,捏好后就可以直接應(yīng)用了。

特點:具有強(qiáng)烈的趣味性,可以延伸為單獨的互動游戲,實現(xiàn)難度較大,不適合廣泛的應(yīng)用。

 


八、劃重點

本文著重介紹了7種默認(rèn)頭像的設(shè)計方式,分別是單個無性別頭像、性別頭像、吉祥物頭像、logo頭像、文字頭像、多主題頭像、捏臉頭像,我們在設(shè)計時可以根據(jù)項目時間、產(chǎn)品的定位、趣味性等選擇合適的默認(rèn)頭像。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:人類君   來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


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

純純

數(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è)計群體,而且因為主要面對的客戶大多是ToG或者ToB的項目,項目保密工作做的很好,對外發(fā)聲較少,因此也會顯得特別神秘,行業(yè)門檻也相對較高。但是由于政府和企業(yè)對于這類項目的需求大,再加上城市智慧建設(shè)、軍事電子沙盤、智慧交通,項目多且廣泛,也就導(dǎo)致了這類設(shè)計師較為稀缺。


3D數(shù)據(jù)可視化是什么?

通常所表達(dá)的就是通過3D的游戲引擎(例如:Unity3D)制作出來的數(shù)據(jù)可視化項目,他能夠更直觀的還原出所要展示數(shù)據(jù)可視化的真實場景,并且能夠?qū)崟r接入數(shù)據(jù),使得整個項目更具立體、更具有科技感。使得項目在面對復(fù)雜操作時能靈活應(yīng)對。


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

在我看來,雖然也是UI設(shè)計師,但是他和大眾認(rèn)知中的UI設(shè)計師又有很多不同,比如承載設(shè)計的屏幕可能大到16m*9m、小到只有iPad的尺寸,因此很考驗設(shè)計師對不同尺寸屏幕下的設(shè)計方法。而3D數(shù)據(jù)可視化更多是向空間、建模形式的表達(dá),因此對于三位的理解、空間的交互轉(zhuǎn)變都尤為重要,我在下面來一一拆解需要哪些能力~


視覺能力:在設(shè)計當(dāng)中,視覺也是最基本的能力,其主要滿足這個數(shù)據(jù)可視化當(dāng)中對于場景、物體的視覺能力、數(shù)據(jù)圖表的視覺效果,對于地圖、建筑、數(shù)據(jù)的視覺表達(dá)。通常風(fēng)格以科技感的風(fēng)格為主,因此考驗的更多是我們設(shè)計師的想象力、對于科技產(chǎn)品的表達(dá)能力,因此對于FUI比較重視,如果平時能夠多看科幻電影能夠?qū)@方面能力也會有所提升~


數(shù)據(jù)可視化能力:首先你需要具備很強(qiáng)的數(shù)據(jù)表達(dá)能力,即將用戶想的數(shù)據(jù)現(xiàn)象通過你的數(shù)據(jù)化設(shè)計進(jìn)行表現(xiàn)出來。同時需要去理解每個數(shù)據(jù)之間的真正含義,然后再去設(shè)計,因此對于圖表的理解必須更加深刻。再次因為是通過3D的手法實現(xiàn),你所更需要了解是我設(shè)計的這個圖表,2D和3D之間到底存在什么差異,既然我用了3D,在圖表層面上怎么和2D圖表拉開差距、有所區(qū)別,這是我們需要去認(rèn)真思考的。

三維交互能力:三維軟件的交互和二維不同,雖然在移動端大家都提出了Z軸的概念,但是和現(xiàn)如今所需要的可視化的項目不同。


建模能力:因為在實際工作當(dāng)中,很多建筑物不能夠靠你的三維想象來進(jìn)行設(shè)計稿的制作,因此通常我們也會使用c4d這一類的三維建模軟件,這樣能夠保證快速出設(shè)計稿的同時,對于物體的表現(xiàn)又能非常到位。


3D數(shù)據(jù)可視化的UI設(shè)計師產(chǎn)出是什么?你是怎么落地的?

對于接觸數(shù)據(jù)可視化的UI設(shè)計師來說,最關(guān)心的莫過于這個項目你們是怎么落地。因為每個公司要求不同,我說的只是我們自己的做法,只是想說出來和大家分享分享~

一般我們產(chǎn)出的會幾個東西:設(shè)計靜幀圖(包含靜幀圖、標(biāo)注、切圖)、視頻demo、交互流程(看項目)



基本流程:這個是必須要的,首先項目會根據(jù)我們所出的設(shè)計靜幀圖進(jìn)行和需求方進(jìn)行對接,確定他們想要的效果和設(shè)計靜幀稿上是否一直。如果雙方理解存在差異,就會按照要求進(jìn)行修改。修改完成后會將設(shè)計靜幀稿交到建模師手中,3D建模會根據(jù)你這個靜幀圖進(jìn)行建模。當(dāng)然,我們設(shè)計師是不需要制作模型的,如果會,當(dāng)然也是更好,能夠方便建模師進(jìn)行快速建模。但是因為每個項目的要求不同,對于我們這種設(shè)計師來說時間相對很緊。對于我們來說需要進(jìn)行快速的出圖,從而能夠和需求方進(jìn)行方案的確定。


設(shè)計靜幀圖:他最大的作用是和需求方進(jìn)行溝通,以及和建模師進(jìn)行效果確定。還有后續(xù)驗收時會根據(jù)靜幀圖進(jìn)行效果評定~


標(biāo)注:字體、字號、顏色、位置、基本數(shù)據(jù)參數(shù),標(biāo)注和之前大家熟悉的思路基本一致。


切圖:icon、圖片,開發(fā)不能通過代碼進(jìn)行實現(xiàn)的


視頻demo:會根據(jù)項目的難以程度進(jìn)行制作,通常在較大項目中,會有時間進(jìn)行視頻demo的制作,同時demo也會給需求方、開發(fā)進(jìn)行很好的演示,使得整個項目在開發(fā)當(dāng)中能夠更加明確。


交互流程:但是我們需要考慮到的是設(shè)計后整個效果是如何,以及設(shè)計后整個點擊過后的交互,因此在基本方案確定后,靜幀圖會和交互方案

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:CE青年    來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


B端設(shè)計指南 - 篩選

純純

篩選可以說是我使用比較頻繁的一種交互形式,比如我點外賣,會選擇滿減優(yōu)惠力度大,同時我也可以選擇在哪一個價格區(qū)間內(nèi)的產(chǎn)品,這就會用到篩選,而到了B端產(chǎn)品上來,一個CRM系統(tǒng)當(dāng)中,篩選的邏輯也會比移動端的復(fù)雜,伴隨著:且關(guān)系、或關(guān)系、大于、小于等等這樣復(fù)雜的邏輯,也為設(shè)計本身增加了很多難度。因此,今天我們就來討論討論篩選控件

 


1、篩選存在的意義


篩選存在的對于整個表單來說是非常重要的,它可以幫助用戶,在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的定位;可以對表單進(jìn)行快速劃分,縮短用戶對于數(shù)據(jù)的尋找時間;能夠滿足用戶在工作中,實際業(yè)務(wù)場景的篩選。

對于實際B端場景來說,篩選是日常數(shù)據(jù)分類的一個重要途徑,我們先來看看實際場景到底有哪些?

 

用幾個我們CRM用戶日常使用的場景來說:

 

比如今天作為一個電話銷售人員,想要聯(lián)系最近注冊的用戶時,通常會通過篩選來選出最近幾天注冊過,同時又沒有銷售更進(jìn)的客戶,進(jìn)行一個優(yōu)先級的排布;

 

再比如說,在銷售周報當(dāng)中,銷售主管可以通過篩選得到每個人這周完成的狀態(tài),也可以通過篩選得出每個人對于線索的更進(jìn)情況和對客戶的流失狀態(tài)等等,這些都可以通過各種各樣的篩選形式來滿足用戶對于特定情況下的使用



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

 

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

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

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



2、篩選的類型


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

 

2.1、基礎(chǔ)篩選


基礎(chǔ)篩選一般為系統(tǒng)預(yù)設(shè)好的篩選字段,具有很強(qiáng)的業(yè)務(wù)和場景的需求?;A(chǔ)篩選一般分為四個部分:


篩選條件:是指用戶可以篩選的范圍

篩選項:是指用戶可以選擇的篩選項目

已選項:是指用戶已經(jīng)選中的篩選項

備選項:是指用戶還沒有選擇的篩選選項



基礎(chǔ)篩選更多作為用戶快捷篩選的一種方式,因為一般使用場景當(dāng)中用戶幾個篩選邏輯為“且”

同時篩選的邏輯也為簡單篩選,所以在使用場景上只適合在對篩選要求不高的場景下使用。


2.2、高級篩選


高級篩選一般為篩選中含有運算符,同時篩選當(dāng)中包含條件關(guān)系,比如且關(guān)系或者否關(guān)系。一般高級篩選包含以下幾類關(guān)鍵詞

 

篩選關(guān)系:是指幾個篩選條件之間的關(guān)系,一般為 且、或關(guān)系,即 且 關(guān)系為幾個條件之間的交集;或 關(guān)系為幾個條件之間的聯(lián)集(并集)

篩選字段:是指在篩選當(dāng)中,所要的篩選項,一般為表單當(dāng)中的所有可篩選的字段

篩選操作:是指篩選字段和篩選值之間的關(guān)系,常見的篩選操作有:大于、小于、是、否、包含、不包含、為空、不為空等等。

篩選值:你所需要篩選的數(shù)值



高級篩選一般滿足更多的用戶場景,為用戶多條件多字段、多個篩選關(guān)系、多個篩選操作 提供有利保障。




3、篩選的布局


3.1、上下布局


當(dāng)在篩選器條件少于5個的情況下,最常使用的就是上下布局,這樣篩選能與網(wǎng)站保持統(tǒng)一的情況下,上下布局也更方便用戶進(jìn)行閱讀

 

當(dāng)篩選器過多的情況下(一般在5-15個之間),篩選器過多,需要滾屏才能看到篩選結(jié)果,用戶使用起來會很別扭。所以在5-15個的情況下,一般會將篩選項進(jìn)行收折,這樣保證篩選整體面積不會太大,同時將用戶常用的篩選放在前面,可以滿足用戶基本的業(yè)務(wù)需求和使用場景



3.2、左右布局


左右布局在PC端一般是以字段選擇進(jìn)行篩選,通俗來講就是將用戶可以篩選的所有字段全部羅列出來,然后通過勾選選,擇出你需要篩選的字段,進(jìn)行篩選器的使用

 

左右布局的好處是能夠?qū)⒑Y選的所有條件都直接的展示出來,可以適應(yīng)很多場景,在篩選器用15個以上時。通過左右布局的方式,能夠讓篩選條件進(jìn)行滾動,在最大限度保持用戶使用體驗




4、篩選的形式


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


4.1、平鋪型



平鋪型一般為用戶搜索結(jié)果數(shù)據(jù)量過大,使用戶搜索出來的結(jié)果與其預(yù)期差距過大,用戶然后可以通過篩選對數(shù)據(jù)的再一次分類,使用戶能夠精準(zhǔn)尋找其想要的結(jié)果。

平鋪型一般為篩選條件少于6個,這樣能夠通過1行或者2行去展示篩選項的結(jié)果

 

多用于信息量大的產(chǎn)品,比如電商、視頻網(wǎng)站等等。常見的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式,將所有的篩選條件列出來。

 

平鋪型的好處是將篩選項的結(jié)果全部或者部分放出,能夠幫助用戶快速理解篩選項以及快讀找到自己想要的結(jié)果。

缺點也是很明顯,平鋪型的控件占比大,需要占據(jù)大量面積展示平鋪出的篩選結(jié)果。

 

比如淘寶PC端,搜索一個產(chǎn)品后花去40%的面積去展示所有的篩選條件,其實就是想引導(dǎo)用戶,淘寶搜索過后spu的數(shù)量仍然過大,想通過進(jìn)一步的篩選,讓用戶明確自己對想要東西。同時因為面積占比大,通常平鋪型都是以收折的狀態(tài),只有在搜索觸發(fā)后才會完全展開


4.2、收折型



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

 

優(yōu)點:

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

 

缺點:

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


 

4.3、單側(cè)篩選



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

 

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

 

優(yōu)點:

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

 

缺點:

就是在后臺系統(tǒng)當(dāng)中只有這一種篩選形式會面臨在我常用的幾種篩選的字段中,要通過不斷尋找,來滿足我的篩選需求,操作麻煩。

 

 

我們產(chǎn)品在某一次改版就將篩選由收折式修改為單側(cè)式,因為我們用戶使用篩選的場景非常的多,用戶每次篩選都要多進(jìn)行2、3步操作,導(dǎo)致用戶進(jìn)行了大量的吐槽,后來進(jìn)行修改,將篩選順序支持手動調(diào)整順序,用戶吐槽的次數(shù)才慢慢減少。



4.4、表頭篩選

 


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

 

優(yōu)點:

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


缺點:

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

 

 

4.5、彈窗式



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

 

優(yōu)點:

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

 

缺點:

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

 

 


5、選擇更合適的篩選

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

 

5.1、使用頻率

我們認(rèn)為影響篩選控件最重要的是用戶的使用頻率,因為用戶的使用頻率和使用方式,直接影響到我們篩選是用普通篩選or高級篩選,也會影響到篩選的形式。

 

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

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

 

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

在B端系統(tǒng)當(dāng)中,最可能遇見的就是你給用戶設(shè)計的路徑但是其實用戶根本沒有往你想的方向去操作。我們系統(tǒng)最開始給用戶設(shè)計好了很多功能點,但是用戶對于這個點的認(rèn)知成本實在過低,也導(dǎo)致了后面系統(tǒng)功能點很多都被埋沒。因為在你設(shè)計好了一個功能點后,要適當(dāng)引導(dǎo)用戶,解釋這個功能的使用場景才不會讓你設(shè)計的功能被淹沒。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:CE青年 來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


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

純純

提起用戶激勵體系你會想到什么?積分體系?簽到體系?或者是簡單粗暴的現(xiàn)金優(yōu)惠?

 以上都不是,今天我想和大家分享的是任務(wù)成就體系中的勛章設(shè)計。


一、什么是勛章

我們先來看看勛章的定義:    勛章,是指授給有功者的榮譽(yù)證章或者標(biāo)志。    古代歐洲為了區(qū)別在戰(zhàn)場上的騎士,一個名為勛章的標(biāo)志制度得以發(fā)展。每一個貴族都會設(shè)計出一個獨特的標(biāo)志,制作在他的盾牌、外衣、旗幟和印章上。(摘自百度百科)

 

上面這段話有三個詞語是重點,有功者、榮譽(yù)、獨特標(biāo)志。有功者反應(yīng)了勛章不是每個人都能獲得的,而榮譽(yù)則反應(yīng)了勛章是榮譽(yù)的象征,能帶給獲得者精神上的滿足。獨特標(biāo)志則區(qū)分了獲得者與其他人。

 

小到小時候得到的小紅花,大到奧運會國家贏得獎牌,這些都算是勛章(不同產(chǎn)品的叫法可能不同,有勛章、徽章、獎?wù)碌龋?



二、勛章的作用

上面我們說了勛章能帶給獲得者精神上的滿足,那么延伸到互聯(lián)網(wǎng)中,勛章設(shè)計的完善則能一定程度上起到滿足用戶的成就感,激勵用戶不斷使用產(chǎn)品的作用,常用在內(nèi)容類產(chǎn)品中,如視頻類、知識付費類、閱讀類產(chǎn)品中。

 

但是把勛章設(shè)計運用的最好的當(dāng)屬游戲類產(chǎn)品了,比如王者榮耀的勛章成就體系,借助獲得難易程度不同的勛章,能使用戶自主的不斷使用產(chǎn)品,獲得高等級勛章后還會被膜拜為大神,充分滿足了用戶的虛榮心。



三、勛章頁的構(gòu)成

勛章頁大致由六部分構(gòu)成。包括勛章頁入口、勛章墻、勛章詳情說明、進(jìn)度展示、勛章圖標(biāo)。


1.勛章頁入口

勛章入口一般有兩個位置,一是放置在個人中心頁中,還有一種則是放置在個人主頁中。個人中心頁只需點擊底部tab切換即可看見入口,而個人主頁還需用戶再點擊一次才可看見。

 


放置在個人中心

放置在個人中心的勛章入口大致也有兩種樣式,一種是以圖標(biāo)的形式跟隨在昵稱旁邊,另一種則是放入個人中心列表功能入口中。如下圖:


二者的選擇主要是看個人中心的主要導(dǎo)航方式,一般宮格導(dǎo)航為主的個人中心頁會采用勛章入口跟隨昵稱旁邊,列表導(dǎo)航為主的則會將入口放入列表中。

 

當(dāng)然,具體選擇還是看勛章功能的重要程度,比如波洞的個人中心以列表導(dǎo)航為主,但勛章入口卻是放置在頂部宮格中,我的理解是波洞的勛章功能層級較高,因此放在了更顯眼的位置。



放置在個人主頁

勛章入口多以圖標(biāo)形式跟隨昵稱放置在個人主頁中,此類產(chǎn)品往往擁有較強(qiáng)的社交屬性,用戶擁有自己的動態(tài)主頁,因此既能查看自己的,也能查看他人的勛章。

上圖知乎的勛章入口還將用戶擁有的勛章展示了出來,比起單個圖標(biāo)入口更能吸引用戶點擊進(jìn)入


2.勛章墻

點擊勛章入口進(jìn)入的頁面就是勛章墻了,勛章墻主要包括用戶已獲得的勛章信息以及產(chǎn)品包含的所有類別的勛章展示。

 

勛章墻展示幾乎都是采用的宮格式布局,一般一行分布2~5個勛章,多以3個為主。



勛章墻中的已獲得勛章信息包括用戶總獲得的以及不同類別勛章的單類獲得數(shù),顯示總獲得數(shù)的勛章墻會在頂部加入用戶的獲得信息,幫助用戶一眼識別。



在勛章墻的設(shè)計中,注意要做好獲取與未獲取勛章的區(qū)別樣式,重點是保證用戶能一眼識別出獲得與未獲得的勛章,多是將未獲得的勛章置灰處理。反面例子如下:

上圖KEPP中,已獲得勛章是將其正常顏色展示,而未獲得勛章采用的淺紫灰色,我一眼看過去時真的沒有反應(yīng)過來哪些是未獲得的。


3.勛章詳情說明

勛章詳情說明是在勛章墻展示中,點擊勛章后以彈窗的形式展示出來的,包括全屏彈窗與非全屏彈窗兩種展現(xiàn)形式。

 

全屏彈窗詳情說明

勛章詳情說明采用全屏彈窗能承載更多的信息,除了可以包括獲取說明外,還可以承載獎勵說明、獲取進(jì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è)計中最重要的一環(huán),需要UI設(shè)計師花費很多的心思。勛章圖標(biāo)目前多為圖形圖標(biāo),我只看到開眼是采用的圖片類勛章。


在設(shè)計圖形勛章時以現(xiàn)實生活中的勛章為靈感,多采用統(tǒng)一的勛章背景模板,保證整體勛章墻的視覺統(tǒng)一,便于多次復(fù)用。常用的形狀有六邊形、圓形、盾牌形狀等。

切忌在設(shè)計圖形勛章時采用復(fù)雜的背景模板,以免降低了勛章內(nèi)部主體的層級。


四、劃重點

本文主要為大家淺析了勛章設(shè)計的定義、作用以及勛章頁的構(gòu)成。

 

  • 勛章的定義:勛章是指授給有功者的榮譽(yù)證章或者標(biāo)志;

  • 勛章的作用:勛章能帶給獲得者精神上的滿足,一定程度上激勵用戶不斷使用產(chǎn)品;

  • 勛章頁的構(gòu)成:包括勛章頁入口、勛章墻、勛章詳情說明、進(jìn)度展示以及勛章圖標(biāo)。

    藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

    作者:人類君   來源:站酷

    分享此文一切功德,皆悉回向給文章原作者及眾讀者.
    免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

    藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


從理論到落地,B端移動app設(shè)計指南

純純

隨著跨設(shè)備跨平臺的趨勢不斷顯現(xiàn),比如最近很火的鴻蒙,一部手機(jī)就可以完成辦公場景到生活娛樂場景的轉(zhuǎn)化,未來B端的管理系統(tǒng)不在局限于pc端,體驗將不斷向移動化對齊,使B端用戶不再受時間和地點限制。


B端各個端口的特性:

在保證使用體驗下。pc端、pad端、pc端的功能會是一個下放的過程,屏幕越小功能越簡化。


比如有贊的美業(yè)工作臺,手機(jī)端只有宮格功能入口,PAD端除了功能入口外,把工作內(nèi)容也做了露出,PC端則展示了數(shù)據(jù)圖表、快捷功能,以及其他提升效率的入口,內(nèi)容交互更加的復(fù)雜。三端里,不僅屏幕尺寸不一樣,使用場景和角色也完全不同,比如PC端店長使用頻次更高,用于管理店鋪查看經(jīng)營狀況。PAD端則普通員工頻次更高,用于查看具體工作內(nèi)容,需要接待的客人。手機(jī)端更通用,所有角色所有場景都會使用,有可能是在店里、家里、路上所以在設(shè)計移動端時要考慮如何在提升操作效率的同時兼容可用性。


B端的典型表單,由數(shù)據(jù)錄入和操作按鈕構(gòu)成,往細(xì)拆解的話包含1.標(biāo)題、2.標(biāo)簽、3.提示信息、4.輸入?yún)^(qū)、5操作按鈕。

  • 標(biāo)題:表單的主題,起到說明表單模塊的作用,尤其是在分組的表單中格外重要。

  • 必填提示:用于區(qū)分多個表單內(nèi)容項的必填和非填項,一般使用紅色的“*”表示。

  • 標(biāo)簽標(biāo)簽:表單內(nèi)容項的名稱,說明對應(yīng)表單含義以及向用戶說明應(yīng)該錄入信息的類型。

  • 提示:幫助用理解表單,最多見的是引導(dǎo)說明信息和反饋信息。

  • 輸入?yún)^(qū):表單的核心區(qū)域,承載用戶主要的交互。

  • 操作按鈕:完結(jié)表單操作的觸發(fā)器,用于確認(rèn)數(shù)據(jù)或者取消數(shù)據(jù),表單越復(fù)雜按鈕也會越多樣。


表單設(shè)計

大部分場景我們希望用戶能盡快完成表格。但在有些場景呢又希望用戶能放慢速度,使他們能夠深思熟慮,比如下面的三個場景:

1.在一些資質(zhì)審核的頁面,希望用戶能仔細(xì)填寫。

2.小屏幕的場景,要求表單縱向或者橫向最小化。

3.國際本地化的需求,表單需要適應(yīng)不同的長度和多種語言。

這張圖是醫(yī)生端注冊流程的競品對比。他們哪種方案能更好的為用戶和產(chǎn)品服務(wù)呢?接下來我們來看下三種典型的表單,能幫助你更好的理解。


1.左對齊標(biāo)簽

優(yōu)點:如果用戶不熟悉表單要錄入的數(shù)據(jù),或者是復(fù)雜內(nèi)容,左對齊會更容易些。視覺動線會更符合人們閱讀習(xí)慣,并能節(jié)省縱向的空間。

缺點:長標(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)致眼動距離拉長,適合選擇類的錄入方式,緩解此缺點。


2.頂對齊標(biāo)簽

優(yōu)點:有較多的橫向空間,并且閱讀效率快,對于國際化的設(shè)計或長標(biāo)簽特別有用。

缺點:會占用較多的縱向空間。

在同一個實驗中,標(biāo)簽到輸入框只花了50毫秒,比左對齊快了10倍。

 

以下是B端的典型列表,主要是信息的查看和操作?;臼怯?.卡片、2.切換篩選、3.搜索、構(gòu)成。

  • 卡片:在移動端列表中更多的是以卡片式的形式呈現(xiàn),卡片利于展示信息的深度和承載更好的交互。在移動app中我們可以大膽的嘗試使用卡片式設(shè)計,不僅信息能夠很好的突出,也能適應(yīng)多端設(shè)備的展示。

  • 篩選:篩選對于整個表單來說是非常重要的,它可以幫助用戶在表單茫茫數(shù)據(jù)中進(jìn)行快速的數(shù)據(jù)定位以及劃分,縮短用戶對于數(shù)據(jù)的尋找時間;

  • 搜索:將想要查詢的信息輸入到相應(yīng)的搜索器中,用戶可直達(dá)任務(wù)目標(biāo)。

 

列表視覺差異化設(shè)計

貼近場景的設(shè)計可以舒緩數(shù)據(jù)頁面帶來的心理壓力,擬物元素與表單的結(jié)合的呈現(xiàn)形式能夠給用戶帶來愉悅感。

 

如下圖的例子,途牛商旅用了差旅審批單粗細(xì)線條元素,醫(yī)鹿用了病歷本上面的釘扣,餓了么商家版模擬小票的設(shè)計。

  

B端典型數(shù)據(jù)頁,他們基本是由1.數(shù)據(jù)統(tǒng)計、2.可視化卡片、3.篩選、4.數(shù)據(jù)明細(xì)構(gòu)成。

  • 數(shù)據(jù)統(tǒng)計:將用戶所需關(guā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è)計優(yōu)秀圖表

激勵性數(shù)據(jù)設(shè)計

2008 年,為了減少電力消耗,有一家電力公司向 35,000 名客戶發(fā)送了一封帶有簡單圖表的信,向客戶展示了他們和鄰居的電力消耗情況。

在圖表中,可以看到一個條形圖,代表 3 個不同組的功耗:節(jié)能的鄰居、所有鄰居和收信人的家庭。這向客戶顯示他們是否比鄰居消耗更多或更少的電力。

最后這些收到信件的客戶平均降低了 2% 的功耗 ,雖然就個人電費而言,這似乎很小,但對所有客戶而言,這相當(dāng)于節(jié)省了大量電力和百萬美元。從那時起,全國其他電力公司都采用了這種方法。而這種方法也叫做激勵性的數(shù)據(jù)設(shè)計。

 

移動端圖表

實際執(zhí)行中,要針對具體場景,選擇合適的方案。比如在一個多折圖表要選曲線的還是直角的,直角能精準(zhǔn)的體現(xiàn)數(shù)據(jù)而曲線降低認(rèn)知負(fù)擔(dān)使視覺愉悅。

 

下圖淘特首頁設(shè)計中,需要在較少的縱向空間里設(shè)計可視化圖表,可以看出這里簡化了y軸的標(biāo)簽以及取值范圍,最后反應(yīng)到圖表上會是一個較平滑的曲線。而這種設(shè)計方案上更多的是感知價值而不是精準(zhǔn)的數(shù)據(jù),這跟激勵性的數(shù)據(jù)設(shè)計有相同的作用。

  

工作臺是一個幫助用戶快速掌握工作進(jìn)度及進(jìn)入工作狀態(tài)的導(dǎo)航頁面。也是用戶感知產(chǎn)品價值的重要門面;所以首頁工作臺是體驗規(guī)范和視覺風(fēng)格的核心場景。


工作臺案例

我們來觀察下醫(yī)蝶谷為什么這樣改版。從原型的變化可以發(fā)現(xiàn),這次改版更多的是去滿足業(yè)務(wù)上的變化,我認(rèn)為有以下幾點

 

業(yè)務(wù)優(yōu)化:

1.這樣的改版體現(xiàn)了醫(yī)蝶谷在業(yè)務(wù)策略上的變化。觀察老版本我們發(fā)現(xiàn),極速問診占了首頁的4/10。這個階段更多是考慮患者訂單響應(yīng)時間,所以接單較慢的新手醫(yī)生體驗較差。

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.在新版的首頁里,因為極速問診改變了位置,我們可以在設(shè)計上做一些差異化的改變,去適應(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ī)生讓你去拿報告,在回來的時候你不是重新排隊的狀態(tài),醫(yī)生需要在這時候?qū)δ氵M(jìn)行干預(yù)。

 

設(shè)計策略

設(shè)計應(yīng)當(dāng)順應(yīng)醫(yī)生的工作特點,考慮在特殊場景上的使用,我們提出的以下策略。

 

精簡布局,提升屏效

1.在前文B端列表有提到,列表頂對齊的方式用戶閱讀起來效率是最高的。所以這里將時間標(biāo)簽調(diào)整到內(nèi)容上方,同時調(diào)整卡片里任務(wù)名稱和時間的權(quán)重。

2.優(yōu)化前任務(wù)排序結(jié)構(gòu)是按時間規(guī)律往下排布,一小時占用一行。因為醫(yī)生平日事情多突發(fā),排期上無法按照一定的規(guī)律。如果需要查看下午、晚上的排期交互步驟則會被增長。所以在設(shè)計上將無任務(wù)的時間標(biāo)簽進(jìn)行收縮,這樣在首屏也能看到在晚上的排期狀況。


利用色彩,少即是多

色彩是最具本質(zhì)影響力的表現(xiàn)因素,在設(shè)計即簡單又重要。研究表明,人們只需 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è)計的,在醫(yī)生這個行業(yè),有著很大的行業(yè)壁壘,需要我們逐一去調(diào)研給出設(shè)計方案。這也是B端設(shè)計中需要重點關(guān)注的地方。

 

代碼框架

B端設(shè)計師最常接觸的設(shè)備就是PC,而要做移動B端基本上也是會通過H5、RN等技術(shù)實現(xiàn)。這樣方便多平臺復(fù)用,下面我以web為例子,講述我們該如何理解前端的頁面結(jié)構(gòu)


提升開發(fā)效率

設(shè)計的過程中,好的工作流程可以幫助開發(fā)節(jié)約工時。如果公司有交互的基本是能做到提前開發(fā)的。沒有的話,我們最好有框架思維,先搭好框架,截圖給開發(fā)參考,開發(fā)會根據(jù)你提供截圖,進(jìn)行基礎(chǔ)模塊搭建,最后在根據(jù)標(biāo)注文檔進(jìn)行css上面的調(diào)整。


降低服務(wù)器成本

我們將切圖給予到開發(fā)以后,開發(fā)會將其傳到服務(wù)器上面。

用戶在訪問我們的頁面時其實是相當(dāng)于發(fā)送一次請求,將服務(wù)器里面的圖片下載下來,如果圖片的數(shù)量太多或者文件太大,會占用大量用戶的帶寬帶來極差的體驗。

而服務(wù)器的空間也是需要公司付費購買的,所以盡量一張圖在多處使用。如果是非常高清的圖片,可以將圖片里的人物切出來,在不同的場景去復(fù)用。實測一張4k的官網(wǎng)banner,人物單獨切出進(jìn)行復(fù)用可以減少banner50%的大小。

 

占位符

在一些需要實現(xiàn)文本換行的效果里,開發(fā)很難去通過去寫間距,因為會有換行的關(guān)系。一般會通過占位符的方式去實現(xiàn),而在占位符里有分為好幾種,下圖我列舉了最常用的三種占位,分別能實現(xià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è)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:丸子說設(shè)計    來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



【干貨】設(shè)計師的發(fā)力點

純純

其實說到設(shè)計的價值,它是非常大的,可以從很多不同的維度去出發(fā),每一個小點都可以作為閃亮的發(fā)光點去助力產(chǎn)品獲得價值,并且現(xiàn)在互聯(lián)網(wǎng)時代,多元化思維越發(fā)重要,我們不僅需要在本職范圍內(nèi)去發(fā)光,還需要拓展更多的能力。


但是我也發(fā)現(xiàn)目前普遍存在一個很嚴(yán)重的問題,有很多小伙伴設(shè)計一個紅包也能扯出一堆增長模型,這也是因為隨著全鏈路、全棧設(shè)計的噱頭出現(xiàn),以及一系列的模板化思維體系所影響。


設(shè)計思維本沒有對錯,但是需要合理的運用,并且將設(shè)計點需要落在實際的內(nèi)容上,像我們常見的用戶畫像、體驗地圖、情緒版等等,那么我們應(yīng)該如何有效的將設(shè)計點落實在內(nèi)容上呢?



  • 視覺層


眾所周知,在整個產(chǎn)品設(shè)計中,視覺感受是最直觀的,也是我們作為一名UI設(shè)計師能直接去影響的,而視覺層面的內(nèi)容基本可以劃分為六個點,也就是我們常常所說的 - 形色字構(gòu)質(zhì)動


在很多的設(shè)計運用場景中,這六點都是作為比較基礎(chǔ)的內(nèi)容,像一些視覺語言制定上,而產(chǎn)品設(shè)計的過程中,縱使有再多的方法論和思維體現(xiàn),最終都需要通過視覺的表現(xiàn),所以我打算利用這幾點去深入挖掘,也許可以找到更多的設(shè)計發(fā)力點。



  • 圖形


形也就是設(shè)計中最基礎(chǔ)的圖形元素,在平面和品牌設(shè)計中經(jīng)??梢砸姷剑褚恍c線面、圖形構(gòu)成等等,而回到產(chǎn)品設(shè)計中呢,最典型的形就是我們經(jīng)常見到的圖標(biāo),那除此之外,形還有哪些體現(xiàn)方式呢?


1.1 插畫

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


1.1.1 功能插畫

首先我們先設(shè)想一個場景,當(dāng)我們接觸到一個新鮮的事物時,我們首先需要快速的了解他,我們可以通過產(chǎn)品說明書、產(chǎn)品結(jié)構(gòu)圖,場景使用模擬等不同的方式來表現(xiàn)。


因此在一些服務(wù)頁面或新功能介紹中,都會適當(dāng)?shù)娜谌牍δ懿瀹?,而這種表現(xiàn)形式可以使得界面展示更直觀,快速的讓用戶理解所描繪的功能含義,減少用戶學(xué)習(xí)成本。


1.1.2 場景插畫

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


1.2 品牌強(qiáng)化

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


1.2.1 風(fēng)格延展

設(shè)計表現(xiàn)上可以賦予產(chǎn)品非常明確的設(shè)計風(fēng)格,例如抖音的故障風(fēng)格,在圖標(biāo)、插畫、活動頁面都有很好的延展,這也賦予了很深的產(chǎn)品印象,甚至有很大一部分用戶看到故障風(fēng)格就會聯(lián)想到抖音。


1.2.2 品牌應(yīng)用

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


1.3 元素滲透

那么說到延展,其實我們也可以針對一種元素進(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ì)感。


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

圖形的表現(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)實中,顏色賦予了這個世界繽紛多彩,它是我們?nèi)庋圩钪庇^的感受。在設(shè)計中,顏色是尤為關(guān)鍵的一部分,它賦予了內(nèi)容不同的表現(xiàn)形式。


顏色的學(xué)問也比較廣泛,除了我們常說的色彩關(guān)系、顏色搭配等等一系列之外,色彩上到心理學(xué)、下到用戶體驗,涉及的范圍十分全面,那接下來我們就來感受一下色彩的美妙吧~


2.1 色彩體驗

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


2.1.1 色彩心理學(xué)

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


2.1.2 暗黑模式

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


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


2.1.3 無障礙設(shè)計

并且隨著互聯(lián)網(wǎng)的發(fā)展,用戶群體逐漸龐大,其中也有部分身體有局限的用戶,對于他們來說更加迫切通過互聯(lián)網(wǎng)獲取信息,因此越來越多大公司注重到這一方向,而這也是我們作為一名設(shè)計師,更應(yīng)該去優(yōu)化的方向。


可以采用無障礙色系,以及顏色的色差處理,針對性的服務(wù)于色盲和色弱群體,使得他們可以在信息閱讀上更符合他們的習(xí)慣,從而進(jìn)一步打造更人性化的產(chǎn)品體驗。


2.2 沉浸式體驗

色彩搭配講究顏色統(tǒng)一、協(xié)調(diào),在一些界面中,我們可以利用這種色彩技巧去營造氛圍,可以有效的提高界面沉浸感,但是產(chǎn)品中由于內(nèi)容的差異無法固定顏色,而這也會導(dǎo)致顏色統(tǒng)一性較難處理,因此可以利用代碼的能力判斷封面色彩傾向,從而進(jìn)行填色,例如豆瓣app。


不僅如此,我們也會市場看到頭部背景圖和banner圖的色彩也會統(tǒng)一處理,這是單獨配置了一張背景圖,從而達(dá)到頁面頭部的協(xié)調(diào)性。



  • 字體


字體在設(shè)計中占有很重要的一部分,在UI設(shè)計中也是最為關(guān)鍵的信息傳遞載體之一,而關(guān)于字體的內(nèi)容也是十分廣泛的,下面我將從字體排版、字體設(shè)計和字體內(nèi)容三個方向來分享我的心得。


3.1 字體排版

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


3.1.1 避首位法則

例如下面案例中的結(jié)尾標(biāo)點符號在首,這個是避首位法則中最關(guān)鍵的內(nèi)容,那為了解決這種方式,我們可以利用「推出式避頭尾」,這也是目前主流的方式之一,利用這種換行的形式避免問題,但是往往會形成句尾參差不齊。


因此我們可以利用「優(yōu)先推入式」標(biāo)點擠壓的方式,將標(biāo)點符號進(jìn)行空間擠壓,這樣可以在很大程度上確保文字在合適的版心內(nèi)整齊一致。


3.1.2 空格處理

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


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


3.2 字體類型

字體的類型分為很多種,而常規(guī)的界面信息展示中,一般都采用無襯線字體,但個別產(chǎn)品利用特殊字體去傳遞產(chǎn)品的氣質(zhì),例如閱讀產(chǎn)品中采用襯線字體。

除此之外, 大廠也紛紛設(shè)計屬于自己的專屬字體,通過這樣的方式去強(qiáng)化自身的品牌感。


一年前的MIUI11版本更新,最重磅的內(nèi)容即是推出動態(tài)字體,用戶可以自由選擇字體粗細(xì),同時為了讓界面的美觀度及文本識別性不會被破壞掉。


3.3 字體內(nèi)容

既然聊到字體,那我們順便再來談?wù)劷诒容^火的微文案,雖說內(nèi)容聽起來側(cè)重于文案策劃,但是其目的是為了優(yōu)化用戶體驗,甚至提高轉(zhuǎn)化率等等,那么作為一名設(shè)計師,我們更應(yīng)該去關(guān)注這樣的內(nèi)容。


3.3.1 情感文案

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


3.3.2 微文案

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



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


說到結(jié)構(gòu),我們一般都會聯(lián)想到用戶體驗五要素中的結(jié)構(gòu)層,他在產(chǎn)品設(shè)計中更多體現(xiàn)于信息布局和內(nèi)容結(jié)構(gòu)布局,而對于我們設(shè)計師來說,更多的感覺就好像畫面中的布局與排版。


結(jié)構(gòu)的內(nèi)容相對來說還是比較廣泛的,我主要是圍繞界面布局來進(jìn)行分析,講一些我覺得還不錯的優(yōu)秀案例,希望從這幾個角度出發(fā),可以帶給大家一些啟發(fā)。


4.1 場景化體驗設(shè)計

場景化設(shè)計是體驗設(shè)計中較好的發(fā)力點,也是我最近一直在研究的方向,后續(xù)有空我會單獨寫一篇文章再進(jìn)行深入分析??偟膩碚f呢,場景化設(shè)計分為多個側(cè)重點,今天分享的內(nèi)容主要圍繞著用戶分層,為不同的用戶設(shè)計。


4.1.1 用戶需求

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


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


4.1.2 用戶行為

而這兩個界面都屬于功能服務(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ù)。


4.1.3 用戶身份

而關(guān)于用戶分層的場景設(shè)計中,我們還可以區(qū)分用戶不同的狀態(tài)/身份來對界面進(jìn)行差異化布局,下面的案例來自于百度網(wǎng)盤會員界面。


我們都了解會員他分為很多不同的階段,而不同階段的用戶,對于內(nèi)容的關(guān)注上也存在很大的差異的,我們可以從這個角度出發(fā),區(qū)分用戶的會員狀態(tài),進(jìn)一步來進(jìn)行差異化設(shè)計。從而有效的提高不同階段用戶的行為決策。


4.2 拓展卡片

論最出色的界面布局結(jié)構(gòu),那滴滴的 xpanel 必定讓人印象深刻,它是一個將卡片附著于第一信息架構(gòu)層級上,內(nèi)容上分為“消息卡片”“主體卡片”“拓展卡片”三個維度,通過這種方式將一屏內(nèi)搶占的空間通過簡易的交互模式補(bǔ)償回來了,這樣既不打破用戶的核心體驗,同時又增強(qiáng)了運營、功能的玩法與拓展。


所以我們會發(fā)現(xiàn)在大部分的打車、導(dǎo)航產(chǎn)品中,均會采用這樣的結(jié)構(gòu)布局,這也是對特定場景垂直領(lǐng)域的深耕和挖掘,尋找“接觸點”,幫助獲取更多的功能、內(nèi)容、服務(wù),實現(xiàn)業(yè)務(wù)的“有效增長”。


而對于一個設(shè)計點,在歷經(jīng)了一段時間的發(fā)展后,也演變出了一系列的其他內(nèi)容,我從這個點深入出發(fā),圍繞著內(nèi)容和布局進(jìn)行延展。


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

眾所周知,產(chǎn)品和運營都希望我們能在有限的空間中去展示更多的信息,并且有效的給其他功能進(jìn)行導(dǎo)流,因此我們可以根據(jù)長尾效應(yīng),在無限長的信息流當(dāng)中,利用不同的卡片布局,給予不同的活動、功能進(jìn)行導(dǎo)流。


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

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



  • 質(zhì)感


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


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

前段時間流行了一段時間的新擬態(tài),一度被扣上有望成為未來趨勢主流的設(shè)計風(fēng)格,但由于質(zhì)感表現(xiàn)上細(xì)節(jié)過多,影響信息內(nèi)容,并且局限性太大,因此并沒有被廣泛流傳,但是在視覺設(shè)計上,是一個不錯的設(shè)計表現(xiàn)。


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

磨砂玻璃的質(zhì)感表現(xiàn)其實很早很早在iOS的界面設(shè)計中就已經(jīng)存在,但當(dāng)時并沒有廣泛普及,而最近這種風(fēng)格又以一種全新的姿態(tài)回到我們的視線中,他給我們最直觀的感受就是虛虛實實。


在用戶界面中,這種虛實的變化可以有效的創(chuàng)建視覺層次結(jié)構(gòu),增加自然精心的細(xì)節(jié),并且在多復(fù)雜內(nèi)容中能讓用戶全面感知與處理信息,有效傳達(dá)信息,讓信息可閱讀、易閱讀。


5.3 微色彩漸變

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



  • 動效


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


6.1 動效轉(zhuǎn)場

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


6.1.1 入場元素

用戶操作進(jìn)入新頁面后,通常會比較關(guān)注入場元素,像一些金融產(chǎn)品、數(shù)據(jù)圖表,都會采用短暫的動態(tài)效果,強(qiáng)化元素的展示效果,進(jìn)一步吸引用戶關(guān)注數(shù)據(jù)與內(nèi)容。


6.1.2 持續(xù)元素

在很多優(yōu)秀的設(shè)計網(wǎng)站上,我們可以發(fā)現(xiàn)大多數(shù)交互動效都是對持續(xù)元素進(jìn)行特殊處理,他們不僅可以讓動效更加特別,還可以提高產(chǎn)品的流暢度。


例如下面的案例,前后頁面的內(nèi)容關(guān)系比較大,因此操作后可以采用持續(xù)效果,進(jìn)一步引導(dǎo)用戶的視線,提高視覺體驗,強(qiáng)化交互流暢感。


6.1.3 停留元素

在整個動效編排中,除了關(guān)注入場和持續(xù)元素之外,停留元素也是非常值得關(guān)注且可以深入打磨的內(nèi)容。


例如下面的案例,在整個搜索體驗的鏈路中,我們可以發(fā)現(xiàn)搜索框提示文字、輸入的單詞等等均在進(jìn)行了停留處理,確保在頁面切換時,減少用戶的視覺跳轉(zhuǎn),可以有效提供用戶的專注度,打造更加輕松的體驗。


6.2 信息折疊

產(chǎn)品設(shè)計中都希望在足夠的空間內(nèi)可以展示更多的信息,但這樣往往會帶來信息過載的問題,因此我們需要在設(shè)計的過程中對信息展示進(jìn)行區(qū)分,利用行動觸發(fā)結(jié)合動效的形式,輔助信息布局更合理。


6.2.1 同類信息

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


6.2.1  容器折疊

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


6.2.3 觸發(fā)展示

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


6.3 交互流程

隨著產(chǎn)品體量越來越大,功能繁多的同時,頁面結(jié)構(gòu)也變得十分復(fù)雜,為了確保用戶體驗過程中,更清楚頁面層級,以及操作后的流程,所以我們可以通過動效合理安排交互流程,助力用戶的舒適體驗。

我之前也專門寫過一篇《交互流程中的三大重點》,感興趣的朋友可以再碰個場,支持下。


6.3.1 操作預(yù)知

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


6.3.2 交互反饋

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


  • 總結(jié)


其實設(shè)計師的發(fā)力點不單單只是我們平時看到的產(chǎn)品分析、用戶畫像、體驗地圖,其實從設(shè)計的角度出發(fā),也有很多價值點,我們作為一名設(shè)計師,更應(yīng)該根據(jù)產(chǎn)品現(xiàn)狀去制定明確的設(shè)計目標(biāo),深入挖掘,利用有效的設(shè)計價值觀,正確的驅(qū)動設(shè)計前行,最終通過設(shè)計去提高產(chǎn)品體驗。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:三石設(shè)計   來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



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

純純

01.寫在前面

大家有沒有遇到這樣的問題,當(dāng)你面對非常復(fù)雜的信息時,在進(jìn)行信息整理設(shè)計時,往往會陷入比較糾結(jié)的場面,不知道怎么把這一堆信息進(jìn)行比較好的排列。如果你剛好也有這部分疑問,這篇文章適合你繼續(xù)閱讀。



本篇文章會提供一種解決排列問題的簡單底層邏輯,我們可以圍繞這個邏輯去排布我們的頁面,從而讓整體排版變得更加清晰合理。

02.信息層級的作用

信息層級存在于我們目前看到的每一個畫面。它本質(zhì)上是信息組織的一種方式,通過信息的放大縮小和對應(yīng)的位置,能夠?qū)?fù)雜的信息分為不同的模塊呈現(xiàn)在我們的視野中。



大家先簡單看一下圖中兩個畫面,你就能夠直觀感受到信息層級對于用戶認(rèn)知的作用。



不好的信息層級就像左圖一樣會讓畫面比較雜亂,難以進(jìn)行視覺上的識別。而優(yōu)秀的信息層級就像右圖一樣能夠讓我們快速且準(zhǔn)確的識別出畫面想要傳遞的信息。

因此信息層級的排列不僅影響視覺上的美觀度,更影響人們在檢索信息時候的效率。尤其是對于B端復(fù)雜場景,我們不僅需要考慮清晰傳遞業(yè)務(wù)價值,合理的信息層級劃分也是提高產(chǎn)品體驗的重要部分,好的信息層級則意味著更好的使用體驗。

03.如何做好信息層級

既然信息層級對于使用體驗比較關(guān)鍵,那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網(wǎng)上的資料也是參差不齊,我也曾為此類問題查閱了大量資料,想要找到一個簡單高效的答案。



但目前查閱到的資料幾乎都在講排列的四個基本原則:對比、對齊、親密、重復(fù)。不可否認(rèn)的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛,讓人很難在實際中更有效地利用。

即使我對排版四個原則非常熟悉,在面對復(fù)雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進(jìn)行了進(jìn)一步的探索:



經(jīng)過線上頁面與概念的整體研究發(fā)現(xiàn),他們在遵循排版原則的基礎(chǔ)上,本質(zhì)上都存在一個簡單的邏輯:那些優(yōu)秀的頁面設(shè)計都把主內(nèi)容的層級控制在了三層左右,如下圖所示。



因為三層左右的層級是最容易被用戶感知,且視覺上不易混亂。超過三層后隨著層級越多復(fù)雜性會相對增加。

比如我們看下面這兩個例子,左邊層級因為特別復(fù)雜,造成用戶獲取信息效率變低,而通過層級的轉(zhuǎn)換,我們可以將其變得更簡單且易讀。



再舉一個例子,我們在大部分場景見到的純文字排版基本都離不開以下幾種形式:



因此,我們需要在排版時需要首先思考一個邏輯:那就是盡量將我們的內(nèi)容層級控制在三層左右。且這三層內(nèi)有比較明顯的對比關(guān)系。



有同學(xué)看到這肯定要問了,這個道理我也懂啊,可是在實際業(yè)務(wù)中大部分時間拿到的信息太多,根本做不到保持在三層以內(nèi)。別急,這篇文章的重點當(dāng)然不是告訴你這么簡單的道理,而是在面對復(fù)雜層級的時候,我們應(yīng)該怎樣去控制它的層級表現(xiàn),從而讓它在最終呈現(xiàn)上保持在三層左右,讓用戶獲取信息的效率更高。



其實我們在實際中的大部分優(yōu)秀頁面,在本身的信息層級上可能都非常復(fù)雜,但我們可以通過一系列的方法,去減輕這種多層級的影響,從而讓我們的頁面即使承載了很多復(fù)雜的信息,也能變得更加簡單清晰。那我們接下來就闡述一下對復(fù)雜層級的處理方案。

04.信息層級前置處理

這可能是被很多人忽略的一點,就是信息的前置處理。我也曾遇到過某些信息很復(fù)雜導(dǎo)致排版很困難,但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進(jìn)行第一層的判斷。



源頭降低的本質(zhì)就是判斷我們當(dāng)前所要呈現(xiàn)的信息是不是必要的。其實這也是在目前工作中遇到的場景,比如某些時候產(chǎn)品給到了我們很多信息,但我們并不一定會全盤接受,而是通過當(dāng)前頁面的業(yè)務(wù)場景去進(jìn)行判斷。確定每個信息的合理性,從而可以決定有些元素是否可以刪減,提高整體信息設(shè)計的一致性。

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)的緣由以及必要性,這樣能夠幫助我們最后理清楚信息層級。

05.信息層級排布處理

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



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



5.1 信息分組

信息分組是大家在設(shè)計時都能夠想到的形式,分組能夠?qū)?fù)雜的信息打散,從而降低頁面整體的復(fù)雜度。比如我們常用的分組方式有三種方式:間距、分割線、卡片。



那么這三種方式有沒有區(qū)分呢,VIVO設(shè)計團(tuán)隊曾經(jīng)就這個問題展開過用戶調(diào)研,但結(jié)果表示,如果純粹從用戶的角度來講,對其變化感知不大。但這三種分割方式會影響我們在呈現(xiàn)信息時的整體視覺觀感,因此我們可以根據(jù)當(dāng)前信息的復(fù)雜度作出以下規(guī)則:



通過這三種場景的區(qū)別,我們可以根據(jù)信息復(fù)雜度更好地選擇分割方式,讓界面的表達(dá)清晰明確。

5.2 利用組件拆分

組件其實是目前大部分設(shè)計師在進(jìn)行信息排布時必備的部分,因此對于這部分設(shè)計師的熟練度也是最高的。而本篇想要強(qiáng)調(diào)的是,目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用:樹形結(jié)構(gòu)、表格結(jié)構(gòu)、步驟條、選項卡。

樹形結(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ù)雜度。

選項卡
選項卡更適合與同級的數(shù)據(jù),對于同類型的結(jié)構(gòu)可以更好地將頁面進(jìn)行拆分,從而讓當(dāng)前頁面更簡潔。



由于組件這一塊大家的認(rèn)知已經(jīng)比較全了,在這里就不進(jìn)行更深入的講解了。如果有需要的同學(xué)可以通過瀏覽各大廠的組件文檔去進(jìn)行更細(xì)致的查閱。

5.3 更改布局

通過改變布局的方式,我們可以將多層結(jié)構(gòu)的樣式通過拆分布局來將其控制在三層內(nèi)。這句話什么意思呢,舉個簡單的例子:



從上圖中你可以看出目前的層級較多,尤其是兩層tab的疊加,視覺上就會顯得稍微有點凌亂。我們可以通過將第二層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),從而讓整體變得更加簡潔。



5.4 信息融入

我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質(zhì)上講就是將某兩種層級信息通過不同的組合方式,讓其融入到同一個層級中。比如我們看下面這一個例子,Coding產(chǎn)品設(shè)計中將標(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)的搜索范圍。

5.5 信息弱化

信息弱化的原則是,將某些超出層級的部分進(jìn)行弱化。比如有5個層級,但其巧妙地將功能篩選融入到了當(dāng)前的結(jié)構(gòu)中,使得即使超過3層我們也不會覺得其特別復(fù)雜,我們再看一個例子:



可以看到TAPD將「另存為視圖功能」與「缺陷統(tǒng)計」進(jìn)行了弱化,雖然還是有4種層級,但從視覺感知的層面上不會覺得視覺凌亂。

在很多時候,我們覺得信息混亂的原因,就是頁面要素太多太花哨。比如工作中的一個小卡片,也就是利用信息弱化去減少畫面的復(fù)雜度:



因此我們需要學(xué)會對信息分級,不重要的信息就進(jìn)行弱化,這樣整體的表述上會好很多。

通過上述5種方案:信息分組、利用組件拆分、更改布局、信息融入、信息弱化,我們可以將大部分層級過多的復(fù)雜信息簡化在三層以內(nèi),從而讓我們最終的頁面呈現(xiàn)不會太過復(fù)雜,更容易被用戶理解。但不可否認(rèn)仍會有更復(fù)雜的頁面,即使縮減也仍有過多層級,那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。

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

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

6.1 被忽略的沿著字的軸線對齊

大家對「對齊」并不陌生,它存在于我們的每個頁面。但在對齊的過程中,我們可能會忽視一個小細(xì)節(jié)點,那就是沿著字的軸線對齊。比如下圖兩個例子:



在看見左圖時,總覺得哪里會有點奇怪,但又不知如何表述。而右圖看著就會相對更舒服。經(jīng)過對比過后明顯發(fā)現(xiàn)右邊的圖整體相比于左側(cè)會更整齊,而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的:那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起,即相似的部分在感知中會形成若干組。

而左側(cè)因為標(biāo)題字和底部字沒有形成對齊,因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現(xiàn)中顯得更整齊。

6.2 卡片是用線框還是背景

這是我平時在做設(shè)計呈現(xiàn)時也會糾結(jié)的一個問題。當(dāng)你想用卡片來呈現(xiàn)視覺時,你有沒有糾結(jié)過到底是用線框卡片還是背景色填充呢。



我就曾陷入這種糾結(jié),但在去搜索查閱時,發(fā)現(xiàn)目前其實關(guān)于這塊相關(guān)的資料,因此在大部分情況下都是由設(shè)計師自行決定的。但經(jīng)過線上產(chǎn)品的調(diào)研發(fā)現(xiàn),這塊內(nèi)容其實也包含著一定的規(guī)則:

1.取決于卡片的數(shù)量

對于卡片少的其實可以用色塊來呈現(xiàn),對于卡片多的可以考慮用線框來進(jìn)行。這其實主要是從一個視覺的維度來進(jìn)行呈現(xiàn),舉個簡單的例子:



通過coding和飛書的卡片對比,你會發(fā)現(xiàn)卡片過多時線性設(shè)計會讓頁面顯得更整潔和清新,色塊設(shè)計就會讓頁面顯得更厚重。右側(cè)整體的呈現(xiàn)行會顯得更好一些。

2.取決于頁面的視覺重心


這里頁面視覺重心的含義是當(dāng)你整個頁面都全是線框時,你可以利用色塊的卡片來達(dá)到突出頁面重心的效果,讓整體頁面沒有那么單調(diào),可以看到下圖的例子,右側(cè)的頁面會相對更穩(wěn)重一點。



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

在進(jìn)行色塊時,時常會糾結(jié)用灰色底還是彩色底來進(jìn)行。那么這兩者到底有沒有界限的區(qū)分呢,我們應(yīng)該何時使用這兩種色彩呢。



我們先看一下案例:



可以看出目前這兩種顏色的運用更多的是功能上的區(qū)分:


1.彩色背景更適用于「想要引起用戶注意的界面」,比如一些功能引導(dǎo)或者營銷性質(zhì)的頁面。從表現(xiàn)性質(zhì)上來講更重。


2.而灰色背景更適用于「利用灰色背景來區(qū)分層級關(guān)系」或者一些微弱提示的信息。從表現(xiàn)形式上來講更輕。


所以我們可以根據(jù)當(dāng)前的信息場景來選擇合適的色彩,后面再面對時就可以不用那么糾結(jié)。

07.寫在最后

本期的內(nèi)容到這里就結(jié)束了。關(guān)于這期的信息層級內(nèi)容,真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優(yōu)秀頁面并不是因為它本身就簡單,而是通過我們合理的信息層級控制,讓最終呈現(xiàn)上顯得不復(fù)雜,這其實也是我們在實際工作中需要注意的很重要的一個點。

本文重點內(nèi)容再回顧,當(dāng)我們遇見復(fù)雜的信息層級時,需要分三步:

1.明確當(dāng)前所有信息的必要性和重要分級,需要從源頭去深入了解;

2.運用五個方法可以有效減低信息層級:信息分組、組件拆分、更改布局、信息融入、信息弱化

3.同時在運用過程中需要注意影響層級的小細(xì)節(jié)

以上是本文關(guān)于信息層級的另一種角度的描繪,雖然沒有提及四大基本原則,但在實際運用中也是很重要的。最后,雖然進(jìn)行了很多資料查詢,但在在闡述過程中不可避免會有闡述不到位的地方,歡迎進(jìn)行反饋。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:進(jìn)擊的M    來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


設(shè)計思維中的共通性和差異性

純純

關(guān)于設(shè)計思維的文章我們也看過不少,也聽過大佬們講什么是設(shè)計思維,可都停滯于帶我們了解初識階段,并沒有教到我們怎么去踐行設(shè)計思維。設(shè)計思維 (Design Thinking) 是一種設(shè)計方法,提供基于解決方案的方法來解決問題。解決方案是什么?究竟要解決什么問題?如何去解決?在參考了大量的文獻(xiàn)后,更多的是在闡述設(shè)計思維是什么,具體的分類和步驟,更偏向于介紹和展示相關(guān)的知識。比如 Google 的 Design Sprint 方法論,比如 IDEO 首席執(zhí)行官 Tim Brown 提出的可行性三原則,比如斯坦福大學(xué)哈斯普拉特納設(shè)計學(xué)院(d.school)提出的五階段設(shè)計思維模型,而根據(jù) d.school 提出的五階段設(shè)計思維模型,大部分公司都基于這個模型進(jìn)行變量修改后作為自己的設(shè)計思維模式,這五階段設(shè)計思維模型為:同理心 (Empathise) - 定義 (Define) - 假設(shè) (Ideate) - 原型 (Prototype) -測試 (Test) ,幾乎大部分的設(shè)計思維都基于這五階段模型做的改變。


用同理心代入 (Derivation) 定義,用同理心建立 (Build) 原型,通過原型反推 (Reverse) 原型的成立,最后用測試結(jié)果證實 (Validate) 定義的正確性。

現(xiàn)在對設(shè)計思維有了大致的認(rèn)識,這里也不花太多篇幅去描述,但是全部看下來感覺自己腦袋暈乎乎的,那究竟我們在具體的工作學(xué)習(xí)中,要如何嘗試性代入且應(yīng)用設(shè)計思維來做設(shè)計呢?通過一些項目的經(jīng)驗我總結(jié)出關(guān)于如何運用設(shè)計思維做設(shè)計的方法,就是通過尋找產(chǎn)品之間的共通性和異樣性,深挖出關(guān)鍵性的問題所在,最后去解決這個關(guān)鍵性問題。



共通性與共同性

共通性和共同性在意義上有根本的區(qū)別,共通性是指相通或者適用于各方面的東西,比如共通的道理,共通的方法;共同性則是指彼此都具有相同的性質(zhì),比如大家共同的目標(biāo),共同的性格;產(chǎn)品與產(chǎn)品之間也是有共通性和共同性的,只有找準(zhǔn)產(chǎn)品的共通性,才能深度挖掘到核心問題的所在,從而通過設(shè)計手段解決核心問題。

與同類競品分析不同的是,競品分析需要通過大量且快速的對比找到各類產(chǎn)品之間的共同處和差異處,而尋找產(chǎn)品的共通性,則需要對逐個產(chǎn)品進(jìn)行深度剖析,挖掘共通的點 (Point),然后把這個點透過三原則:可行性 (Feasibility),可取性 (Preferability) 和創(chuàng)新性 (Innovativeness)分析來設(shè)計產(chǎn)品解決問題。一款產(chǎn)品或者某個功能模塊,只有在可行性和可取性中產(chǎn)生交集時,才可以在此之上進(jìn)行創(chuàng)新設(shè)計,可行性可以理解為開發(fā)可實現(xiàn),或者和業(yè)務(wù)需求沒有沖突的模塊,可取性是指性質(zhì)上可以取用。



舉一個簡單的例子,某個模塊希望通過彈窗的形式提升某二級頁面的跳轉(zhuǎn)率,那么提煉出業(yè)務(wù)訴求關(guān)鍵點:

  1. 1.提升二級頁面的跳轉(zhuǎn)率;

  2. 2.通過彈窗的形式展現(xiàn);

那么可取性就是【彈窗】這個 Piont,而可行性同樣為彈窗形式,那么他們共同的交集之處就是彈窗頂部的氛圍層和行動點,設(shè)計師就可以在這兩個交集處做自己的創(chuàng)意發(fā)散,比如在彈窗頭部氛圍做的很強(qiáng)烈吸引用戶,或者把行動點設(shè)計成帶有動效的按鈕以此來吸引用戶點擊等等。產(chǎn)品設(shè)計中通過共通性挖掘問題,而承諾和顧客的體驗達(dá)成共同相通,這是為了贏得用戶信任和尊重的需要。


產(chǎn)品的共通性

做產(chǎn)品第一步就是找出同類競品之間共同之處,把他們共同的地方記錄下來并做出統(tǒng)計。比如我需要做一個關(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è)計師疑惑:為啥總是左改一版右改一版業(yè)務(wù)方/老板就是不滿意,這在戰(zhàn)略層就出現(xiàn)了的問題,跳到執(zhí)行層上改來改去,肯定怎么改都不會有一個滿意的結(jié)果。這時候就需要將搜集到共同的地方做分析,找出它們各自存在的性質(zhì),然后挖掘產(chǎn)品的共通性。


通過各類競品搜集下來可以看出關(guān)于社區(qū)模塊的內(nèi)容大致分列為:話題標(biāo)題占比18%,統(tǒng)計信息占比18%,話題說明占比16%,心智氛圍占比8%,內(nèi)容分級占比4%以及其他內(nèi)容填充占比36%,具體歸類成A.標(biāo)題&統(tǒng)計、B.話題說明、C.心智氛圍、D.分級信息和 E.其他信息,然后排列優(yōu)先級順序為:A>B>C>D>E,最后一步就是分析各自獨有的性質(zhì):


A.標(biāo)題&統(tǒng)計信息:話題標(biāo)題和統(tǒng)計信息屬于必要模塊,標(biāo)題顯示話題主題,統(tǒng)計信息展示話題關(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)鍵點提煉出關(guān)鍵問題,在戰(zhàn)略上提出解決方案,才能從根本上解決產(chǎn)品問題。



就好比一個人捂著肚子沖進(jìn)診所,醫(yī)生首先了解捂著肚子的性質(zhì),是闌尾炎?是胃痛?還是其他的疾病,只有先熟悉各類疾病的性質(zhì)原因后,通過排查篩選找出根本的原因,才能提出是做手術(shù)還是藥物治療的解決方案;同理,回到之前的那個問題:為啥總是左改一版右改一版業(yè)務(wù)方/老板就是不滿意,都沒查出究竟是什么原因?qū)е露亲油矗烷_始開刀手術(shù)或者胡亂吃藥,運氣好了胡亂吃藥吃對了解決了,運氣不好被折騰涼了,最后的結(jié)果就是產(chǎn)品模塊下架撤離,所以無論是從零到一的產(chǎn)品還是業(yè)務(wù)改版,都需要找到產(chǎn)品之間的共通性,才能找出具體的解決方案。


設(shè)計細(xì)節(jié)的共通性

我們不難發(fā)現(xiàn)市場上很多出自于同一業(yè)務(wù)下的產(chǎn)品都有著自己的設(shè)計細(xì)節(jié),而在這些母艦上都有著各個模塊的附屬模塊,比如在QQ產(chǎn)品里的興趣部落、NOW直播、微視等模塊,比如在淘寶產(chǎn)品里的天貓、聚劃算、飛豬等模塊,那么在這些母艦下的附屬模塊,在設(shè)計細(xì)節(jié)上自然而然要和母艦保持一致性。舉個很明顯的例子:手淘設(shè)計語言中卡片的圓角為24px,手貓設(shè)計語言中卡片的圓角為10px(基于750px尺寸下),那么手貓其中的模塊自然是要遵循手貓的設(shè)計語言——圓角的尺寸為10px,但是如果這個模塊獲取到手淘透出的資源,那么在設(shè)計上,就要遵守手淘的設(shè)計語言——圓角尺寸為24px。

那么你會問了,這樣最多只是相同啊,有什么性質(zhì)意義呢?這和共通性又有什么關(guān)系?不同的產(chǎn)品所面向的用戶群體是不一樣的,所以主打心智也不一樣,設(shè)計上的細(xì)節(jié)傳達(dá)給用戶的心智一樣的不同。眾所周知,淘寶主要面向的用戶群體是大眾的,天貓主要面向的用戶群體是追求更高質(zhì)量或者品牌的,那么在細(xì)節(jié)上,24px的圓角卡片帶給用戶的心智是友好親切的,10px的圓角卡片帶給用戶的心智是偏向更精致更高質(zhì)感的;其次,如果用戶通過手淘的場景進(jìn)入天貓的模塊,一會兒24px的圓角一會兒10px的圓角,長時間下去用戶自然會分不清當(dāng)前場景是天貓還是淘寶,這是在產(chǎn)品一致性上做的共通性協(xié)調(diào)工作。所以如果是同類系的產(chǎn)品或者是模塊,在設(shè)計細(xì)節(jié)上一定要注意,保持模塊與模塊之間的共通性。(有的人可能不會注意到這些設(shè)計細(xì)節(jié),設(shè)計細(xì)節(jié)既然是細(xì)節(jié),個體本身影響力不是很大,很容易造成忽視,但是如果個體增多形成量級的話,造成的視覺影響是很直觀的



差異性

差異化策略是從改變產(chǎn)品的“絕對差異化”到改變認(rèn)知的“相對差異化”,越來越著眼于“人”的視角。在如今發(fā)展迅猛的網(wǎng)絡(luò)營銷時代,“人”的因素更是被置于產(chǎn)品運營和品牌營銷的核心位置,不過,這并非表明“定位”理論變得越來越重要了。這點做品牌的朋友相信有更多的感觸,但是無論你是做產(chǎn)品的,還是做品牌的,要想脫穎而出,首要的策略就是“差異化”。大家都知道平臺產(chǎn)品的最終目的是實現(xiàn)商業(yè)價值,可是如何實現(xiàn)商業(yè)價值,就是要通過產(chǎn)品之間的差異化來尋求突破點。



產(chǎn)品的差異性

依舊拿上面那個社區(qū)產(chǎn)品當(dāng)例子,同類對比我們發(fā)現(xiàn),大多數(shù)的社區(qū)產(chǎn)品更多的是流量引進(jìn)來營造平臺氛圍,無論是通過 PGC 的形式還是對內(nèi)容的打造,但是在商業(yè)價值化層面上則很少有渠道介入。那要如何通過設(shè)計表達(dá)出差異化并且實現(xiàn)商業(yè)價值,就需要對實現(xiàn)商業(yè)價值有一定的了解。當(dāng)社區(qū)把流量引進(jìn)時,實現(xiàn)商業(yè)價值常見的幾種方式有:

  1. 1.廣告宣傳的推廣;

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

  3. 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)鍵突破點。



通過尋找差異性找出關(guān)鍵突破點問題所在,并推導(dǎo)出相關(guān)的設(shè)計策略:平臺可以通過招商的形式發(fā)布社區(qū)話題,并且可以通過“參與話題送 xx 額度的優(yōu)惠券”、“參與話題并分享給好友獲取 xx 限量商品”等形式刺激用戶參與話題,并且也給用戶很方便的渠道入口直接進(jìn)行商品購買,防止流量丟失為他人做嫁衣;商家通過入駐平臺提供話題,平臺流量導(dǎo)入?yún)⑴c話題,商家通過參與話題給予優(yōu)惠等活動引導(dǎo)用戶購物,用戶通過平臺參與話題了解品牌獲取參與感;類似線下商場搞一些活動,品牌店給一些優(yōu)惠券之類的當(dāng)作參與活動的獎勵,然后客人可以去到品牌店消費,最終實現(xiàn)三方獲利的商業(yè)閉環(huán)!

不難發(fā)現(xiàn),通過尋找產(chǎn)品之間的差異性來挖掘出關(guān)鍵點問題,然后在此基礎(chǔ)上解決問題做出創(chuàng)新。追求差異化,是產(chǎn)品基于競爭角度永恒的主題。這種差異化甚至貫穿了產(chǎn)品生命不斷迭代的全程,也貫穿在與品牌相關(guān)的一切要素中——產(chǎn)品、包裝、廣告、價格、渠道、視覺、代言人等等,每種要讀的動態(tài)演變,都是一種創(chuàng)新,具體需要那種要素在哪些時刻做出何種改變,既要考慮到競爭,也要敏銳覺察用戶的需求、態(tài)度和行為的變化趨向。


設(shè)計細(xì)節(jié)的差異性

設(shè)計細(xì)節(jié)用共通性同樣也有差異性,而細(xì)節(jié)的差異性有時候往往能起到產(chǎn)品的關(guān)鍵性作用。這里使用之前做的一個實際項目做例子:淘搶購模塊 v4.0.1的改版。(保密性原則不透露任何數(shù)據(jù))因為淘搶購 v3.9樣式太過老舊,根據(jù)手淘語言更新的淘搶購 v4.0在投放過程中發(fā)現(xiàn),成交量和成交率比 v3.9降低了很多,所以在 v4.0.1的改版中最主要的是解決這個問題。



根據(jù)用戶采樣調(diào)研數(shù)據(jù)分析我們篩查和對比發(fā)現(xiàn),成交量和成交率下降的根本原因是用戶在頁面丟失,而用戶丟失的原因則是因為淘搶購 v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一個,對的你沒看錯,就是因為這么一個商品坑位的細(xì)節(jié)原因,導(dǎo)致 v4.0的成交量和成交率比 v3.9降低了很多,以至于引起重視從而需要解決問題。


找出關(guān)鍵問題后就要去解決問題,那么如何解決問題是關(guān)鍵。此處需要保證在不改變新版設(shè)計語言的基礎(chǔ)上對首屏 Sublist 的坑位透出做調(diào)整,那么只需要坑位透出3.5~4個坑位就能到達(dá)預(yù)期的效果,如何在有限的空間里解決這個問題,做了很多版本的嘗試。



通過各類嘗試得出ABCDEF六種方案后,這時候需要從設(shè)計細(xì)節(jié)的差異性逐一分析然后進(jìn)行取舍:


A.此方案為目前 v4.0實行方案,可以明顯看出單屏的效率只能展示3個商品坑位,因此是造成用戶在瀏覽的過程中會流失的根本原因;


B.此方案計與 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è)計曝光點擊率有所提升,也符合淘寶的設(shè)計風(fēng)格規(guī)范,但是單卡片樣式商品與商品之間分割感太強(qiáng)烈;


E.此方案將所有商品坑位包含在一個大卡片內(nèi),解決了商品與商品之間的分割感,商品信息細(xì)節(jié)也比小卡片展示得更完全,但存在問題就是:每個商品之間的間隔存在的分割線導(dǎo)致間距過大,屏效又回到舊版只能展示3個的問題,不能解決主要問題,所以pass;


F.此方案在大卡片設(shè)計上進(jìn)行了優(yōu)化,取消了分割線的設(shè)計,縮進(jìn)了商品與商品之間的間距,解決了小卡片式商品與商品之間分割感強(qiáng)烈的問題,圖片的大小信息細(xì)節(jié)也能給用戶良好的體驗,最主要單屏顯示3.5個商品坑位,解決了最主要的問題,也符合最新的淘寶設(shè)計規(guī)范和風(fēng)格,此方案為最佳方案。



最后采用了F方案,也就是目前我們線上看到的效果,在灰度上線和 A/B test 后數(shù)據(jù)反饋,淘搶購 v4.0.1的成交量&成交率相比 v4.0有很明顯的上升甚至超出了 v3.9的數(shù)據(jù),這是通過尋找設(shè)計細(xì)節(jié)上的差異性來解決問題最好的案例。再次證明:設(shè)計思維不應(yīng)被視為一種具體而不靈活的設(shè)計方法,細(xì)節(jié)的差異性有時候往往能起到產(chǎn)品的關(guān)鍵性作用,所以設(shè)計師從設(shè)計層面上去解決問題的時候,要不斷通過尋找產(chǎn)品之間的差異性,培養(yǎng)自己設(shè)計思維中的差異性。


動效差異性的運用

產(chǎn)品設(shè)計中,動效作為一種輔助手段,幫助設(shè)計師傳達(dá)具象的意愿,幫助開發(fā)理解交互手段,是一種錦上添花的表達(dá);前面的內(nèi)容更偏向于戰(zhàn)略層,而動效則偏向于表現(xiàn)層,同一種想表達(dá)的心智不同的樣式表達(dá)的效果完全不同。如何做好動效在產(chǎn)品中的表現(xiàn),我們就需要了解不同的動效所帶來的性質(zhì)傳達(dá)。



舉個例子,某個彈窗需要對行動點通過動效的展示進(jìn)行強(qiáng)化,但是同樣是強(qiáng)化行動點,如果產(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è)計差異化的力量不僅僅基于競爭,更要基于消費者需求的敏銳察覺和捕捉;設(shè)計思維的共通性和差異性,在今天也比以往任何時代都顯得重要。識別和競爭的需要決定了產(chǎn)品一定要差異化,而誠信和責(zé)任要求產(chǎn)品必須做到共通,差異性是產(chǎn)品價值的基礎(chǔ),而共通性則是產(chǎn)品價值的保障。設(shè)計思維不應(yīng)被視為一種具體而不靈活的設(shè)計方法,而是需要設(shè)計師們通過自己的經(jīng)驗積累,刻意地培養(yǎng)設(shè)計與產(chǎn)品之間差異性和共通性的意識,總結(jié)歸納出一套適用自己的設(shè)計思維。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:雨灰   來源:站酷

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


體驗度量經(jīng)驗分享:如何溝通共識?

seo達(dá)人



一、共識目標(biāo)

共識目標(biāo)大致分為兩方面,拉齊理解和對齊標(biāo)準(zhǔn)。

拉齊理解,減小彼此間的認(rèn)知差距??傮w上,我們需要拉齊彼此對度量長短期價值和目標(biāo)的理解;到各執(zhí)行階段,則需要拉齊對所需資源和預(yù)期輸出的理解。

圖片

對齊標(biāo)準(zhǔn),選擇團(tuán)隊認(rèn)同的維度指標(biāo)與監(jiān)測方式。個體對體驗優(yōu)劣的主觀感受和不同崗位職責(zé)的關(guān)注視角不盡相同。總體上,我們需要以產(chǎn)品定位規(guī)劃為指導(dǎo),結(jié)合客觀資源情況選擇適合的衡量標(biāo)準(zhǔn)。

圖片

如上圖舉例,一個對內(nèi)的商戶操作系統(tǒng)與其他競對在系統(tǒng)操作層面的比較意義不大,度量模型中用于和同類產(chǎn)品對標(biāo)的功能完整性的參考價值降低,則可以考慮暫不納入監(jiān)測維度。

確定維度后的下探監(jiān)測指標(biāo)是共識最主要的內(nèi)容。如上舉例,當(dāng)前業(yè)務(wù)首要關(guān)心產(chǎn)品SOP(Standard Operating Procedure 標(biāo)準(zhǔn)操作程序)“使用率”,而這項指標(biāo)與已確認(rèn)的參與度指標(biāo)定義極為貼合,那我們就不妨直接將該項做為參與度內(nèi)衡量指標(biāo)優(yōu)先接入。

 

二、共識內(nèi)容

到了具體的共識內(nèi)容,我們再按立項之前、項目執(zhí)行,項目復(fù)盤的階段順序聊聊。

1、立項之前

01.確認(rèn)要做體驗度量嗎?
體驗度量模型從搭建、驗證,到持續(xù)分析應(yīng)用需要一個漸進(jìn)的過程。充足的數(shù)據(jù)和穩(wěn)定的調(diào)研機(jī)制是良好應(yīng)用模型的基礎(chǔ)。處于探索與深化初期的產(chǎn)品調(diào)整較為頻繁,數(shù)據(jù)資源可能也有待完善。這一階段體驗度量理論方法或可以輔助完善線上埋點、建立定期走查、用戶調(diào)研等機(jī)制,但對度量前期數(shù)據(jù)可用于分析的價值預(yù)期要適度降低。

圖片

02.首期度量的范圍和預(yù)期?

首因效應(yīng)的影響不容忽視。雖然第一印象并非總是正確的,但卻是最鮮明、最牢固的,并且決定著以后雙方交往的進(jìn)程。

如上說到,度量需要一個漸進(jìn)的過程。我們可以選擇由局部擴(kuò)充至整體,也可以由整體完善至局部。首期度量就面臨著這樣的選擇,當(dāng)然選擇的范圍也對應(yīng)著不同的預(yù)期。

由局部擴(kuò)充至整體,圍繞業(yè)務(wù)當(dāng)前需求,圈定最小度量范圍。這樣選擇,一方面可以適度減低試跑數(shù)據(jù)的成本;另一方面,首期度量結(jié)果還不便向前比對應(yīng)用分析,但這不妨礙調(diào)研監(jiān)測到的信息為業(yè)務(wù)當(dāng)前需求提供輔助價值。需要注意的是,雖然選擇了由局部開始,但要始終遵循度量模型既定的統(tǒng)一框架,不能過分定制化。

由整體完善至局部,先監(jiān)測宏觀指標(biāo)再逐步完善下探。這樣選擇,一般可以快速選定已處于長期監(jiān)測的指標(biāo)接入系統(tǒng),但也因指標(biāo)較為宏觀,初期不免暫時無法解釋數(shù)據(jù)現(xiàn)象,就需要多期的下探追蹤來定位原因。

 

2、項目執(zhí)行

01.指標(biāo)統(tǒng)計

這部分是共識內(nèi)容的主體,具體指標(biāo)選取與統(tǒng)計方式我們在《體驗度量經(jīng)驗分享:如何搭建體驗指標(biāo)模型?》中進(jìn)行了梳理介紹。這里補(bǔ)充兩個共識小方法,準(zhǔn)備詳細(xì)參考資料選取整合已有資源。

對應(yīng)每次共識的內(nèi)容,參考資料可以有效提高溝通效率?!罢驹谇叭说募绨蛏稀痹诰唧w可感的案例指標(biāo)基礎(chǔ)上調(diào)整,遠(yuǎn)比憑空討論有效。

選取整合已有資源,“避免重復(fù)造輪子”。舉例滿意度維度,如此前已建立了相似的NPS調(diào)研制度,那便不必費時費力重新發(fā)調(diào)研問卷或是開發(fā)線上場景化調(diào)研能力。接入現(xiàn)有調(diào)研數(shù)據(jù),選擇符合模型需要的數(shù)據(jù)接入或許更經(jīng)濟(jì)適用。然后,在此基礎(chǔ)上再去優(yōu)化指標(biāo)細(xì)項與收集方式。

02.分析提煉

指標(biāo)選取和統(tǒng)計僅僅是準(zhǔn)備,怎么應(yīng)用現(xiàn)有食材炒出好吃的“菜”,目前依舊需要人工分析提煉。

結(jié)合業(yè)務(wù)所需,明確重點分析方向,深挖原因是收獲滿意結(jié)果的基礎(chǔ)。面對大量的數(shù)據(jù)呈現(xiàn),雖不可預(yù)知提煉的結(jié)果,但唯有聚焦能減少迷失,盡量避免最終呈現(xiàn)結(jié)果過于泛泛。
分析結(jié)果往往包含需求洞察、痛點定位等多條信息,整體打包解決稍不實際。為跟進(jìn)度量結(jié)果逐步落地,需明確優(yōu)先級共識,推動度量不僅僅停留在“報告”的階段。

圖片

 

3、項目復(fù)盤

01.如何評定度量的投入產(chǎn)出?

每期度量復(fù)盤,除共識達(dá)成情況和后期調(diào)整外,團(tuán)隊內(nèi)對度量本身的投入產(chǎn)出評定常常有被忽略。

因度量周期較長,定位問題也較寬泛,即便已經(jīng)定義了問題優(yōu)先級,通常狀況下也不便短期內(nèi)解決,有些方向性的洞察也會分散應(yīng)用到更多常規(guī)需求上,度量的價值也就沒能被很好的跟蹤記錄下來。這一方面我們的經(jīng)驗也稍顯欠缺,與需求綁定似乎還是不夠明確的解決方案。拿出來和大家分享,期待收獲更多的討論。

 

三、共識方式

最后,簡要聊聊共識的態(tài)度與形式。

中立的態(tài)度是溝通的基礎(chǔ)。每個環(huán)節(jié)共識前,可以先單獨收集團(tuán)隊成員的思路想法,引導(dǎo)大家放心分享自己的見解,提高收集效率,而不需當(dāng)即討論合適與否。

內(nèi)部訪談,基于團(tuán)隊成員職責(zé)差異,制定訪談大綱與溝通順序,為方便更高效的溝通與記錄。內(nèi)部溝通在達(dá)成指標(biāo)統(tǒng)計共識的基礎(chǔ)上,更可以幫我們對產(chǎn)品表象之下的業(yè)務(wù)邏輯有更加深入的理解。

穩(wěn)定的節(jié)奏,明確每一階段的待辦與負(fù)責(zé)人,定期組會對齊進(jìn)度,定期匯總小結(jié),逐層匯報共識,得到更廣泛團(tuán)隊成員的認(rèn)可。

以上,便是對往期度量共識中非理論方法部分的梳理。如何溝通沒有標(biāo)準(zhǔn),共識程度也難以衡量。期待大家提出寶貴意見,共同討論如何將度量的理論方法更好地應(yīng)用于業(yè)務(wù)實踐。


作者:李明玥、賀紫蒙

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》體驗度量經(jīng)驗分享:如何溝通共識?

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


用上這24個UI體驗優(yōu)化經(jīng)驗,果然做出來的設(shè)計更高級了!

seo達(dá)人


一、暗色模式下飽和度不宜過高

高飽和度的顏色能形成強(qiáng)烈的對比。在暗黑模式下使用高飽和度會很刺眼,給用戶很不好的體驗。暗黑模式一般在晚上使用,因此對設(shè)計師來說,需要做的是讓整個配色相對柔和,讓用戶感到放松。基于此,在設(shè)計的時候應(yīng)該將飽和度限制在200-500之間。

(彩云注:這里的200-500彩云去查了不少資料,但沒有找到最好的答案,這里引用的是Material Design中的顏色規(guī)范,感興趣的同學(xué)可以自行查找)

圖片

 

二、 按鈕要有優(yōu)先級

在同一個界面,最理想的狀態(tài)是只有一個最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因為如果一個界面上有太多這種行動按鈕(CTA)按鈕,會讓關(guān)鍵操作淹沒在這些按鈕中,讓用戶不知所措。

圖片

 

三、簡化不必要的動詞

沒必要在菜單上增加動詞和短語,用最少的信息寫清楚功能就足夠讓用戶理解了。所以,在菜單設(shè)計上要盡量避免增加無關(guān)緊要的詞,這樣才不會影響用戶體驗。

圖片

 

四、字體尺寸類別越少越好

你可能注意到,很少有表單的字體大小不平衡,字體之間的類別盡量少一些看起來會更加平衡。在決定字體大小時,盡量規(guī)范字號的標(biāo)準(zhǔn)。比如標(biāo)題(16px),副標(biāo)題(12px),正文(10px),說明文字(8px),這些尺寸都是以2為倍數(shù)的。

圖片

 

五、不要混用圖標(biāo)風(fēng)格

盡管我知道要做好圖標(biāo)一致性,但在實際工作中依然經(jīng)常犯錯。很多設(shè)計師經(jīng)常用不同風(fēng)格的圖標(biāo)混在一起,這樣會讓整個UI界面的設(shè)計顯得很不成熟。圖標(biāo)是為了讓用戶更有效率地理解事物。在使用圖標(biāo)的時候一定要注意圖標(biāo)的一致性,尤其是一些是一些風(fēng)格細(xì)節(jié)。

這里也跟大家分享2個我自己常用的figma圖標(biāo)庫:

1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

圖片

 

六、不同背景下的顏色飽和度適當(dāng)微調(diào)

通常情況下,我們會認(rèn)為一個顏色在深色模式和亮色模式下是用的同一個顏色值,但這其實是錯誤的。一個顏色在亮色模式下看起來非常漂亮,但在深色模式看可能就太暗了,反之亦然。解決這個問題最好辦法是使用2套不同飽和度的顏色。

圖片

 

七、新手引導(dǎo)多給用戶自主權(quán)

App的新手引導(dǎo)決定了用戶第一次體驗產(chǎn)品時的感受。在設(shè)計的時候,試著公開需要哪些具體步驟,增加”跳過“和前后移動查看的能力對新用戶來說非常重要。

圖片

 

八、在圖片上增加疊加層

許多網(wǎng)站和App都是用圖片驅(qū)動的,但在圖片上直接增加文字內(nèi)容有時候會被淹沒掉。在圖片上增加一個疊加層可以提升內(nèi)容的可讀性。

圖片

 

九、信息部分露出

對于一些大屏設(shè)備來說,像筆記本電腦,平板電腦和智能電視,它們都有非常多閑置的空間。對于這些閑置的空間來說,盡量通過設(shè)計告訴它底部還有更多內(nèi)容。這對UI和UX方面都有好處,因為空間的使用方式能夠讓用戶清晰的知道所有內(nèi)容。

圖片

 

十、拆分大段文字

為了讓用戶聚焦閱讀,應(yīng)盡量避免使用大段的長/寬行。保持短句和簡潔能夠增加內(nèi)容的可讀性。(彩云注:這點用在你的作品集里也是很合適的,有些人經(jīng)常使用大段的文字內(nèi)容來描述,很可能直接勸退面試官)

圖片

 

十一、Z字形原理

Z字形原理,也就是大眾所熟知的”古騰堡原理“,它描述了當(dāng)人們看到一個均勻分布元素的設(shè)計時,眼睛的總體運動情況。通過這個原理我們知道,用戶在內(nèi)容上的視線是沿著Z字形來閱讀的,所以遵循這一原理設(shè)計你想要核心表達(dá)的內(nèi)容。

圖片

 

十二、擴(kuò)大可點擊范圍

擴(kuò)大點擊區(qū)域,維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸,如果你設(shè)計的點擊區(qū)域太小會讓用戶點擊困難,造成流失。

圖片

 

十三、盡量使用簡潔的圖標(biāo)

避免使用花俏和俗氣的圖標(biāo),它們會讓整個設(shè)計顯得非常不成熟,同時也是很難理解的。用上更簡單的圖標(biāo)形式,會讓界面更高級。(彩云注:當(dāng)然越簡單的圖標(biāo)其實想畫出彩會更難,另外也需要區(qū)分不同的場景,像一些運營類的圖標(biāo)可能會為了活動氛圍做的相對風(fēng)格化一些。)

圖片

 

十四、正確的文案表達(dá)

選錯文案,會讓人們對于任務(wù)缺乏興趣,根據(jù)上下文使用更合適的詞組。

圖片

 

十五、考慮手勢操作

輕敲和點擊有時候很累人,可能不如使用滑動、拖拽等手勢操作,這些操作會讓界面更簡潔并且也能順利地完成既定任務(wù)。

圖片

 

十六、展示部分文案

在探索酒店、目的地甚至是閱讀任何文章時,用戶經(jīng)常都需要點擊卡片。為了使得探索更加吸引人注目和干脆,避免使用長文本導(dǎo)致的滾動。相反,可以加一個閱讀更多的按鈕方便想看全所有內(nèi)容的用戶。

圖片

 

十七、接近法則

”鄰近的物體往往被視為是同一組內(nèi)容“。有時候為了把內(nèi)容區(qū)分開的更清晰,嘗試用線對相關(guān)內(nèi)容進(jìn)行分組。(彩云注:其實有留白和不同顏色做區(qū)分也是可以的,建議根據(jù)自己的設(shè)計風(fēng)格和具體內(nèi)容來定)

圖片

 

十八、文字控件可視化

在設(shè)計控件時,如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化,除了非常需要很精確的設(shè)置參數(shù)。對于價格范圍這種,很容易將它可視化為滑塊控件。

圖片

 

十九、占位符要接近要填寫內(nèi)容

對一些人來說容易理解的東西,對某些人來說可能不是。因此,最好使用示例占位符來解釋輸入字段,這可以防止用戶在填寫內(nèi)容時出錯。

圖片

 

二十、系列位置效應(yīng)

根據(jù)”系列位置效應(yīng)“,心理傾向于記住列表的第一項和最后一項,而不是中間項。因此,在任何App中設(shè)計導(dǎo)航時,根據(jù)應(yīng)用的上下文保持最左和最右的選項。例如instagram,最左邊是”首頁“,而最右邊是”用戶“。(彩云注:這是一個心理學(xué)上的理論,人們對于一系列的材料更容易記住開頭的內(nèi)容,也叫做首因效應(yīng)或者首位效應(yīng);更容易記住末尾的內(nèi)容,就叫近因效應(yīng)。)

圖片

 

二十一、減少點擊次數(shù)

在設(shè)計任何體驗時,點擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計用戶需要點擊多少次才能完成他的目標(biāo),額外的點擊會減慢整個操作過程。簡化過程,自然體驗就會更好,所以盡可能的減少點擊次數(shù)。(彩云注:下面的案例,增加可點擊符號也可以減少用戶思考的時間。)

圖片

 

二十二、少即是多

為了使內(nèi)容突出,沒有必要使用多種字體類型,包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量,同時只使用一種字體足以吸引用戶對內(nèi)容的注意力。

圖片

 

二十三、留白定義重點

留白在設(shè)計中非常重要,太少或者沒有留白會使得設(shè)計非常混亂。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。

圖片

 

二十四、別讓用戶閑著

根據(jù)多爾蒂閾值(Doherty Threshold)這個理論:”系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應(yīng),這樣才能夠讓使用者保持專注,并提高生產(chǎn)效率。“。因此,我們可以使用動畫、圖像甚至文本來保持用戶的注意力。(彩云注:給用戶的提示可以先快速加載信息框架,讓用戶有事可做,而不是什么都看不到)

圖片


作者:彩云Sky


轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》用上這24個UI體驗優(yōu)化經(jīng)驗,果然做出來的設(shè)計更高級了!

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


日歷

鏈接

個人資料

存檔