做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

首頁

競品分析怎么做?攻略來啦!

資深UI設(shè)計者

做競品分析時,我們往往會抱怨我們身為設(shè)計師,為什么要知道行業(yè)趨勢?為什么要了解商業(yè)模式?認為那是產(chǎn)品經(jīng)理的工作,其實不然,當我們踏入一個行業(yè),或者在某個行業(yè)扎根做大做強,我們是需要一些專業(yè)的行業(yè)知識的,例如同樣是設(shè)計一個UGC平臺,金融行業(yè)和社交行業(yè)就會有很多不一樣的地方,包括用戶習(xí)慣和商業(yè)模式等。

B端交互設(shè)計之內(nèi)容太多怎么辦

資深UI設(shè)計者

B端交互設(shè)計之內(nèi)容太多怎么辦

ZZiUP
北京
/
設(shè)計愛好者
/
3年前
/
10353瀏覽
版權(quán)
私信
關(guān)注
B端交互設(shè)計之內(nèi)容太多怎么辦

ZZiUP
關(guān)注
做設(shè)計的時候,尤其是B端頁面,我們一般按常用的場景去設(shè)計,但是內(nèi)容過多的時候如何在頁面中更好的顯示呢?
我們知道B端產(chǎn)品設(shè)計場景更復(fù)雜,內(nèi)容更加不可控,再加上電腦屏幕大小適配,頁面寬度可自由拉伸,種種因素都要我們更加仔細的考慮頁面的各種極限值情況,如何寫全面設(shè)計規(guī)約是難點。相信在設(shè)計評審會上開發(fā)和測試最常問到的一個問題也是:這里內(nèi)容過多怎么展示?雖然我們在設(shè)計的時候是按照80%的場景去考慮,但是剩下20%的極限場景也需要我們給出設(shè)計規(guī)則。我根據(jù)工作中遇到的內(nèi)容過多的情況整理了以下這么多,當然解決辦法也可能有更好的方式,都歡迎大家補充~~

【目錄】

一、文字過多

1、標題文字過多

   標題因為頁面、模塊等寬度限制,標題文字超長的極限情況如何顯示必然是需要考慮的。

   具體設(shè)計和寫設(shè)計規(guī)則時要考慮場景、功能、頁面布局等等情況再選擇處理方式。

1)只有標題

a打點:

注意要根據(jù)頁面布局結(jié)構(gòu),給出標題最大寬度,然后標題文字過長打點,hover出tips;優(yōu)點是保持頁面簡潔、方便對齊;缺點是無法直觀看到全部內(nèi)容;

b折行:

給出標題最大寬度,然后標題文字過長則折行顯示;優(yōu)點是能夠直觀顯示出全部內(nèi)容,缺點是內(nèi)容太多的話視覺不友好:

c先折行再打點:

給出標題最大寬度,然后標題文字過長則折行顯示,折超過(比如2行)再打點。適用于大部分場景下最多2行就能顯示全,而且文字內(nèi)容對用戶非常重要

2)有標題還有其他說明文字時

 當分組標題和說明文字結(jié)合時,一般要優(yōu)先顯示標題區(qū)域;當?shù)竭_說明文字最小間距(比如40px)時,標題打點,說明文字顯示不下也打點;hover時出tips

3)表單的標題

 標題文字較多時一般換行顯示,最多顯示(比如2)行,更多打點顯示,鼠標經(jīng)過顯示tips;換行后算整體高度,距離下面的表單間距保持一致;

4)打點的規(guī)則

也就是從哪里開始打點,也是需要根據(jù)場景考慮的:

a.尾部打點,也是最常用的

b.中間打點,比如sketch畫板的標題展示不全時是從中間開始打點的;

c.特定位置打點,比如標題里人名字過多時,沒辦法展示全,但是后邊的【等120人打標簽】又是極其重要的信息,這時候就需要給定人名稱一個最大展示的寬度,超過最大寬度就在最后一個人名處打點顯示;

2.文本框內(nèi)文字過多

文本框需要考慮單行文本/多行文本、激活態(tài)/展示態(tài)下文字過多如何顯示

1)單行文本

a有字數(shù)限制

很多場景下,輸入框都不是無限輸入的,需要產(chǎn)品給出最大范圍,這時主要考慮校驗報錯問題:

在搜索框,往往會設(shè)置最大字數(shù),超過則會截斷:

b無字數(shù)限制

輸入狀態(tài)時,文字過多,光標定位在輸入框末尾,可無限輸入,輸入框頭部內(nèi)容向前隱藏/截斷:

展示態(tài)時,內(nèi)容從頭部開始顯示,輸入框末尾打點,或者漸隱,hover時可以選擇出不出tips:

輸入完成后的一些交互:

還有一種處理方式就是,超過字數(shù)限制后直接截斷,不讓輸入。

2)多行文本

a有字數(shù)限制

b無字數(shù)限制

3.介紹/說明文字過多

用按鈕,展開收起內(nèi)容,展開收起可以常駐,也可以設(shè)置在鼠標hover時在顯示出來。

二、彈層內(nèi)容過多

1、確認對話框

寬度自適應(yīng),文字自動換行,設(shè)置最大寬度;設(shè)置最大高度,內(nèi)容過多則出滾動條;還要給出滾動區(qū)域,比如標題+內(nèi)容的區(qū)域高度;

2、tips提示

tips寬高根據(jù)文字內(nèi)容自適應(yīng),設(shè)置最大寬度;文字過長時自動換行,設(shè)置最大高度,超過最大高一般多于的數(shù)據(jù)不展示,因為tips都是比較輕的提示;

3、警告提示

寬度自適應(yīng),文字自動換行。設(shè)置容器最大高度,標題+內(nèi)容數(shù)據(jù)過多,則產(chǎn)生滾動條

4、全局提示

容器寬高自適應(yīng),給出最大寬高,大于最高高度時出現(xiàn)滾動條,反饋信息建議精簡到一至兩行,icon位置固定不變。

5、模式彈層

彈層寬/高度可以給出定值,也可設(shè)置占視窗的百分比,設(shè)置占視窗的百分比,為了避免在窗口放大和縮小時彈層無限大或者無限小,一般就要同時設(shè)置最大最小寬度定值。比如設(shè)置彈層最大高度為頁面高度90% ,也可以設(shè)置100%,即高度全屏的彈層;高度超過頁面高度 90%時,則顯示滾動條,最小高300px;寬度在600px到1000px之間自適應(yīng)。

不管是什么彈層,其實都是承載內(nèi)容的容器,內(nèi)容很多時,容器不能隨內(nèi)容無限大就需要設(shè)置最大最小值或者百分比。

三、選項過多

1、選項較少

當選項較少,空間足夠時,可以把選項平鋪展示,一方面能讓用戶直觀看到所有選項,另一方面也能減少用戶操作步驟;可以設(shè)置單選、復(fù)選

2、選項較多

當選項很多,空間不夠時,需要用彈層把選項收起以節(jié)省頁面空間;

1)單選下拉選擇器

當下拉內(nèi)容還很多,而且需要分類,那么就需要:分組下拉選擇器

2)復(fù)選下拉選擇器

a.個數(shù)過多

復(fù)選下拉框內(nèi)選中項【個數(shù)】過多時,需要給出下拉框的最大高度,超過最大高度則折行,出滾動條:

b.字數(shù)過多

選中項【內(nèi)容】過多,需要給出選中項文字一個最大寬度,超過打點hover時顯示tips

c.彈層規(guī)則

【下拉彈層內(nèi)】根據(jù)下拉選項內(nèi)容自適應(yīng)撐開,還需要給出彈層的最大高度為(比如290px),內(nèi)容過多產(chǎn)生滾動條;

d.加入搜索功能

如果下拉彈層內(nèi),選項非常多,那么用戶應(yīng)用起來比較費勁,雖然有滾動條能展示全部選項,但是從這么多選項中選出某個選項就比較難了。這時就可以在彈層上加【搜索框】解決,方便用戶搜索;也可以在下拉選擇框上直接設(shè)置檢索功能;

四、按鈕/標簽過多

1、用按鈕收起

最常用的解決方法就是用【更多按鈕】收起更多不常用的按鈕或標簽;

比如:

2、箭頭切換,輪播

還可以用【左右箭頭】的方式進行切換:

3、漸進式設(shè)計

預(yù)先判斷用戶的操作,在用戶進行特定操作后再出現(xiàn)按鈕;漸進式設(shè)計是目前比較流行的,也是用戶體驗比較好的。

1)hover時再出現(xiàn)要操作的按鈕:

2)勾選復(fù)選框后出現(xiàn)按鈕:

如下圖,選中選項后,篩選自動收起為一行同時操作區(qū)域出現(xiàn)覆蓋篩選區(qū),表格隨著篩選移動;
取消所有勾選項或是點擊關(guān)閉按鈕,操作區(qū)收起恢復(fù)成篩選區(qū),篩選恢復(fù)成勾選前的狀態(tài);

還有teambition的文件庫,復(fù)選框勾選前:

復(fù)選框 勾選后出現(xiàn)行操作按鈕,按鈕覆蓋標題的位置:

3)根據(jù)編輯態(tài)和展示態(tài)進行區(qū)分:

展示態(tài)下頁面比較整潔,不顯示多余的按鈕:

編輯內(nèi)容后,出現(xiàn)操作按鈕:

輸入完成后的展示依然比較整潔:

五、表格內(nèi)容過多

B端產(chǎn)品的頁面常常會用到表格來承載一條條數(shù)據(jù)/記錄,那最好的情況就是表格列數(shù)較少,在最常見尺寸的屏幕下就能夠全部展示:

但是,往往表格字段比較多,列數(shù)多會出滾動條,行數(shù)多出分頁;

出現(xiàn)滾動條時為了關(guān)鍵的信息能夠一直顯示,常常會鎖定首列或者操作列:

1、左側(cè)列鎖定:

鎖定后,滾動數(shù)據(jù)列表內(nèi)的滾動條左側(cè)列首位置不動,只滾動右側(cè)的數(shù)據(jù),向左滾動的數(shù)據(jù)會被列首區(qū)域遮擋;

2、右側(cè)列鎖定:

滾動數(shù)據(jù)列表內(nèi)的滾動條右側(cè)列尾位置不動,只滾動左的數(shù)據(jù),向右滾動的數(shù)據(jù)會被列尾區(qū)域遮擋;

3、橫向滾動條

數(shù)據(jù)寬度超過屏幕寬度,則顯示橫向滾動條

4、縱向滾動條

數(shù)據(jù)高度超過屏幕高度,則顯示縱向滾動條;滾動范圍為表頭與分頁之間的內(nèi)容區(qū)域;

六、功能過多

1、用導(dǎo)航劃分

頁面結(jié)構(gòu)層面上信息過多一般會用一級導(dǎo)航,二級導(dǎo)航的形式劃分內(nèi)容

2、切換頁簽收納

頁面內(nèi)容過多還常常用頁簽來收納;

3、加入面包屑

當頁面層級較多時需要加面包屑引導(dǎo)用戶如何返回,告知用戶的位置;面包屑不僅能讓用戶不迷路,還可以用來快速定位內(nèi)容,便于用戶快捷的選擇;

4、抽屜收納

抽屜可以收納很多內(nèi)容和操作同時保持頁面整潔。

做設(shè)計的時候,尤其是B端頁面,我們一般按常用的場景去設(shè)計,但是內(nèi)容過多的時候如何在頁面中更好的顯示呢?

交互思考:怎么設(shè)計任務(wù)流程

資深UI設(shè)計者

任務(wù),到底是怎么來的?是原本就存在的?還是人為設(shè)計而來的?

我理解中的交互設(shè)計與淺談對蘋果產(chǎn)品的人機交互與其設(shè)計哲學(xué)的感受

資深UI設(shè)計者

在之前文章的基礎(chǔ)上加入了一些圖示,可視化自己的理解

寫文章來整理自己的思路,再談?wù)勛约簩μO果產(chǎn)品的感受,歡迎一起討論啊

看懂設(shè)計(合集):交互設(shè)計原則在設(shè)計工作中的理解和應(yīng)用

資深UI設(shè)計者

本篇旨在簡明扼要地向大家介紹交互設(shè)計中的一些原則,幫助大家理解和真正在工作中應(yīng)用

超全面陰影設(shè)計指南

前端達人

引言
在UI設(shè)計的藝術(shù)領(lǐng)域里,有三個被廣泛運用并備受贊譽的設(shè)計元素,它們被形象地稱為“三大法寶”,
分別是陰影設(shè)計、圓角、透明
,對于初學(xué)者和設(shè)計師們來說,它們仿佛是提升界面層次感和吸引力的魔法棒。尤其是在設(shè)計卡片布局時,很多同學(xué)會不假思索地應(yīng)用系統(tǒng)默認的陰影效果,覺得這樣能為設(shè)計增添不少魅力。
 
然而,真正讓陰影效果發(fā)揮最佳作用的關(guān)鍵,并不在于簡單地添加它,而在于如何根據(jù)不同的設(shè)計場景和需求,精心選擇并設(shè)置陰影。今天,我們就來深入探討一下,如何在UI設(shè)計中巧妙運用陰影這一元素。
 
陰影的選擇和設(shè)置并非隨心所欲,而是需要綜合考慮多種因素,如光源位置、界面風(fēng)格、元素功能等。通過精細調(diào)整陰影的大小、透明度、模糊度和顏色等屬性,我們可以讓陰影與整體設(shè)計完美融合,為界面增添立體感和深度,同時避免過度使用導(dǎo)致的視覺混亂。
 
因此,在設(shè)計過程中,我們需要深入了解陰影的特性和運用技巧,結(jié)合實際需求進行靈活調(diào)整。只有這樣,我們才能真正掌握陰影這一UI設(shè)計利器,為作品增添更多的魅力和吸引力。
 
目錄
超全面陰影設(shè)計指南
 
 
 
01.  背景
“藝術(shù)來源于生活又高于生活”設(shè)計領(lǐng)域同樣如此,特別是在我們所關(guān)注的界面設(shè)計中。
界面中的陰影就是讓物體擁有來源于真實物理世界一樣的空間特性
 
在設(shè)計的早期階段,界面元素的設(shè)計往往傾向于盡可能地模擬現(xiàn)實世界的物體,以此拉近用戶與互聯(lián)網(wǎng)產(chǎn)品之間的距離,降低其陌生感。然而,隨著互聯(lián)網(wǎng)的快速發(fā)展和對高效迭代的需求,許多模擬真實世界的細節(jié)被簡化或優(yōu)化,以突出用戶最為關(guān)心的質(zhì)感、層次感和深度。在這里,陰影元素尤為關(guān)鍵,它成為了構(gòu)建界面深度感的核心。
 
陰影在界面中的應(yīng)用,使得元素能夠自然地呈現(xiàn)出一種錯落有致的空間布局。通過調(diào)整陰影的大小,我們可以清晰地傳達出界面中不同元素之間的層級關(guān)系和優(yōu)先級,從而降低了用戶理解界面的難度,幫助他們更快速地識別所需信息。這種設(shè)計方式不僅提升了用戶體驗,也讓界面設(shè)計更加富有層次感和立體感。
超全面陰影設(shè)計指南
 
 
 
02.  陰影的原理
2.1 為什么需要使用陰影
在界面設(shè)計中,當用戶進行操作時,有時會導(dǎo)致兩個物體因為位置的調(diào)整而發(fā)生表面上的重疊。當這種重疊發(fā)生時,如果物體的不透明度或?qū)Ρ榷炔粔蝻@著,用戶往往會遇到識別上的困難,即難以判斷哪一個表面位于另一個表面的前方。
 
為了解決這個問題,一種有效的方法是清晰界定每個表面的邊緣。通過明確這些邊緣,我們可以有效地減少因重疊而產(chǎn)生的混淆,幫助用戶更輕松地辨識不同表面之間的層次關(guān)系,從而避免這種“尷尬”的重疊現(xiàn)象,提升用戶體驗和界面的清晰度。
超全面陰影設(shè)計指南
 
 
 
從上面可以看到,我們有三種處理方法:
 
方式一:
陰影顯示表面邊緣、表面重疊和高度。
方式二:
不同的表面顏色顯示表面邊緣和重疊,但不顯示高度。
方式三:
不透明度顯示表面邊緣和重疊,但不顯示高度。
通過對比我們發(fā)現(xiàn)陰影可以以最簡單的方式展示表面之間的高度。
 
2.2 陰影的影響因素
 
陰影來源于現(xiàn)實生活反映物體與物體之間距離的物理現(xiàn)象。陰影受
光源的方向
以及
物體與物體之間相對高度
的影響。
 
在界面中,我們往往通過模擬元素的投影直截了當?shù)膩砀嬖V用戶,元素的空間關(guān)系。
 
物體越低,優(yōu)先級越低,其陰影小而銳利,反之物體越高,優(yōu)先級越高,其陰影越大越柔和。在設(shè)計中常見的陰影影響因素有X軸、Y軸、模糊、擴展。
 
X軸:
這是投影延水平面或者X軸位置的偏移,控制著頂部和底部的陰影;
Y軸:
這是投影延垂直面或者Y軸位置的偏移,控制著頂部和底部的陰影;
模糊:
調(diào)整陰影顏色的模糊或者羽化;
擴展:
控制著陰影的大小以及前景與后景之間的距離;
超全面陰影設(shè)計指南
 
 
 
03.  陰影的狀態(tài)與形式
當界面中的組件失去陰影效果時,用戶在操作時可能會因為視覺上缺乏變化而感到困惑,對頁面內(nèi)的層級關(guān)系產(chǎn)生疑慮,進而覺得內(nèi)容顯得混亂,增加了理解和使用界面的難度。
 
用戶通常期望界面元素之間能在空間上有所區(qū)分,以實現(xiàn)更為直觀和流暢的交互體驗。
常見的陰影狀態(tài)分為常規(guī)和懸浮兩種。
 
常規(guī)陰影:
這是不進行任何操作時界面的默認陰影樣式,通常表示為零級陰影狀態(tài),它為用戶提供了一個清晰的視覺層級參考。
 
懸浮陰影:
當用戶與界面進行交互,如hover態(tài)時,元素可以使用一級陰影,甚至根據(jù)特定場景需求,可能采用二級或三級陰影狀態(tài)。這種動態(tài)變化不僅提升了界面的趣味性,也增強了用戶對于元素狀態(tài)變化的感知。
 
陰影在界面中扮演著重要的角色,它能夠直觀地體現(xiàn)元素的層級關(guān)系。不同的陰影高度代表了不同的層級,陰影的強度則由元素與地面之間的距離決定。因此,物體的高度直接影響了其陰影的大小和模糊程度。物體離地面越遠,其陰影通常越大,模糊值也相應(yīng)增高。
 
在antdesign設(shè)計系統(tǒng)中,采用了代表四個不同高度級別的陰影來適配界面中的元素,而不是像某些美國網(wǎng)頁設(shè)計系統(tǒng)那樣采用六種不同的高度。這四個陰影級別各自對應(yīng)著不同的高度層級,并且擁有獨特的屬性,以確保界面元素在視覺上既清晰又和諧。
超全面陰影設(shè)計指南
 
 
 
第 0 層:
物體緊貼地面,投影與物體完全重疊,在界面中不對此層定義陰影值。
如:
篩選
超全面陰影設(shè)計指南
 
 
 
第 1 層
: 物體位于低層級,此時物體被操作(懸停、點擊等)觸發(fā)為懸浮狀態(tài),當操作完成或取消時,懸停狀態(tài)反饋也跟隨消失,物體回歸到原有的層級中,如:卡片 hover 等;
超全面陰影設(shè)計指南
 
 
 
第 2 層:
物體位于中層級,此時物體與基準面的關(guān)系是展開并跟隨,物體由地面上的元素展開產(chǎn)生,會跟隨元素所在層級的移動而移動。如:
下拉面板
等;
超全面陰影設(shè)計指南
 
 
 
第 3 層:
物體位于高層級,該物體的運動和其他層級沒有關(guān)聯(lián)。如:對話框等。
超全面陰影設(shè)計指南
 
 
 
04.  陰影的應(yīng)用
4.1 真實的反饋
模擬真正狀態(tài)下的陰影,我們可以通過對其變化過程進行三層拆分,讓原本生硬的陰影變的更加柔和。
上圖展示了不同級別陰影的從低到高不同層級變化過程
上圖展示了不同級別陰影的從低到高不同層級變化過程
 
4.2 光源方向原理
陰影的偏移由組件的位置決定,確保同一套組件在光源方向的一致性。
超全面陰影設(shè)計指南
 
 
陰影的位置對于提升用戶體驗和視覺設(shè)計至關(guān)重要。按照光源方向的邏輯,我們可以這樣總結(jié)陰影的三種常見應(yīng)用:
 
陰影向左:
當元素(如導(dǎo)航欄、抽屜組件或固定表格欄)位于屏幕右側(cè)時,向左的陰影能夠突出這些元素,并暗示它們是可交互或可擴展的。
 
陰影向右:
對于位于屏幕左側(cè)的元素(如導(dǎo)航欄、抽屜組件或固定表格欄),向右的陰影能夠吸引用戶的注意力,并強調(diào)這些元素的存在和重要性。
 
陰影向下:
陰影向下通常用于組件內(nèi)部或組件本身,以營造立體感和層次感,這是界面設(shè)計中比較常規(guī)且有效的視覺處理方法。
 
05.  總結(jié)
陰影設(shè)計在界面設(shè)計中扮演著至關(guān)重要的角色,它不僅能夠增強設(shè)計的立體感和層次感,還能有效地引導(dǎo)用戶的注意力,提升用戶體驗。在本文中,我們探討了陰影在不同位置所代表的含義及其應(yīng)用場景。
 
我們還詳細的了解了陰影的變化過程,在對應(yīng)的工作中,能夠根據(jù)不同的信息層級來設(shè)置陰影,希望這篇文章能夠讓我們對陰影這種常見技法有深入的了解。
 
以上就是我對陰影設(shè)計見解和總結(jié),我非常期待能夠與你分享更多的想法,并一同在設(shè)計的道路上不斷進步。
 
 

AI時代新篇章:用戶體驗設(shè)計的智能革命與未來展望

ui設(shè)計分享達人

隨著ChatGPT在23年初的火熱,AI熱潮已經(jīng)開始席卷各行各業(yè),人們對于AI的熱情就像是看著第一款iPhone發(fā)布或者蒸汽機的發(fā)明,期待著它帶來一場信息時代的工業(yè)革命。同時,AI替代60%崗位的口號也足以讓相關(guān)從業(yè)者感到前所未有的壓力與焦慮。在各大設(shè)計網(wǎng)站上,關(guān)于AI的內(nèi)容肉眼可見的占據(jù)了越來越多的比重,包括AI在設(shè)計流程中的應(yīng)用、各種AI最新工具等介紹、AI的使用技巧、AI生成的海報/插畫等作品……一瞬間,似乎全民都投入到了AI的浪潮之中。
反過頭來看,對于用戶體驗設(shè)計而言,由于產(chǎn)品的底層邏輯被AI改寫,產(chǎn)品的生態(tài)、單個產(chǎn)品的形態(tài)、使用方式等都將發(fā)生翻天覆地的變化。連帶著的,由于生產(chǎn)工具的變革,產(chǎn)品的設(shè)計、開發(fā)流程也將隨之發(fā)生變化,進一步提高效率,對于從業(yè)人員的能力要求也在實時更新。
對于這樣一種浪潮,埋頭當個鴕鳥或者嗤之以鼻是沒有意義的,我們需要看到、認識、擁抱它。所以有人笑稱:打不過就加入。同時,對于各種所謂干掉各個崗位的宣傳,也吸引著、推動著我們?nèi)チ私鈱⒈皇裁锤傻粢约霸趺幢桓傻簟?br /> 從另一方面講,只有在技術(shù)變革的時候,彎道超車才有可能。如果只是沿用之前的經(jīng)驗與技術(shù),那么成熟的企業(yè)就會有先發(fā)優(yōu)勢。但是當面對新的技術(shù)變革時,大家被拉回到同一起跑線上,這個時候,就看誰能夠找到正確的方向,率先突圍。
所以,不管是被動也好,還是主動也好,面對著新一輪的技術(shù)變革,也希望從AI能力本身、所帶來的變化、以后的發(fā)展等方面全面了解一下這個新的時代寵兒。

圖標設(shè)計的進化歷程,讀這一篇就好了!

ui設(shè)計分享達人

圖標在當今不論是物理世界還是數(shù)字世界中都廣泛存在且十分重要,在交互界面中其重要性尤其值得強調(diào)。圖標是用戶與產(chǎn)品之間最簡單的交流形式之一,有助于提升可用性和直觀性,還能讓界面更加易于使用和理解,幫助用戶快速導(dǎo)航。很多時候,圖標有助于解決相當多復(fù)雜或抽象的概念。借由對圖標“進化“的概括梳理,不僅使我們看待圖標的設(shè)計有更深入地了解,同時也有助于更好地摸清未來圖標設(shè)計的發(fā)展方向。
 
一、早期的圖標設(shè)計
1.1 引子:箭頭圖標從何而來?
箭頭,作為日常生活中最常見和常用的圖標,從城市生活的導(dǎo)航指向,到屏幕界面中的前進返回,到處都能見到各式各樣的箭頭圖標。可以說幾乎每一個現(xiàn)代人都清楚箭頭圖標的含義,對這種無處不在的圖標習(xí)以為常。然而,正是這樣一個對我們來說司空見慣的圖標,卻很少有人知道它究竟是為何如此造型,又是如何一步步演進至今天的模樣的,就讓我們以這個有趣的問題為引子,來一同探尋圖標設(shè)計的進化歷程。
根據(jù)美國印刷史協(xié)會的研究,作為符號和圖標被使用的箭頭歷史只有短短不到四百年,隨著時間的推移,箭頭變得越來越簡化和抽象。而最初具有指向含義的“箭頭”,其實是一只腳印,以這種十分直觀的方式傳達了清晰的信息:“向這個方向前進。”同樣,在早期的教學(xué)插圖和標牌中可以看到手指的圖像,例如伸出的手指指向最近的城鎮(zhèn)方向,以及早期印刷文本和手稿中用于指向關(guān)鍵的段落。
圖標設(shè)計進化論
 
 
這些均是十分具象的早期“箭頭”圖案,使用最直觀的方式表達了含義和作用,正如古代中國的甲骨文和埃及象形文字那樣直白。由此也不難看出,文字和圖標自古以來就有著千絲萬縷的聯(lián)系,時至今日依然如此。
之后箭頭圖標慢慢由具象走向象征性,首次使用是在18世紀的法國論文插圖中發(fā)現(xiàn)的,被描繪為一個帶有羽毛尾巴的弓箭箭矢。同期的德國也發(fā)現(xiàn)了地圖中使用類似圖案表示水流流向的例子。
圖標設(shè)計進化論
 
 
隨后,箭頭變得更加抽象,到了19世紀中后期,箭頭的尾巴被省略,只留下了箭身和頭部的三角。對于瑞士字體設(shè)計大師Adrian Frutiger來說,這是箭頭最基本的特征:“當兩條斜線結(jié)合在一起并形成夾角,方向和運動感的表達隨之產(chǎn)生。”伴隨著工業(yè)革命,機器操作手冊中頻繁出現(xiàn)的箭頭圖標,被廣大民眾所接受。
圖標設(shè)計進化論
 
 
自此,箭頭的抽象形態(tài)被確定,隨后便被廣泛應(yīng)用于各種場景中。時至今日,箭頭圖標的用法和形式也越來越多樣,數(shù)學(xué)符號、商業(yè)標志,App界面中都有它的身影,其所被賦予的引申含義也越加豐富,漸漸地成為了我們今天所普遍熟知的箭頭圖標。
圖標設(shè)計進化論
 
 
20世紀70年代紐約地鐵設(shè)計的新導(dǎo)視系統(tǒng),這套以箭頭、字母、色彩構(gòu)成的現(xiàn)代設(shè)計系統(tǒng)沿用至今,啟發(fā)了包括iOS頁面導(dǎo)航方式在內(nèi)的許多經(jīng)典設(shè)計(可以看到早期的導(dǎo)視也是使用具象的箭作為指向符號)。值得一提的是其中的箭頭細節(jié),箭頭內(nèi)側(cè)的斜線角度與外側(cè)并不是平行的,而是有著4° 的內(nèi)縮,這種細節(jié)的處理正是從字體設(shè)計中借鑒而來,減弱筆畫交匯處的視覺重量感使其看起來是平行且勻稱的,類似的處理在今天的iOS圖標中仍然可以看到。
 
1.2 圖標設(shè)計的經(jīng)典之作
像是箭頭這樣經(jīng)典的圖標設(shè)計還有許多,這里挑選了幾個最具有劃時代意義的設(shè)計,讓我們一起來回顧一下。
1964年東京奧運會,是奧運會第一次在亞洲國家舉辦,考慮到多國語言的信息傳達問題,設(shè)計了第一套運動項目的抽象圖標,來自各個國家的人們通過圖標即可辨別出不同的運動,在之后的1972年德國慕尼黑奧運會上,人物被進一步抽象,類似的人物抽象形象被復(fù)用在例如安全出口、洗手間等經(jīng)典圖標上。
圖標設(shè)計進化論
 
 
20世紀80年代,數(shù)字時代的圖標開始出現(xiàn),作為GUI的關(guān)鍵組成,圖標的設(shè)計同樣是為了更加直觀地傳達信息,讓更多人可以輕易理解并接觸到個人電腦,消除傳統(tǒng)代碼界面造成的隔閡感與距離感,經(jīng)典的Macintosh笑臉、Command、播放、USB等圖標陸續(xù)被發(fā)明。
圖標設(shè)計進化論
 
 
Happy Mac
經(jīng)典Mac電腦開機時呈現(xiàn)的圖標,以及最新macOS中的訪達,通過把個人電腦擬人為一個笑臉,給用戶傳達了十分友好的第一印象,打破了人們對于電腦和機器先天地抵觸心理,讓技術(shù)的魅力被更多的人所感受。
Command
蘋果電腦鍵盤上的Command修飾鍵最初只是一個Apple Logo,菜單中也會展示一系列以Apple Logo指代地快捷鍵組合,這樣在界面中濫用logo顯得十分不優(yōu)雅,因此設(shè)計師從眾多抽象圖標中選擇了這個沒有明確含義地微妙圖標,在快捷鍵的描述上顯得十分貼切。據(jù)稱其源于北歐地區(qū)露營地的標識。
播放
播放圖標在20世紀60年代中期首次出現(xiàn)在磁帶上,有時還有一個額外的三角形來表示快進或倒帶,三角形指向磁帶卷曲的方向。播放/暫停符號現(xiàn)在可以在任何能夠播放媒體的設(shè)備上找到,并普遍用于媒體的控制和表示。
USB
USB圖標靈感來自于三叉戟。每個點的末端都被一個圓形、正方形和三角形所取代,旨在代表可以使用這種通用接口連接的許多不同的外圍設(shè)備。
從這些經(jīng)典案例不難看出,圖標具備了文字所難以傳達的直觀性和親和力,不論在是物理世界還是數(shù)字世界中,圖標的設(shè)計都發(fā)揮了舉足輕重的作用。
 
二、UI中的圖標設(shè)計
今天的文字是從現(xiàn)實世界中對事物的抽象描述演變而來的,但我們?nèi)匀幻刻焓褂贸橄蟮膱D標來輔助進行溝通。對于數(shù)字環(huán)境中的用戶界面來說尤其如此。例如,眾所周知的“×”圖標代表關(guān)閉或刪除用戶在屏幕上看到的一部分內(nèi)容,以及在搜索引擎或其他地方上看到了用作“搜索”圖標的放大鏡。
2.1 什么是好的圖標?
圖標以一種通用且簡單的方式傳達信息,無論文化或地理背景如何,每個人都可以理解。那么,怎樣的標志才算是好標志或壞標志呢?
我們需要更深入地研究科學(xué)才能更好地理解。符號科學(xué)的研究被稱為符號學(xué)。它涵蓋了從豎起大拇指到微笑,甚至表情符號的所有含義。這門科學(xué)的著名代表人物查爾斯·桑德斯·皮爾士提出了一個三角形模型,說明了符號之所以成為符號的原因(見下圖)。
圖標設(shè)計進化論
 
 
● 表征物:符號的代表形式;
● 解釋者:觀察者心中對符號的解釋理解;
● 對象:符號所指的對象;
這三個要素相互關(guān)聯(lián),形成了理解或溝通中的基本結(jié)構(gòu)。符號并非直接與其代表的對象相連,而是通過解釋者也就是使用符號的人來建立連接。這個模型強調(diào)了解釋和主觀性在符號學(xué)中的重要性。
如果我們以箭頭圖標為例,代表物是箭頭符號本身。它是一種視覺標志,通常用來指示方向或引導(dǎo)注意力。箭頭的形狀、方向和上下文決定了它如何被解釋。對象是箭頭符號所指向的事物。這可以是實際的物理方向,如“向北”、“返回上一級”等,或者可以是比喻意義上的方向,如指引下一步行動的方向。解釋者是觀察者對箭頭符號的理解或解讀。例如,當一個人看到一條指向右邊的箭頭時,他們可能會理解為需要向右轉(zhuǎn),或者他們應(yīng)該將注意力集中在右側(cè)。
所以當我們設(shè)計圖標時,需要著重考量這三者之間的關(guān)系。也可以理解為,如果在某個位置看到某個圖標,我們期望用戶如何理解并進行操作。
此外,蘋果電腦經(jīng)典圖標的設(shè)計師Susan Kare也有自己一直堅持的設(shè)計原則:
● 簡單、清晰和美觀
● 重視上下文和隱喻
● 易于理解、便于記憶
● 確保一致性和可讀性
● 人性化
因此,圖標的偉大之處在于可以跨越多種語言,成為一種人類通用的視覺表達。 
 
2.2 構(gòu)建數(shù)字圖標設(shè)計系統(tǒng)
圍繞著技術(shù)的演進,圖標的設(shè)計有了前所未有的進化,同字體設(shè)計產(chǎn)生了更多千絲萬縷的聯(lián)系。其中最具代表性的便是Apple和Google這兩家軟件巨頭所開發(fā)的SF Symbols和Material Symbol圖標系統(tǒng),分別作為iOS和android的系統(tǒng)圖標應(yīng)用,它們也有著各自的進化歷程。與此同時,圖標也不僅僅再是單一的固定的圖標,而是像字體一樣的一套圖標系統(tǒng),包含可以進行自定義調(diào)節(jié)的風(fēng)格、樣式、粗細、甚至可以不斷進行迭代和更新。完善易用的圖標系統(tǒng)與圖標本身的設(shè)計同樣至關(guān)重要。
 
形態(tài)與色彩
作為用戶體驗十分優(yōu)秀的Apple,其圖標系統(tǒng)必然具有眾多可圈可點之處。最初,SF Symbols提供的是單色圖標,這些圖標在界面中奠定了一致性,同時也給人一種熟悉感。在2021年,SF Symbols變得更加靈活多樣,提供了多種渲染模式:分層模式、調(diào)色版模式、多色模式。2022年引入了可變顏色,使得圖標能傳達不同的強度水平或是時間變化,讓圖標更加富有表現(xiàn)力。兼具功能性和視覺魅力。2023年,更進一步地增加了動畫屬性。為界面注入了更多動感和活力,圖標數(shù)量超過5000個。
圖標設(shè)計進化論
 
 
SF Symbols使用iconfont技術(shù)來實現(xiàn)與系統(tǒng)字體的和諧搭配,支持粗細的無極調(diào)節(jié),與文字的自動對齊排版,同時還支持同一個圖標的不同狀態(tài)變體,例如音量圖標的變化和用戶圖標的多種組合,猶如漢字的偏旁部首組合一樣靈活,在設(shè)計和開發(fā)實現(xiàn)時都非常高效便利。
圖標設(shè)計進化論
 
 
在同一個字號下,擁有大中小三種圖標的預(yù)設(shè)尺寸,使得在不同尺寸的控件中,盡管字號都是17pt,但都可以調(diào)用合適的圖標,三種尺寸也并非單純的縮放,而是針對每個尺寸的粗細和內(nèi)部空間單獨進行微調(diào),從而實現(xiàn)每個尺寸的圖標視覺感受上都能和諧匹配文字內(nèi)容。
圖標設(shè)計進化論
 
 
Material Symbols作為谷歌開發(fā)設(shè)計的一套圖標系統(tǒng),同樣具有許多優(yōu)秀的特質(zhì)。除了與SF Symbols同樣的可變粗細、尺寸視覺自適應(yīng)等特性外,還具有SF Symbols所不具備的一些優(yōu)勢。
圖標設(shè)計進化論
 
 
圖標風(fēng)格上,Material Symbols支持三種不同的描邊風(fēng)格,Outlined、Rounded和Sharp,在線條轉(zhuǎn)折和頭尾的方圓處理上各有不同。支持針對不同粗細的精細調(diào)節(jié),這是由于在淺色模式和深色模式下,圖標的粗細感受會有些許不同,而通過Grade這一特性,則可以在同樣的粗細參數(shù)下進一步微調(diào)圖標的視覺觀感,從而達到更加和諧統(tǒng)一的呈現(xiàn)。
圖標設(shè)計進化論
 
 
圖標設(shè)計進化論
 
 
以往絕大多數(shù)圖標都是單色形式,但是這并不能滿足所有場景的使用,例如一些特定的強調(diào)色,以及天氣狀況圖標等。SF Symbols在色彩上,圖標本身可以被劃分為多個層級,每個層級都支持單獨配置色彩參數(shù),從而實現(xiàn)了一個圖標,多種色彩模式的效果,在不同的狀態(tài)可以通過色彩的變化進一步豐富圖標的表現(xiàn)力。有些情況下,圖標的色彩并不是固定的,也需要可以代表時間和過程的變化,例如Wi-Fi強度和信號等,這些圖標的微動在過往的開發(fā)流程中可能需要單獨的動畫來實現(xiàn),而在SF Symbols中只需要對圖標進行預(yù)先設(shè)置,便可以支持這種動畫效果,而無需再輸出動畫資源。
圖標設(shè)計進化論
 
 
在手機QQ中的圖標設(shè)計中,同樣遵循了上述的設(shè)計原則,具備簡潔現(xiàn)代的設(shè)計風(fēng)格,與界面中的其他元素相得益彰,共同構(gòu)成了Q語言的完整設(shè)計系統(tǒng)。
在群應(yīng)用圖標的場景中,對于圖標做了更加豐富生動的表現(xiàn)處理。在默認模式中,對圖標進行基于QQ色彩體系的色相分層處理,既強化了不同圖標之間的差異識別,同時多層次的色彩豐富了圖標的視覺感受;簡潔模式的圖標則更傾向于系統(tǒng)圖標外圓內(nèi)方的線性風(fēng)格,同時強化了圖標比例和圖形輪廓,在簡化造型的基礎(chǔ)上保證了識別度。
動態(tài)與變化
圖標設(shè)計進化論
 
 
在手Q的Tab圖標上,切換選中時加入了的生動的圖標動畫,通過品牌色的面性圖標強化了選中效果,恰到好處的微動畫不會過于搶眼,同時又為QQ注入了年輕活力的視覺感受。
圖標設(shè)計進化論
 
 
在最新的SF Symbols 5版本中,引入了更加豐富的動畫效果,同樣也是通過預(yù)先將圖標設(shè)置圖層來實現(xiàn)預(yù)設(shè)的六種動畫(出現(xiàn)、消失、彈跳、縮放、閃爍、交替),不需要單獨的圖標動畫資源。最重要的是,這些圖標動畫在所有的尺寸、粗細、和色彩渲染模式下,都是通用的,這讓其可用性大大增加,避免了例如淺色深色模式下都需要單獨的動畫資源的問題。
動畫中有個細節(jié),例如上圖第一行中間的haha圖標,動畫是分了多層進行的,層與層之間的遮擋關(guān)系和線條分隔并不會因為元素的縮放而變化,這是因為在SF Symbols的圖標動畫配置中,支持對布爾運算的圖層進行配置,通過多圖層的動畫實現(xiàn)了這種復(fù)雜的動畫效果,十分巧妙。
 
小結(jié)
 
以上的關(guān)于圖標設(shè)計系統(tǒng)的內(nèi)容受限于篇幅并沒有詳細介紹其中的實現(xiàn)原理與設(shè)計細節(jié),感興趣的讀者可以到以下幾個官方的視頻鏈接中詳細了解,相信看完之后便會領(lǐng)會到圖標設(shè)計系統(tǒng)與先進的技術(shù)實現(xiàn)結(jié)合的魅力所在。可以說在UI圖標系統(tǒng)中,已經(jīng)不僅僅是圖標本身的設(shè)計,而是關(guān)聯(lián)到系統(tǒng)字體、技術(shù)實現(xiàn)、動態(tài)交互等多個領(lǐng)域的復(fù)雜系統(tǒng),通過多方的共同協(xié)作,最終才能實現(xiàn)可以不斷迭代、使用便利的圖標工具箱。
 
三、圖標設(shè)計的未來
伴隨著互聯(lián)網(wǎng)、個人電腦和手機的普及,以及例如奧運會這樣的全球盛事的舉辦,世界范圍內(nèi)的文化交流和融合變得越來越常見和深入,圖標與文字一樣構(gòu)成了不可或缺的溝通橋梁,在這樣的背景下,圖標的設(shè)計更加需要去適應(yīng)這樣多元的環(huán)境,利用先進的技術(shù)進行視覺表現(xiàn),使用AI去探索更多的可能性。
3.1 更多元的應(yīng)用
圖標設(shè)計進化論
 
 
在SF Symbols中,一些涉及到書寫習(xí)慣的圖標會擁有幾個不同的語言版本,例如書本這個圖標,有的是右開本有的是左開本,這便是考慮到在一些國家和地區(qū)的文化習(xí)慣不同。以及不分圖標上的文字也擁有包括英語、漢語、阿拉伯語等等好幾個變體。系統(tǒng)調(diào)用這些圖標時便會根據(jù)用戶所設(shè)置的語言和地區(qū),自動變化圖標的呈現(xiàn),讓開發(fā)者無需去單獨適配,達到高效開發(fā)的同時也提升了多語言的用戶體驗。
圖標設(shè)計進化論
 
 
在emoji中我們也可以看到,一些表情也擁有多個膚色版本,黃色為經(jīng)典的默認樣式,其他則適配了從淺到深的五種膚色,讓所有人都可以擁有屬于自己的emoji膚色,這同樣也是出于對不同種族人們的尊重和平等。
圖標設(shè)計進化論
 
 
性別的平等在當代也得到了廣泛的重視,如iOS系統(tǒng)通訊錄的圖標從早期的傾向于男性的頭像,到如今的中性表達;以及Twiter設(shè)計默認頭像時也著重優(yōu)化了頭像的樣式,在肩部和頭部的形態(tài)上去除性別的傾向,從而實現(xiàn)可以以一種抽象的頭像圖標去指代所有人。
 
3.2 更生動的表現(xiàn)
圖標設(shè)計進化論
 
 
上文提到的奧運會運動項目圖標,某種程度上也見證著世界范圍內(nèi)圖標設(shè)計與技術(shù)發(fā)展的進程,在2021年東京奧運會上首次出現(xiàn)的動態(tài)體育圖標,為傳統(tǒng)的平面圖標注入了動感和立體感,更加適用于當代的數(shù)字媒體傳播,之后的北京冬奧會也為運動項目加入了動態(tài)的呈現(xiàn),并且還融入了中國篆刻的視覺語言,將傳統(tǒng)與現(xiàn)代巧妙地融合在了一起。
圖標設(shè)計進化論
 
 
圖標設(shè)計進化論
 
 
在數(shù)字世界中,更少不了圖標向著更加生動的表現(xiàn)上進化。從emoji到animoji和memoji,平面的表情圖標現(xiàn)在可以結(jié)合用戶的表情,實時地動態(tài)立體呈現(xiàn)。而最近發(fā)布的Vision Pro,將我們所熟悉的各種app圖標在空間中更加生動地還原出來,加入了分層的概念,讓圖標可以隨著人眼的目光變化,實現(xiàn)更加真實和靈動的感受,仿佛原先的數(shù)字世界中的各種app出現(xiàn)在了現(xiàn)實世界中。
 
3.3 更自由的表達
圖標設(shè)計進化論
 
 
或許在不遠的未來,圖標設(shè)計不再是只屬于設(shè)計師的工作,隨著技術(shù)的進步,越來越多的普通人也可以借助各種智能工具,體驗到圖標設(shè)計的趣味。比如谷歌所推出的Emoji Kitchen,可以讓用戶自由地組合Emoji,創(chuàng)作出自己想要的表情圖標。
圖標設(shè)計進化論
 
 
以及AI技術(shù)的發(fā)展,也讓人們可以僅僅借助一段文字的描述,就能幾乎立刻得到由AI生成的效果絢麗的圖標。而AI技術(shù)才剛剛起步,現(xiàn)在甚至隔幾個月就會有一個顯著的進步和能力提升,可以預(yù)見在不久的將來,這項技術(shù)將極大的降低圖標設(shè)計的門檻,讓更多的人加入到設(shè)計與創(chuàng)作的隊伍中。
 
結(jié)語
圖標設(shè)計進化論
 
 
從腳印到箭頭,從手繪到生成,從單一的圖標到復(fù)雜的系統(tǒng),圖標設(shè)計的進化也同樣是文明和技術(shù)的進化。數(shù)字技術(shù)的發(fā)展進一步地加速了這個過程,屏幕的分辨率也從像素馬賽克演進到了如今幾乎無法區(qū)分虛擬和現(xiàn)實,遠超人類自身進化的速度。但不論是在復(fù)雜的現(xiàn)實世界或是夢幻的數(shù)字世界,一個簡單清晰的箭頭圖標都將可以成為導(dǎo)航,為我們指引目標和方向。
 
參考資料
 
History of the Arrow - American Printing History Association
https://printinghistory.org/arrow/
A brief history of Iconography
https://pdtv.medium.com/a-brief-history-of-iconography-c20d8a0cc2c4
1970 New York City Transit Authority Graphics Standards Manual
https://standardsmanual.com/products/nyctacompactedition
1964到2020,從奧運會體育標識的更迭中捕捉設(shè)計原點
https://zhuanlan.zhihu.com/p/113008671
圖標設(shè)計知往鑒今:致敬 Apple 初代設(shè)計師 Susan Kare - 少數(shù)派
https://sspai.com/post/82739
What’s new in SF Symbols 5 - WWDC23 - Videos - Apple Developer
https://developer.apple.com/videos/play/wwdc2023/10197/
Introducing Material Symbols - Material Design
https://material.io/blog/introducing-symbols
Rethinking our default profile photo
https://blog.twitter.com/en_us/topics/product/2017/rethinking-our-default-profile-photo
中國篆刻“動起來”了!這些冬奧體育圖標不簡單_新聞_央視網(wǎng)(cctv.com)
http://m.news.cctv.com/2020/12/31/ARTIRAzLnmbbAzRcb0iEGr27201231.shtml
Design for spatial user interfaces - WWDC23 - Videos - Apple Developer
https://developer.apple.com/videos/play/wwdc2023/10076/
Google Emoji Kitchen
https://www.google.com/search?client=safari&rls=en&q=google+emoji+kitchen&ie=UTF-8&oe=UTF-8
AI Emojis
https://emoji.fly.dev
CandyIcons
https://www.candyicons.com


作者:騰訊ISUX
鏈接:https://www.zcool.com.cn/article/ZMTYxNjgwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 
 

設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”

ui設(shè)計分享達人

近兩年出現(xiàn)了不少“解放設(shè)計師雙手”的設(shè)計工具、AI工具,我們似乎能很快輸出N種流程方案、N種布局方案、N種UI風(fēng)格等等。問題是:這樣窮舉設(shè)計方案的工作方式當真有效嗎?
 
請警惕“莫得感情”的出圖機器!具備競爭力的設(shè)計師必須有自主意識,包括清晰的思維邏輯、果敢的決策力。而體現(xiàn)這一意識和能力的重要環(huán)節(jié)之一,就是產(chǎn)品生產(chǎn)鏈路中的首個環(huán)節(jié)“需求分析”。
 
需求分析并不僅僅是產(chǎn)品經(jīng)理的事兒。從共同目標的角度來看,互聯(lián)網(wǎng)企業(yè)在崗位劃分上區(qū)分了產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)工程師等,是順應(yīng)人的精力時間有限、術(shù)業(yè)有專攻的自然規(guī)律,但是從業(yè)務(wù)目標來說,每一個崗位都應(yīng)該對“最佳用戶體驗和最大化商業(yè)利益的平衡”負責,確保這艘船在正確的航道上。所以,如果每個“船員”都具備主人翁意識和需求分析的能力,航程必然更健康穩(wěn)健。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
對設(shè)計師來說,需求分析不僅僅是“這個功能要不要做”的問題,也會影響后續(xù)的設(shè)計方案決策。每一次的功能增刪或調(diào)整,都是在改變用戶接收產(chǎn)品界面信息的整體效用,那么每一個產(chǎn)品需求的分析都要評估這個功能在整個信息架構(gòu)、用戶體驗鏈路的位置孰輕孰重,也就必然會影響你的設(shè)計方案決策。
 
產(chǎn)品需求從哪里來?
 
“有用戶反饋說……"
“國慶節(jié)快到了,我們策劃了一個活動……”
“這個付費轉(zhuǎn)化率很低,達不到預(yù)期。我們想……”
……
產(chǎn)品需求的來源多種多樣,可能來自產(chǎn)品經(jīng)理、用戶反饋、產(chǎn)品數(shù)據(jù)、市場風(fēng)向、技術(shù)革新等等。當然,還有來自作為設(shè)計師的”我自己“。當我靈光一閃想到一個很炫酷的小創(chuàng)意,情感上免不了自以為是地想”咱們產(chǎn)品這么不做這個“——這個時候我也會用需求分析的框架來質(zhì)問自己:
“值不值得做(價值評估)”、“應(yīng)當先做什么(優(yōu)先級)”、“用戶需求要滿足到什么程度(核心體驗鏈路)”這三個問題。
 
做需求分析,要想什么?
我們常說產(chǎn)品需求要“洞察用戶真正的需求”,要明確“用戶價值”。剛?cè)胄械臅r候,我們都會點點頭,心想“對哦”。可是什么是“真正的”、什么是“假的”、什么是“價值”?說實話,這些概念都挺虛的。只有當理論落到某個用戶場景去分析,我們才能理解其深意。
 
先說點虛的,什么是“價值”?
 
價值是多維度的概念,在不同的學(xué)科中都會在“價值”前加一個表范圍的定語,比如“勞動價值”、“經(jīng)濟價值”、”社會價值”。隨著互聯(lián)網(wǎng)的發(fā)展,我們出現(xiàn)了兩個重要的新詞“用戶價值”和“產(chǎn)品價值”。
 
對于用戶而言,他們購買或使用產(chǎn)品或服務(wù)是為了滿足特定的需求,比如提升效率、獲得愉悅、獲取經(jīng)濟收益等。那么我們說這個產(chǎn)品具有“用戶價值”。
 
所以需求分析首先是“評估價值”,而價值評估則拆分為“用戶價值”和“商業(yè)價值”兩部分。即使當下的需求目標是提升用戶規(guī)模(拉新、促活、挽留等),并不需要用戶掏錢,也是為了實現(xiàn)長遠的商業(yè)價值。當然,這僅適用于以盈利為目標的企業(yè),非盈利組織還有“社會影響力”的目標,不在本文討論范圍內(nèi)。
 
下面我們進一步拆解價值評估:“用戶價值評估”和“商業(yè)價值評估”。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
1、用戶價值評估
解決哪些用戶在什么場景下的什么問題?
 
這個問題越具體到“人”,就越容易分析。如果需求來自于用戶反饋,我們溯源到具體的用戶。
 
有一個朋友出去創(chuàng)業(yè),想做一個“找飯搭子”的同城陌生人交友軟件。他說,偶爾看到微信朋友圈有人召喚“有沒有人一起探店”的動態(tài),去網(wǎng)絡(luò)社區(qū)搜索“飯搭子”、“同城探店”等詞匯也能看到不少帖子。而且探店吃飯這件事直接關(guān)聯(lián)消費,商業(yè)模式很清晰。他想通過他的產(chǎn)品解決“用戶|在探店場景中|無法及時找到飯友”的問題。——“找飯友”是一個行為動作,沒有切入到用戶的內(nèi)在需求。
 
定義用戶價值不能只停留在“行為上”,可以嘗試找到目標用戶做定性訪談,進一步深挖問題。比如,我們想進一步把問題下鉆,可能會問到這些問題:
 
● 用戶為什么要找飯友?不能一個人探店?
● 用戶為什么找不到“飯友”?
● ……
 
我們進一步細化“用戶-場景-問題”的價值定義:
解決 一線城市年輕用戶(尤其是剛遷移新城市的年輕人)|通過約伴探店|解決 同好交友(社群需求)、 “量大”餐館均攤成本(省錢需求)、獲得更愉悅的吃飯氛圍 (情緒需求)的問題。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
那有了這個用戶價值定義是不是就可以順利立項呢?——看這個文章的篇幅,你只讀了不到一半,當然還有更多需要推敲的問題,請繼續(xù)閱讀。
 
這個需求接觸不到真實用戶怎么辦?
 
有時候我們的需求來源可能是市場風(fēng)向、技術(shù)革新帶來的未知變化。我們無法直觀地獲知“具體的用戶是誰”、“TA在什么場景遇到什么問題”。
——這種情況,我們則需要反向思考:這個需求如果做了,獲益的用戶是誰?滿足了他們在什么場景下的需求?如果不做,用戶會不會因此棄用我們的產(chǎn)品?可能流失的用戶,大盤占比可能是多少?是不是高價值用戶?
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
用上面的思路去層層推敲,可能會否定原來的產(chǎn)品策劃,可能會挖掘出新的需求,可能會改變需求的優(yōu)先級。
 
值得一提的是,有時候經(jīng)過層層推敲,最終得到的決策可能會與市面上的競品有所雷同。也就是我們經(jīng)常會問的一個問題:為什么A產(chǎn)品已經(jīng)做了這件事,B產(chǎn)品還要做同樣的事情?
 
有的功能或服務(wù)是順應(yīng)用戶需求而產(chǎn)生的,如果有所缺失,就無法達成用戶目標。比如短視頻產(chǎn)品都會做點贊和評論,因為視頻創(chuàng)作者和消費者分別有“獲得認可”的被尊重訴求、”表達意見“的掌控欲等心理需要。而產(chǎn)品則需要這些點贊和評論數(shù)據(jù)去評判內(nèi)容熱度和豐富個性化標簽,以優(yōu)化內(nèi)容的推送機制。很多同一賽道的產(chǎn)品會有雷同的功能,雖然常常被調(diào)侃為”相互抄“,但是真正做需求分析才能看清“什么是無腦抄”、“什么是必然如此”。
 
2、商業(yè)價值評估
用戶會為你這個新產(chǎn)品/新功能買單嗎?
 
我們找到一個有用的需求點是簡單的,因為需求的來源真的太多太多,但是當我們發(fā)現(xiàn),用戶不一定會為我們的新產(chǎn)品或新功能買單。
請注意,這里的“買單”不限于用戶掏錢,還包括用戶決定使用哪個產(chǎn)品的決策成本、用戶愿意花費在某個產(chǎn)品的時間和學(xué)習(xí)成本等。
 
那我們怎么預(yù)判用戶會不會買單呢?或者,如何提升用戶的買單意愿呢?
 
如前面所言,“用戶價值”就是通過你的產(chǎn)品獲得了預(yù)期的效用。效用可以是省了時間、省了錢、省了學(xué)習(xí)成本、獲得情緒價值、獲得安全感等。而用戶對效用的感知,往往是對比過去經(jīng)驗的解決方案得到的。所以,我們首先要看用戶之前是怎么解決這個問題的,然后是用戶遷移到新的解決方案(使用新產(chǎn)品或新功能)要付出多少成本。
 
繼續(xù)用上面“飯搭子”的案例:
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
——我們從這個案例可以看到,當我們做成本對比,不能簡單地說新舊方案哪個成本更高。用戶付出的“成本”是多維度,包括“時間成本”、“經(jīng)濟成本”、“安全風(fēng)險”等維度。
“飯搭子”這個新方案,對比舊方案,并沒有沒有壓倒性的成本優(yōu)勢。我們雖然可以通過產(chǎn)品設(shè)計和運營降低當中的用戶成本,比如通過用戶歷史參與數(shù)據(jù)(參與飯局次數(shù)、飯友評價、真實職業(yè)信息等)提供用戶靠譜度評分,以降低安全成本。但消除用戶成本,需要花費較大的資源投入,我們可以預(yù)判這不是一個高ROI的產(chǎn)品項目。
有趣的是,人不是完全理性的。有的場景,只要其中一項成本感知強烈,人就可能選擇棄用這個產(chǎn)品。比如“飯搭子”這個案例中,女性用戶對安全風(fēng)險更為敏感,女性用戶更不愿意嘗試陌生社區(qū)。
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
如果我做的是一個非常創(chuàng)新的項目,真的沒辦法找到“舊方案”做對比呢?或者我無法獲知舊方案的用戶成本呢?——我們依然建議盡可能地接近用戶、收集足夠多的信息,以輔助判斷。如果依然非常不明朗,可以通過MVP的方案去預(yù)估。關(guān)于MVP實踐的書籍和網(wǎng)絡(luò)資料很多,大家可以自行搜索。
 
多少用戶會買單呢?
? 確認了這個需求有用戶價值
? 確認了有XX需求的用戶很可能會買單
——接下來可以開干了嗎?
 
不夠,還需要
預(yù)判收入規(guī)模
。因為:收入=客單價x支付用戶數(shù)=客單價x訪問用戶數(shù)x支付轉(zhuǎn)化率。
這個等式適用于一般的to C產(chǎn)品,不同的產(chǎn)品可能有差異,比如視頻用戶的使用時長可能與產(chǎn)品收入掛鉤,那么用戶時長也需要作為一個變量放入到你的產(chǎn)品收入公式中。
當我們要開發(fā)一個新的付費互動功能,我們需要做數(shù)據(jù)預(yù)估:這個互動功能放在這個位置,每天的曝光可能是多少?按照此頁面同樣位置的點擊轉(zhuǎn)化和其他功能的付費轉(zhuǎn)化,能否預(yù)估這個新功能的收入?這個收入規(guī)模值得投入X天的開發(fā)人力嗎?
如果這個需求的直接目標不是收入,而是獲取更大用戶規(guī)模。我們也同樣用“等式”這個思考方式來去做數(shù)據(jù)估算,只是把“收入”理解為用戶量或其他目標數(shù)值、而非金錢收入。
當然,通過歷史數(shù)據(jù)估算收入是比較理想的情況。如果身處一個數(shù)據(jù)體系建設(shè)落后的企業(yè)中,我無法獲取足夠的數(shù)據(jù)支持,怎么辦呢?或者,這是一個絕對的革新體驗(比如AI輔助內(nèi)容創(chuàng)作),我無法用過往的數(shù)據(jù)或經(jīng)驗評估收入規(guī)模,怎么辦呢?
那么,至少解答“解決哪些用戶在什么場景下的什么問題”,來看看這個需求的用戶場景覆蓋是否足夠廣;再權(quán)衡為了獲得這個新產(chǎn)品/新功能帶來的新體驗,用戶要投入哪些成本,以此做需求的排除法——跟創(chuàng)業(yè)一樣,做產(chǎn)品本身就存在了諸多不確定性,并非所有的決策都能通過公式去論證。
我們只能在有限條件下盡量選擇做正確的事
,排除那些大概率不能成功的事。然后嘗試MVP,或直接交給市場和時間驗證。
此外,如果設(shè)計師想作為初創(chuàng)成員加入新產(chǎn)品,還要跑通可持續(xù)的盈利模式。這里又是一大塊學(xué)問,比如了解這個企業(yè)做這件事的資源優(yōu)勢等等,本文作者的知識域和本文篇幅都有限,建議感興趣的朋友翻看商業(yè)分析相關(guān)書籍。但是新舊方案的用戶成本對比、收入公式的拆解,依然是重要且可行的商業(yè)價值視角。
 
3、優(yōu)先級
“優(yōu)先級”可以分為兩層理解,一層是產(chǎn)品需求之間的優(yōu)先級排序,另一層則是功能范圍層的優(yōu)先級,也就是我們聊需求經(jīng)常會問的問題:我們明確了這個產(chǎn)品需求當下就要啟動,但是當前要做到什么程度呢?
前者,對比不同需求的產(chǎn)品價值大小,再結(jié)合開發(fā)實現(xiàn)成本和耗時、是否需要追趕某個時間節(jié)點等,產(chǎn)品需求之間優(yōu)先級不難得出。而設(shè)計師更多要思考的是后者。
舉個例子:開學(xué)季馬上要到了,產(chǎn)品經(jīng)理了解到學(xué)校有類似“語文朗誦作業(yè)打卡”的作業(yè)打卡訴求。我們希望搶時間窗去滿足這個大規(guī)模的家校場景,即“如何最快地滿足每日/周重復(fù)的信息收集需求”?作業(yè)打卡場景可否
延伸
到其他打卡場景,不同的打卡有何共性或差異?
其中“最快”暗含的意思是“
這個功能至少要做到什么程度才能滿足最核心的用戶需求
”。這個時候,我們拉了一個表格,快速梳理不同用戶角色(比如區(qū)分“打卡創(chuàng)建者”和“參與打卡者”)的體驗鏈路,再決策
各個體驗環(huán)節(jié)的功能復(fù)雜度要到哪里。
從全盤中抽取出體驗閉環(huán)的最小集
從全盤中抽取出體驗閉環(huán)的最小集
 
不要忽視商業(yè)競爭中的時間差,因為搶先占領(lǐng)市場的產(chǎn)品實際上是提升用戶遷移到競爭對手的成本。過去我們提倡匠人精神,不放過每一個細節(jié)。而當前激烈的市場競爭環(huán)境下,“有的放矢”比“摳細節(jié)”更加重要。
 
小結(jié)
我們歸納一下需求分析的思路,多問問這些問題:
設(shè)計師如何做產(chǎn)品需求分析:先聊聊兩個“價值”
 
 
需求分析是比較考驗全局觀、邏輯性、數(shù)理分析和共情能力的。工作中可以通過拉表格、思維導(dǎo)圖、白板等工具梳理思路。如果你喜歡寫文字,那就用寫的方式。總之,切忌接到產(chǎn)品需求就動手出界面方案。


作者:騰訊ISUX
鏈接:https://www.zcool.com.cn/article/ZMTYxODM0NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

 

層級思維解構(gòu)圖標分類體系

ui設(shè)計分享達人

前言
近年來,Ul設(shè)計行業(yè)蓬勃發(fā)展,圖標設(shè)計風(fēng)格更是呈現(xiàn)出多元化的特點,各種新穎、創(chuàng)意的設(shè)計風(fēng)格層出不窮。圖標樣式早已從潺潺溪水變成汪洋大海,通過系統(tǒng)歸納和整理各類常用的面性圖標設(shè)計類型與風(fēng)格,我們構(gòu)建了一套體系化的記憶框架,使得在日常工作中能夠迅速且準確地作出圖標樣式的決策,從而有效提升設(shè)計效率與質(zhì)量。本文章主要討論近年UI界面中會經(jīng)常使用的圖標風(fēng)格,線性圖標樣式組成一般過于簡單,在此不做討論。
 
本文在探討圖標的分類思維時,巧妙地運用了層級理念,
并特別關(guān)注層級是否穿透這一關(guān)鍵因素來區(qū)分不同類型的圖標。這種分類思維不僅使圖標的辨識變得更為便捷,還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法,我們得以更清晰地理解圖標的本質(zhì)與特點,進一步提升我們對常用圖標的認知水平和應(yīng)用能力。
 
無底板圖標
單層級
單色扁平 
整體風(fēng)格簡潔大方。由于沒有其他質(zhì)感元素的加入,所以對圖形要求更加需要簡約而精致
層級思維解構(gòu)圖標分類體系
 
 
雙色扁平 
主副圖形對比色搭配,整體風(fēng)格既簡約又具備顏色豐富度
層級思維解構(gòu)圖標分類體系
 
 
微質(zhì)感 
·漸變方向從上到下,這種漸變方向較為傳統(tǒng),呈現(xiàn)輕輕鼓起的圓潤形態(tài)
層級思維解構(gòu)圖標分類體系
 
 
·漸變方向從下到上,為圖標賦予了輕盈而靈動的視覺感受
層級思維解構(gòu)圖標分類體系
 
 
·漸變方向從左到右,融合了漸變圓弧形成的高光形狀,形式較新穎
層級思維解構(gòu)圖標分類體系
 
 
多層級
多層級圖標的設(shè)計,主要依據(jù)其是否具備穿透特性進行劃分,即不穿透與穿透兩大維度。在實際操作中,多數(shù)情況下,我們會借助不同層級的設(shè)計手法來塑造圖標的層次感,而這其中往往融入了微妙的質(zhì)感處理。因此,我們并不以扁平與質(zhì)感作為多層級圖標的主要劃分標準。
層級不穿透
·色彩搭配鄰近色
層級思維解構(gòu)圖標分類體系
 
 
·色彩搭配鄰近色,漸變方向-左到右
層級思維解構(gòu)圖標分類體系
 
 
·色彩搭配鄰近色,和諧統(tǒng)一,主圖形內(nèi)發(fā)光質(zhì)感,邊緣有1像素高光和副圖形隔開
層級思維解構(gòu)圖標分類體系
 
 
 
·色彩搭配鄰近色,采用強質(zhì)感,多層級之間巧妙運用投影進行區(qū)分,使得每一層都清晰分明,互相映襯。主圖形的質(zhì)感通過漸變、內(nèi)陰影或內(nèi)發(fā)光等手法進行精細刻畫,增強了視覺沖擊力。
層級思維解構(gòu)圖標分類體系
 
 
·采用強質(zhì)感,多層級,更貼近真實物體的質(zhì)感和光影效果。用素描的三大調(diào)五大面思維,讓光影細節(jié)拉滿,通常需要手動加光,無法單純用軟件自帶漸變
層級思維解構(gòu)圖標分類體系
 
 
層級穿透
主圖形透出底部副圖形形狀,副圖形被遮擋形狀模糊處理,主圖形通常邊緣有1像素高光,呈現(xiàn)出精致而獨特的分隔效果。
·鄰近色穿透,底部圖形通常為暗色
層級思維解構(gòu)圖標分類體系
 
 
層級思維解構(gòu)圖標分類體系
 
 
層級思維解構(gòu)圖標分類體系
 
 
·不同色系穿透
層級思維解構(gòu)圖標分類體系
 
 
層級思維解構(gòu)圖標分類體系
 
 
有底板圖標
為減輕記憶壓力,我們直接沿用先前提出的無底板圖標風(fēng)格分類方案。在此基礎(chǔ)上,我們進一步引入一個底板構(gòu)成元素,以此作為額外的區(qū)分點。因此,整個分類維度與異形圖標分類方案保持高度一致,使得用戶能夠更輕松地進行識別和記憶。分類維度不再贅述,直接展示案例
單層級
·底板漸變+投影,漸變方向從下到上,主圖形漸變方向從下到上,和底板統(tǒng)一
層級思維解構(gòu)圖標分類體系
 
 
·底板漸變+投影,漸變方向從下到上,主圖形漸變方向上到下,和底板相反
層級思維解構(gòu)圖標分類體系
 
 
·底板漸變,漸變方向從右下到左上,主圖形漸變方向上到下,并帶有較強的投影
層級思維解構(gòu)圖標分類體系
 
 
多層級
·底板扁平,主圖形和副圖形之間投影區(qū)分
層級思維解構(gòu)圖標分類體系
 
 
·底板扁平,主圖形和副圖形之間投影區(qū)分,副圖形降低透明度
層級思維解構(gòu)圖標分類體系
 
 
·底板漸變,主圖形漸變方向根據(jù)物體造型來定制
層級思維解構(gòu)圖標分類體系
 
 
·底板漸變,主副圖形穿透
層級思維解構(gòu)圖標分類體系
 

作者:香草設(shè)計鋪
鏈接:https://www.zcool.com.cn/article/ZMTYyMDA0OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設(shè)計(91whvog3.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計APP界面設(shè)計圖標定制用戶體驗設(shè)計交互設(shè)計UI咨詢高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢UI設(shè)計服務(wù)公司軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司UI交互設(shè)計公司數(shù)據(jù)可視化設(shè)計公司用戶體驗公司高端網(wǎng)站設(shè)計公司銀行金融軟件UI界面設(shè)計能源及監(jiān)控軟件UI界面設(shè)計氣象行業(yè)UI界面設(shè)計軌道交通界面設(shè)計地理信息系統(tǒng)GIS UI界面設(shè)計航天軍工軟件UI界面設(shè)計醫(yī)療行業(yè)軟件UI界面設(shè)計教育行業(yè)軟件UI界面設(shè)計企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)軟件wpf開發(fā)軟件vue開發(fā)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://91whvog3.cn

存檔