中文字幕在线亚洲h无码,日本强伦姧人妻电影网站一

首頁

202024-6

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

資深UI設(shè)計者

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

評論(0) 瀏覽(658)

202024-6

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

前端達(dá)人

引言

在UI設(shè)計的藝術(shù)領(lǐng)域里，有三個被廣泛運用并備受贊譽的設(shè)計元素，它們被形象地稱為“三大法寶”，

分別是陰影設(shè)計、圓角、透明

，對于初學(xué)者和設(shè)計師們來說，它們仿佛是提升界面層次感和吸引力的魔法棒。尤其是在設(shè)計卡片布局時，很多同學(xué)會不假思索地應(yīng)用系統(tǒng)默認(rèn)的陰影效果，覺得這樣能為設(shè)計增添不少魅力。

然而，真正讓陰影效果發(fā)揮最佳作用的關(guān)鍵，并不在于簡單地添加它，而在于如何根據(jù)不同的設(shè)計場景和需求，精心選擇并設(shè)置陰影。今天，我們就來深入探討一下，如何在UI設(shè)計中巧妙運用陰影這一元素。

陰影的選擇和設(shè)置并非隨心所欲，而是需要綜合考慮多種因素，如光源位置、界面風(fēng)格、元素功能等。通過精細(xì)調(diào)整陰影的大小、透明度、模糊度和顏色等屬性，我們可以讓陰影與整體設(shè)計完美融合，為界面增添立體感和深度，同時避免過度使用導(dǎo)致的視覺混亂。

因此，在設(shè)計過程中，我們需要深入了解陰影的特性和運用技巧，結(jié)合實際需求進(jìn)行靈活調(diào)整。只有這樣，我們才能真正掌握陰影這一UI設(shè)計利器，為作品增添更多的魅力和吸引力。

01. 背景

“藝術(shù)來源于生活又高于生活”設(shè)計領(lǐng)域同樣如此，特別是在我們所關(guān)注的界面設(shè)計中。

界面中的陰影就是讓物體擁有來源于真實物理世界一樣的空間特性

。

在設(shè)計的早期階段，界面元素的設(shè)計往往傾向于盡可能地模擬現(xiàn)實世界的物體，以此拉近用戶與互聯(lián)網(wǎng)產(chǎn)品之間的距離，降低其陌生感。然而，隨著互聯(lián)網(wǎng)的快速發(fā)展和對高效迭代的需求，許多模擬真實世界的細(xì)節(jié)被簡化或優(yōu)化，以突出用戶最為關(guān)心的質(zhì)感、層次感和深度。在這里，陰影元素尤為關(guān)鍵，它成為了構(gòu)建界面深度感的核心。

陰影在界面中的應(yīng)用，使得元素能夠自然地呈現(xiàn)出一種錯落有致的空間布局。通過調(diào)整陰影的大小，我們可以清晰地傳達(dá)出界面中不同元素之間的層級關(guān)系和優(yōu)先級，從而降低了用戶理解界面的難度，幫助他們更快速地識別所需信息。這種設(shè)計方式不僅提升了用戶體驗，也讓界面設(shè)計更加富有層次感和立體感。

02. 陰影的原理

2.1 為什么需要使用陰影

在界面設(shè)計中，當(dāng)用戶進(jìn)行操作時，有時會導(dǎo)致兩個物體因為位置的調(diào)整而發(fā)生表面上的重疊。當(dāng)這種重疊發(fā)生時，如果物體的不透明度或?qū)Ρ榷炔粔蝻@著，用戶往往會遇到識別上的困難，即難以判斷哪一個表面位于另一個表面的前方。

為了解決這個問題，一種有效的方法是清晰界定每個表面的邊緣。通過明確這些邊緣，我們可以有效地減少因重疊而產(chǎn)生的混淆，幫助用戶更輕松地辨識不同表面之間的層次關(guān)系，從而避免這種“尷尬”的重疊現(xiàn)象，提升用戶體驗和界面的清晰度。

從上面可以看到，我們有三種處理方法：

方式一：

陰影顯示表面邊緣、表面重疊和高度。

方式二：

不同的表面顏色顯示表面邊緣和重疊，但不顯示高度。

方式三：

不透明度顯示表面邊緣和重疊，但不顯示高度。

通過對比我們發(fā)現(xiàn)陰影可以以最簡單的方式展示表面之間的高度。

2.2 陰影的影響因素

陰影來源于現(xiàn)實生活反映物體與物體之間距離的物理現(xiàn)象。陰影受

光源的方向

以及

物體與物體之間相對高度

的影響。

在界面中，我們往往通過模擬元素的投影直截了當(dāng)?shù)膩砀嬖V用戶，元素的空間關(guān)系。

物體越低，優(yōu)先級越低，其陰影小而銳利，反之物體越高，優(yōu)先級越高，其陰影越大越柔和。在設(shè)計中常見的陰影影響因素有X軸、Y軸、模糊、擴展。

X軸：

這是投影延水平面或者X軸位置的偏移，控制著頂部和底部的陰影；

Y軸：

這是投影延垂直面或者Y軸位置的偏移，控制著頂部和底部的陰影；

模糊：

調(diào)整陰影顏色的模糊或者羽化；

擴展：

控制著陰影的大小以及前景與后景之間的距離；

03. 陰影的狀態(tài)與形式

當(dāng)界面中的組件失去陰影效果時，用戶在操作時可能會因為視覺上缺乏變化而感到困惑，對頁面內(nèi)的層級關(guān)系產(chǎn)生疑慮，進(jìn)而覺得內(nèi)容顯得混亂，增加了理解和使用界面的難度。

用戶通常期望界面元素之間能在空間上有所區(qū)分，以實現(xiàn)更為直觀和流暢的交互體驗。

常見的陰影狀態(tài)分為常規(guī)和懸浮兩種。

常規(guī)陰影：

這是不進(jìn)行任何操作時界面的默認(rèn)陰影樣式，通常表示為零級陰影狀態(tài)，它為用戶提供了一個清晰的視覺層級參考。

懸浮陰影：

當(dāng)用戶與界面進(jìn)行交互，如hover態(tài)時，元素可以使用一級陰影，甚至根據(jù)特定場景需求，可能采用二級或三級陰影狀態(tài)。這種動態(tài)變化不僅提升了界面的趣味性，也增強了用戶對于元素狀態(tài)變化的感知。

陰影在界面中扮演著重要的角色，它能夠直觀地體現(xiàn)元素的層級關(guān)系。不同的陰影高度代表了不同的層級，陰影的強度則由元素與地面之間的距離決定。因此，物體的高度直接影響了其陰影的大小和模糊程度。物體離地面越遠(yuǎn)，其陰影通常越大，模糊值也相應(yīng)增高。

在antdesign設(shè)計系統(tǒng)中，采用了代表四個不同高度級別的陰影來適配界面中的元素，而不是像某些美國網(wǎng)頁設(shè)計系統(tǒng)那樣采用六種不同的高度。這四個陰影級別各自對應(yīng)著不同的高度層級，并且擁有獨特的屬性，以確保界面元素在視覺上既清晰又和諧。

第 0 層：

物體緊貼地面，投影與物體完全重疊，在界面中不對此層定義陰影值。

如：

篩選

第 1 層

: 物體位于低層級，此時物體被操作(懸停、點擊等)觸發(fā)為懸浮狀態(tài)，當(dāng)操作完成或取消時，懸停狀態(tài)反饋也跟隨消失，物體回歸到原有的層級中，如：卡片 hover 等；

第 2 層：

物體位于中層級，此時物體與基準(zhǔn)面的關(guān)系是展開并跟隨，物體由地面上的元素展開產(chǎn)生，會跟隨元素所在層級的移動而移動。如：

下拉面板

等；

第 3 層：

物體位于高層級，該物體的運動和其他層級沒有關(guān)聯(lián)。如：對話框等。

04. 陰影的應(yīng)用

4.1 真實的反饋

模擬真正狀態(tài)下的陰影，我們可以通過對其變化過程進(jìn)行三層拆分，讓原本生硬的陰影變的更加柔和。

上圖展示了不同級別陰影的從低到高不同層級變化過程

4.2 光源方向原理

陰影的偏移由組件的位置決定，確保同一套組件在光源方向的一致性。

陰影的位置對于提升用戶體驗和視覺設(shè)計至關(guān)重要。按照光源方向的邏輯，我們可以這樣總結(jié)陰影的三種常見應(yīng)用：

陰影向左：

當(dāng)元素（如導(dǎo)航欄、抽屜組件或固定表格欄）位于屏幕右側(cè)時，向左的陰影能夠突出這些元素，并暗示它們是可交互或可擴展的。

陰影向右：

對于位于屏幕左側(cè)的元素（如導(dǎo)航欄、抽屜組件或固定表格欄），向右的陰影能夠吸引用戶的注意力，并強調(diào)這些元素的存在和重要性。

陰影向下：

陰影向下通常用于組件內(nèi)部或組件本身，以營造立體感和層次感，這是界面設(shè)計中比較常規(guī)且有效的視覺處理方法。

05. 總結(jié)

陰影設(shè)計在界面設(shè)計中扮演著至關(guān)重要的角色，它不僅能夠增強設(shè)計的立體感和層次感，還能有效地引導(dǎo)用戶的注意力，提升用戶體驗。在本文中，我們探討了陰影在不同位置所代表的含義及其應(yīng)用場景。

我們還詳細(xì)的了解了陰影的變化過程，在對應(yīng)的工作中，能夠根據(jù)不同的信息層級來設(shè)置陰影，希望這篇文章能夠讓我們對陰影這種常見技法有深入的了解。

以上就是我對陰影設(shè)計見解和總結(jié)，我非常期待能夠與你分享更多的想法，并一同在設(shè)計的道路上不斷進(jìn)步。

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

評論(0) 瀏覽(860)

192024-6

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

ui設(shè)計分享達(dá)人

隨著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ā)生變化，進(jìn)一步提高效率，對于從業(yè)人員的能力要求也在實時更新。
對于這樣一種浪潮，埋頭當(dāng)個鴕鳥或者嗤之以鼻是沒有意義的，我們需要看到、認(rèn)識、擁抱它。所以有人笑稱：打不過就加入。同時，對于各種所謂干掉各個崗位的宣傳，也吸引著、推動著我們?nèi)チ私鈱⒈皇裁锤傻粢约霸趺幢桓傻簟?br /> 從另一方面講，只有在技術(shù)變革的時候，彎道超車才有可能。如果只是沿用之前的經(jīng)驗與技術(shù)，那么成熟的企業(yè)就會有先發(fā)優(yōu)勢。但是當(dāng)面對新的技術(shù)變革時，大家被拉回到同一起跑線上，這個時候，就看誰能夠找到正確的方向，率先突圍。
所以，不管是被動也好，還是主動也好，面對著新一輪的技術(shù)變革，也希望從AI能力本身、所帶來的變化、以后的發(fā)展等方面全面了解一下這個新的時代寵兒。

評論(0) 瀏覽(1549)

192024-6

圖標(biāo)設(shè)計的進(jìn)化歷程，讀這一篇就好了！

ui設(shè)計分享達(dá)人

圖標(biāo)在當(dāng)今不論是物理世界還是數(shù)字世界中都廣泛存在且十分重要，在交互界面中其重要性尤其值得強調(diào)。圖標(biāo)是用戶與產(chǎn)品之間最簡單的交流形式之一，有助于提升可用性和直觀性，還能讓界面更加易于使用和理解，幫助用戶快速導(dǎo)航。很多時候，圖標(biāo)有助于解決相當(dāng)多復(fù)雜或抽象的概念。借由對圖標(biāo)“進(jìn)化“的概括梳理，不僅使我們看待圖標(biāo)的設(shè)計有更深入地了解，同時也有助于更好地摸清未來圖標(biāo)設(shè)計的發(fā)展方向。

一、早期的圖標(biāo)設(shè)計

1.1 引子：箭頭圖標(biāo)從何而來？

箭頭，作為日常生活中最常見和常用的圖標(biāo)，從城市生活的導(dǎo)航指向，到屏幕界面中的前進(jìn)返回，到處都能見到各式各樣的箭頭圖標(biāo)?？梢哉f幾乎每一個現(xiàn)代人都清楚箭頭圖標(biāo)的含義，對這種無處不在的圖標(biāo)習(xí)以為常。然而，正是這樣一個對我們來說司空見慣的圖標(biāo)，卻很少有人知道它究竟是為何如此造型，又是如何一步步演進(jìn)至今天的模樣的，就讓我們以這個有趣的問題為引子，來一同探尋圖標(biāo)設(shè)計的進(jìn)化歷程。

根據(jù)美國印刷史協(xié)會的研究，作為符號和圖標(biāo)被使用的箭頭歷史只有短短不到四百年，隨著時間的推移，箭頭變得越來越簡化和抽象。而最初具有指向含義的“箭頭”，其實是一只腳印，以這種十分直觀的方式傳達(dá)了清晰的信息：“向這個方向前進(jìn)。”同樣，在早期的教學(xué)插圖和標(biāo)牌中可以看到手指的圖像，例如伸出的手指指向最近的城鎮(zhèn)方向，以及早期印刷文本和手稿中用于指向關(guān)鍵的段落。

這些均是十分具象的早期“箭頭”圖案，使用最直觀的方式表達(dá)了含義和作用，正如古代中國的甲骨文和埃及象形文字那樣直白。由此也不難看出，文字和圖標(biāo)自古以來就有著千絲萬縷的聯(lián)系，時至今日依然如此。

之后箭頭圖標(biāo)慢慢由具象走向象征性，首次使用是在18世紀(jì)的法國論文插圖中發(fā)現(xiàn)的，被描繪為一個帶有羽毛尾巴的弓箭箭矢。同期的德國也發(fā)現(xiàn)了地圖中使用類似圖案表示水流流向的例子。

隨后，箭頭變得更加抽象，到了19世紀(jì)中后期，箭頭的尾巴被省略，只留下了箭身和頭部的三角。對于瑞士字體設(shè)計大師Adrian Frutiger來說，這是箭頭最基本的特征：“當(dāng)兩條斜線結(jié)合在一起并形成夾角，方向和運動感的表達(dá)隨之產(chǎn)生。”伴隨著工業(yè)革命，機器操作手冊中頻繁出現(xiàn)的箭頭圖標(biāo)，被廣大民眾所接受。

自此，箭頭的抽象形態(tài)被確定，隨后便被廣泛應(yīng)用于各種場景中。時至今日，箭頭圖標(biāo)的用法和形式也越來越多樣，數(shù)學(xué)符號、商業(yè)標(biāo)志，App界面中都有它的身影，其所被賦予的引申含義也越加豐富，漸漸地成為了我們今天所普遍熟知的箭頭圖標(biāo)。

20世紀(jì)70年代紐約地鐵設(shè)計的新導(dǎo)視系統(tǒng)，這套以箭頭、字母、色彩構(gòu)成的現(xiàn)代設(shè)計系統(tǒng)沿用至今，啟發(fā)了包括iOS頁面導(dǎo)航方式在內(nèi)的許多經(jīng)典設(shè)計（可以看到早期的導(dǎo)視也是使用具象的箭作為指向符號）。值得一提的是其中的箭頭細(xì)節(jié)，箭頭內(nèi)側(cè)的斜線角度與外側(cè)并不是平行的，而是有著4° 的內(nèi)縮，這種細(xì)節(jié)的處理正是從字體設(shè)計中借鑒而來，減弱筆畫交匯處的視覺重量感使其看起來是平行且勻稱的，類似的處理在今天的iOS圖標(biāo)中仍然可以看到。

1.2 圖標(biāo)設(shè)計的經(jīng)典之作

像是箭頭這樣經(jīng)典的圖標(biāo)設(shè)計還有許多，這里挑選了幾個最具有劃時代意義的設(shè)計，讓我們一起來回顧一下。

1964年東京奧運會，是奧運會第一次在亞洲國家舉辦，考慮到多國語言的信息傳達(dá)問題，設(shè)計了第一套運動項目的抽象圖標(biāo)，來自各個國家的人們通過圖標(biāo)即可辨別出不同的運動，在之后的1972年德國慕尼黑奧運會上，人物被進(jìn)一步抽象，類似的人物抽象形象被復(fù)用在例如安全出口、洗手間等經(jīng)典圖標(biāo)上。

20世紀(jì)80年代，數(shù)字時代的圖標(biāo)開始出現(xiàn)，作為GUI的關(guān)鍵組成，圖標(biāo)的設(shè)計同樣是為了更加直觀地傳達(dá)信息，讓更多人可以輕易理解并接觸到個人電腦，消除傳統(tǒng)代碼界面造成的隔閡感與距離感，經(jīng)典的Macintosh笑臉、Command、播放、USB等圖標(biāo)陸續(xù)被發(fā)明。

Happy Mac

經(jīng)典Mac電腦開機時呈現(xiàn)的圖標(biāo)，以及最新macOS中的訪達(dá)，通過把個人電腦擬人為一個笑臉，給用戶傳達(dá)了十分友好的第一印象，打破了人們對于電腦和機器先天地抵觸心理，讓技術(shù)的魅力被更多的人所感受。

Command

蘋果電腦鍵盤上的Command修飾鍵最初只是一個Apple Logo，菜單中也會展示一系列以Apple Logo指代地快捷鍵組合，這樣在界面中濫用logo顯得十分不優(yōu)雅，因此設(shè)計師從眾多抽象圖標(biāo)中選擇了這個沒有明確含義地微妙圖標(biāo)，在快捷鍵的描述上顯得十分貼切。據(jù)稱其源于北歐地區(qū)露營地的標(biāo)識。

播放

播放圖標(biāo)在20世紀(jì)60年代中期首次出現(xiàn)在磁帶上，有時還有一個額外的三角形來表示快進(jìn)或倒帶，三角形指向磁帶卷曲的方向。播放/暫停符號現(xiàn)在可以在任何能夠播放媒體的設(shè)備上找到，并普遍用于媒體的控制和表示。

USB

USB圖標(biāo)靈感來自于三叉戟。每個點的末端都被一個圓形、正方形和三角形所取代，旨在代表可以使用這種通用接口連接的許多不同的外圍設(shè)備。

從這些經(jīng)典案例不難看出，圖標(biāo)具備了文字所難以傳達(dá)的直觀性和親和力，不論在是物理世界還是數(shù)字世界中，圖標(biāo)的設(shè)計都發(fā)揮了舉足輕重的作用。

二、UI中的圖標(biāo)設(shè)計

今天的文字是從現(xiàn)實世界中對事物的抽象描述演變而來的，但我們?nèi)匀幻刻焓褂贸橄蟮膱D標(biāo)來輔助進(jìn)行溝通。對于數(shù)字環(huán)境中的用戶界面來說尤其如此。例如，眾所周知的“×”圖標(biāo)代表關(guān)閉或刪除用戶在屏幕上看到的一部分內(nèi)容，以及在搜索引擎或其他地方上看到了用作“搜索”圖標(biāo)的放大鏡。

2.1 什么是好的圖標(biāo)？

圖標(biāo)以一種通用且簡單的方式傳達(dá)信息，無論文化或地理背景如何，每個人都可以理解。那么，怎樣的標(biāo)志才算是好標(biāo)志或壞標(biāo)志呢？

我們需要更深入地研究科學(xué)才能更好地理解。符號科學(xué)的研究被稱為符號學(xué)。它涵蓋了從豎起大拇指到微笑，甚至表情符號的所有含義。這門科學(xué)的著名代表人物查爾斯·桑德斯·皮爾士提出了一個三角形模型，說明了符號之所以成為符號的原因（見下圖）。

● 表征物：符號的代表形式；

● 解釋者：觀察者心中對符號的解釋理解；

● 對象：符號所指的對象；

這三個要素相互關(guān)聯(lián)，形成了理解或溝通中的基本結(jié)構(gòu)。符號并非直接與其代表的對象相連，而是通過解釋者也就是使用符號的人來建立連接。這個模型強調(diào)了解釋和主觀性在符號學(xué)中的重要性。

如果我們以箭頭圖標(biāo)為例，代表物是箭頭符號本身。它是一種視覺標(biāo)志，通常用來指示方向或引導(dǎo)注意力。箭頭的形狀、方向和上下文決定了它如何被解釋。對象是箭頭符號所指向的事物。這可以是實際的物理方向，如“向北”、“返回上一級”等，或者可以是比喻意義上的方向，如指引下一步行動的方向。解釋者是觀察者對箭頭符號的理解或解讀。例如，當(dāng)一個人看到一條指向右邊的箭頭時，他們可能會理解為需要向右轉(zhuǎn)，或者他們應(yīng)該將注意力集中在右側(cè)。

所以當(dāng)我們設(shè)計圖標(biāo)時，需要著重考量這三者之間的關(guān)系。也可以理解為，如果在某個位置看到某個圖標(biāo)，我們期望用戶如何理解并進(jìn)行操作。

此外，蘋果電腦經(jīng)典圖標(biāo)的設(shè)計師Susan Kare也有自己一直堅持的設(shè)計原則：

● 簡單、清晰和美觀

● 重視上下文和隱喻

● 易于理解、便于記憶

● 確保一致性和可讀性

● 人性化

因此，圖標(biāo)的偉大之處在于可以跨越多種語言，成為一種人類通用的視覺表達(dá)。

2.2 構(gòu)建數(shù)字圖標(biāo)設(shè)計系統(tǒng)

圍繞著技術(shù)的演進(jìn)，圖標(biāo)的設(shè)計有了前所未有的進(jìn)化，同字體設(shè)計產(chǎn)生了更多千絲萬縷的聯(lián)系。其中最具代表性的便是Apple和Google這兩家軟件巨頭所開發(fā)的SF Symbols和Material Symbol圖標(biāo)系統(tǒng)，分別作為iOS和android的系統(tǒng)圖標(biāo)應(yīng)用，它們也有著各自的進(jìn)化歷程。與此同時，圖標(biāo)也不僅僅再是單一的固定的圖標(biāo)，而是像字體一樣的一套圖標(biāo)系統(tǒng)，包含可以進(jìn)行自定義調(diào)節(jié)的風(fēng)格、樣式、粗細(xì)、甚至可以不斷進(jìn)行迭代和更新。完善易用的圖標(biāo)系統(tǒng)與圖標(biāo)本身的設(shè)計同樣至關(guān)重要。

形態(tài)與色彩

作為用戶體驗十分優(yōu)秀的Apple，其圖標(biāo)系統(tǒng)必然具有眾多可圈可點之處。最初，SF Symbols提供的是單色圖標(biāo)，這些圖標(biāo)在界面中奠定了一致性，同時也給人一種熟悉感。在2021年，SF Symbols變得更加靈活多樣，提供了多種渲染模式：分層模式、調(diào)色版模式、多色模式。2022年引入了可變顏色，使得圖標(biāo)能傳達(dá)不同的強度水平或是時間變化，讓圖標(biāo)更加富有表現(xiàn)力。兼具功能性和視覺魅力。2023年，更進(jìn)一步地增加了動畫屬性。為界面注入了更多動感和活力，圖標(biāo)數(shù)量超過5000個。

SF Symbols使用iconfont技術(shù)來實現(xiàn)與系統(tǒng)字體的和諧搭配，支持粗細(xì)的無極調(diào)節(jié)，與文字的自動對齊排版，同時還支持同一個圖標(biāo)的不同狀態(tài)變體，例如音量圖標(biāo)的變化和用戶圖標(biāo)的多種組合，猶如漢字的偏旁部首組合一樣靈活，在設(shè)計和開發(fā)實現(xiàn)時都非常高效便利。

在同一個字號下，擁有大中小三種圖標(biāo)的預(yù)設(shè)尺寸，使得在不同尺寸的控件中，盡管字號都是17pt，但都可以調(diào)用合適的圖標(biāo)，三種尺寸也并非單純的縮放，而是針對每個尺寸的粗細(xì)和內(nèi)部空間單獨進(jìn)行微調(diào)，從而實現(xiàn)每個尺寸的圖標(biāo)視覺感受上都能和諧匹配文字內(nèi)容。

Material Symbols作為谷歌開發(fā)設(shè)計的一套圖標(biāo)系統(tǒng)，同樣具有許多優(yōu)秀的特質(zhì)。除了與SF Symbols同樣的可變粗細(xì)、尺寸視覺自適應(yīng)等特性外，還具有SF Symbols所不具備的一些優(yōu)勢。

圖標(biāo)風(fēng)格上，Material Symbols支持三種不同的描邊風(fēng)格，Outlined、Rounded和Sharp，在線條轉(zhuǎn)折和頭尾的方圓處理上各有不同。支持針對不同粗細(xì)的精細(xì)調(diào)節(jié)，這是由于在淺色模式和深色模式下，圖標(biāo)的粗細(xì)感受會有些許不同，而通過Grade這一特性，則可以在同樣的粗細(xì)參數(shù)下進(jìn)一步微調(diào)圖標(biāo)的視覺觀感，從而達(dá)到更加和諧統(tǒng)一的呈現(xiàn)。

以往絕大多數(shù)圖標(biāo)都是單色形式，但是這并不能滿足所有場景的使用，例如一些特定的強調(diào)色，以及天氣狀況圖標(biāo)等。SF Symbols在色彩上，圖標(biāo)本身可以被劃分為多個層級，每個層級都支持單獨配置色彩參數(shù)，從而實現(xiàn)了一個圖標(biāo)，多種色彩模式的效果，在不同的狀態(tài)可以通過色彩的變化進(jìn)一步豐富圖標(biāo)的表現(xiàn)力。有些情況下，圖標(biāo)的色彩并不是固定的，也需要可以代表時間和過程的變化，例如Wi-Fi強度和信號等，這些圖標(biāo)的微動在過往的開發(fā)流程中可能需要單獨的動畫來實現(xiàn)，而在SF Symbols中只需要對圖標(biāo)進(jìn)行預(yù)先設(shè)置，便可以支持這種動畫效果，而無需再輸出動畫資源。

在手機QQ中的圖標(biāo)設(shè)計中，同樣遵循了上述的設(shè)計原則，具備簡潔現(xiàn)代的設(shè)計風(fēng)格，與界面中的其他元素相得益彰，共同構(gòu)成了Q語言的完整設(shè)計系統(tǒng)。

在群應(yīng)用圖標(biāo)的場景中，對于圖標(biāo)做了更加豐富生動的表現(xiàn)處理。在默認(rèn)模式中，對圖標(biāo)進(jìn)行基于QQ色彩體系的色相分層處理，既強化了不同圖標(biāo)之間的差異識別，同時多層次的色彩豐富了圖標(biāo)的視覺感受；簡潔模式的圖標(biāo)則更傾向于系統(tǒng)圖標(biāo)外圓內(nèi)方的線性風(fēng)格，同時強化了圖標(biāo)比例和圖形輪廓，在簡化造型的基礎(chǔ)上保證了識別度。

動態(tài)與變化

在手Q的Tab圖標(biāo)上，切換選中時加入了的生動的圖標(biāo)動畫，通過品牌色的面性圖標(biāo)強化了選中效果，恰到好處的微動畫不會過于搶眼，同時又為QQ注入了年輕活力的視覺感受。

在最新的SF Symbols 5版本中，引入了更加豐富的動畫效果，同樣也是通過預(yù)先將圖標(biāo)設(shè)置圖層來實現(xiàn)預(yù)設(shè)的六種動畫（出現(xiàn)、消失、彈跳、縮放、閃爍、交替），不需要單獨的圖標(biāo)動畫資源。最重要的是，這些圖標(biāo)動畫在所有的尺寸、粗細(xì)、和色彩渲染模式下，都是通用的，這讓其可用性大大增加，避免了例如淺色深色模式下都需要單獨的動畫資源的問題。

動畫中有個細(xì)節(jié)，例如上圖第一行中間的haha圖標(biāo)，動畫是分了多層進(jìn)行的，層與層之間的遮擋關(guān)系和線條分隔并不會因為元素的縮放而變化，這是因為在SF Symbols的圖標(biāo)動畫配置中，支持對布爾運算的圖層進(jìn)行配置，通過多圖層的動畫實現(xiàn)了這種復(fù)雜的動畫效果，十分巧妙。

小結(jié)

以上的關(guān)于圖標(biāo)設(shè)計系統(tǒng)的內(nèi)容受限于篇幅并沒有詳細(xì)介紹其中的實現(xiàn)原理與設(shè)計細(xì)節(jié)，感興趣的讀者可以到以下幾個官方的視頻鏈接中詳細(xì)了解，相信看完之后便會領(lǐng)會到圖標(biāo)設(shè)計系統(tǒng)與先進(jìn)的技術(shù)實現(xiàn)結(jié)合的魅力所在?？梢哉f在UI圖標(biāo)系統(tǒng)中，已經(jīng)不僅僅是圖標(biāo)本身的設(shè)計，而是關(guān)聯(lián)到系統(tǒng)字體、技術(shù)實現(xiàn)、動態(tài)交互等多個領(lǐng)域的復(fù)雜系統(tǒng)，通過多方的共同協(xié)作，最終才能實現(xiàn)可以不斷迭代、使用便利的圖標(biāo)工具箱。

三、圖標(biāo)設(shè)計的未來

伴隨著互聯(lián)網(wǎng)、個人電腦和手機的普及，以及例如奧運會這樣的全球盛事的舉辦，世界范圍內(nèi)的文化交流和融合變得越來越常見和深入，圖標(biāo)與文字一樣構(gòu)成了不可或缺的溝通橋梁，在這樣的背景下，圖標(biāo)的設(shè)計更加需要去適應(yīng)這樣多元的環(huán)境，利用先進(jìn)的技術(shù)進(jìn)行視覺表現(xiàn)，使用AI去探索更多的可能性。

3.1 更多元的應(yīng)用

在SF Symbols中，一些涉及到書寫習(xí)慣的圖標(biāo)會擁有幾個不同的語言版本，例如書本這個圖標(biāo)，有的是右開本有的是左開本，這便是考慮到在一些國家和地區(qū)的文化習(xí)慣不同。以及不分圖標(biāo)上的文字也擁有包括英語、漢語、阿拉伯語等等好幾個變體。系統(tǒng)調(diào)用這些圖標(biāo)時便會根據(jù)用戶所設(shè)置的語言和地區(qū)，自動變化圖標(biāo)的呈現(xiàn)，讓開發(fā)者無需去單獨適配，達(dá)到高效開發(fā)的同時也提升了多語言的用戶體驗。

在emoji中我們也可以看到，一些表情也擁有多個膚色版本，黃色為經(jīng)典的默認(rèn)樣式，其他則適配了從淺到深的五種膚色，讓所有人都可以擁有屬于自己的emoji膚色，這同樣也是出于對不同種族人們的尊重和平等。

性別的平等在當(dāng)代也得到了廣泛的重視，如iOS系統(tǒng)通訊錄的圖標(biāo)從早期的傾向于男性的頭像，到如今的中性表達(dá)；以及Twiter設(shè)計默認(rèn)頭像時也著重優(yōu)化了頭像的樣式，在肩部和頭部的形態(tài)上去除性別的傾向，從而實現(xiàn)可以以一種抽象的頭像圖標(biāo)去指代所有人。

3.2 更生動的表現(xiàn)

上文提到的奧運會運動項目圖標(biāo)，某種程度上也見證著世界范圍內(nèi)圖標(biāo)設(shè)計與技術(shù)發(fā)展的進(jìn)程，在2021年東京奧運會上首次出現(xiàn)的動態(tài)體育圖標(biāo)，為傳統(tǒng)的平面圖標(biāo)注入了動感和立體感，更加適用于當(dāng)代的數(shù)字媒體傳播，之后的北京冬奧會也為運動項目加入了動態(tài)的呈現(xiàn)，并且還融入了中國篆刻的視覺語言，將傳統(tǒng)與現(xiàn)代巧妙地融合在了一起。

在數(shù)字世界中，更少不了圖標(biāo)向著更加生動的表現(xiàn)上進(jìn)化。從emoji到animoji和memoji，平面的表情圖標(biāo)現(xiàn)在可以結(jié)合用戶的表情，實時地動態(tài)立體呈現(xiàn)。而最近發(fā)布的Vision Pro，將我們所熟悉的各種app圖標(biāo)在空間中更加生動地還原出來，加入了分層的概念，讓圖標(biāo)可以隨著人眼的目光變化，實現(xiàn)更加真實和靈動的感受，仿佛原先的數(shù)字世界中的各種app出現(xiàn)在了現(xiàn)實世界中。

3.3 更自由的表達(dá)

或許在不遠(yuǎn)的未來，圖標(biāo)設(shè)計不再是只屬于設(shè)計師的工作，隨著技術(shù)的進(jìn)步，越來越多的普通人也可以借助各種智能工具，體驗到圖標(biāo)設(shè)計的趣味。比如谷歌所推出的Emoji Kitchen，可以讓用戶自由地組合Emoji，創(chuàng)作出自己想要的表情圖標(biāo)。

以及AI技術(shù)的發(fā)展，也讓人們可以僅僅借助一段文字的描述，就能幾乎立刻得到由AI生成的效果絢麗的圖標(biāo)。而AI技術(shù)才剛剛起步，現(xiàn)在甚至隔幾個月就會有一個顯著的進(jìn)步和能力提升，可以預(yù)見在不久的將來，這項技術(shù)將極大的降低圖標(biāo)設(shè)計的門檻，讓更多的人加入到設(shè)計與創(chuàng)作的隊伍中。

結(jié)語

從腳印到箭頭，從手繪到生成，從單一的圖標(biāo)到復(fù)雜的系統(tǒng)，圖標(biāo)設(shè)計的進(jìn)化也同樣是文明和技術(shù)的進(jìn)化。數(shù)字技術(shù)的發(fā)展進(jìn)一步地加速了這個過程，屏幕的分辨率也從像素馬賽克演進(jìn)到了如今幾乎無法區(qū)分虛擬和現(xiàn)實，遠(yuǎn)超人類自身進(jìn)化的速度。但不論是在復(fù)雜的現(xiàn)實世界或是夢幻的數(shù)字世界，一個簡單清晰的箭頭圖標(biāo)都將可以成為導(dǎo)航，為我們指引目標(biā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，從奧運會體育標(biāo)識的更迭中捕捉設(shè)計原點

https://zhuanlan.zhihu.com/p/113008671

圖標(biāo)設(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

中國篆刻“動起來”了！這些冬奧體育圖標(biāo)不簡單_新聞_央視網(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)載請注明出處。

評論(0) 瀏覽(1346)

192024-6

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

ui設(shè)計分享達(dá)人

近兩年出現(xiàn)了不少“解放設(shè)計師雙手”的設(shè)計工具、AI工具，我們似乎能很快輸出N種流程方案、N種布局方案、N種UI風(fēng)格等等。問題是：這樣窮舉設(shè)計方案的工作方式當(dāng)真有效嗎？

請警惕“莫得感情”的出圖機器！具備競爭力的設(shè)計師必須有自主意識，包括清晰的思維邏輯、果敢的決策力。而體現(xiàn)這一意識和能力的重要環(huán)節(jié)之一，就是產(chǎn)品生產(chǎn)鏈路中的首個環(huán)節(jié)“需求分析”。

需求分析并不僅僅是產(chǎn)品經(jīng)理的事兒。從共同目標(biāo)的角度來看，互聯(lián)網(wǎng)企業(yè)在崗位劃分上區(qū)分了產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)工程師等，是順應(yīng)人的精力時間有限、術(shù)業(yè)有專攻的自然規(guī)律，但是從業(yè)務(wù)目標(biāo)來說，每一個崗位都應(yīng)該對“最佳用戶體驗和最大化商業(yè)利益的平衡”負(fù)責(zé)，確保這艘船在正確的航道上。所以，如果每個“船員”都具備主人翁意識和需求分析的能力，航程必然更健康穩(wěn)健。

對設(shè)計師來說，需求分析不僅僅是“這個功能要不要做”的問題，也會影響后續(xù)的設(shè)計方案決策。每一次的功能增刪或調(diào)整，都是在改變用戶接收產(chǎn)品界面信息的整體效用，那么每一個產(chǎn)品需求的分析都要評估這個功能在整個信息架構(gòu)、用戶體驗鏈路的位置孰輕孰重，也就必然會影響你的設(shè)計方案決策。

產(chǎn)品需求從哪里來？

“有用戶反饋說……"

“國慶節(jié)快到了，我們策劃了一個活動……”

“這個付費轉(zhuǎn)化率很低，達(dá)不到預(yù)期。我們想……”

……

產(chǎn)品需求的來源多種多樣，可能來自產(chǎn)品經(jīng)理、用戶反饋、產(chǎn)品數(shù)據(jù)、市場風(fēng)向、技術(shù)革新等等。當(dāng)然，還有來自作為設(shè)計師的”我自己“。當(dāng)我靈光一閃想到一個很炫酷的小創(chuàng)意，情感上免不了自以為是地想”咱們產(chǎn)品這么不做這個“——這個時候我也會用需求分析的框架來質(zhì)問自己：

“值不值得做（價值評估）”、“應(yīng)當(dāng)先做什么（優(yōu)先級）”、“用戶需求要滿足到什么程度（核心體驗鏈路）”這三個問題。

做需求分析，要想什么？

我們常說產(chǎn)品需求要“洞察用戶真正的需求”，要明確“用戶價值”。剛?cè)胄械臅r候，我們都會點點頭，心想“對哦”。可是什么是“真正的”、什么是“假的”、什么是“價值”？說實話，這些概念都挺虛的。只有當(dāng)理論落到某個用戶場景去分析，我們才能理解其深意。

先說點虛的，什么是“價值”？

價值是多維度的概念，在不同的學(xué)科中都會在“價值”前加一個表范圍的定語，比如“勞動價值”、“經(jīng)濟價值”、”社會價值”。隨著互聯(lián)網(wǎng)的發(fā)展，我們出現(xiàn)了兩個重要的新詞“用戶價值”和“產(chǎn)品價值”。

對于用戶而言，他們購買或使用產(chǎn)品或服務(wù)是為了滿足特定的需求，比如提升效率、獲得愉悅、獲取經(jīng)濟收益等。那么我們說這個產(chǎn)品具有“用戶價值”。

所以需求分析首先是“評估價值”，而價值評估則拆分為“用戶價值”和“商業(yè)價值”兩部分。即使當(dāng)下的需求目標(biāo)是提升用戶規(guī)模（拉新、促活、挽留等），并不需要用戶掏錢，也是為了實現(xiàn)長遠(yuǎn)的商業(yè)價值。當(dāng)然，這僅適用于以盈利為目標(biāo)的企業(yè)，非盈利組織還有“社會影響力”的目標(biāo)，不在本文討論范圍內(nèi)。

下面我們進(jìn)一步拆解價值評估：“用戶價值評估”和“商業(yè)價值評估”。

1、用戶價值評估

解決哪些用戶在什么場景下的什么問題？

這個問題越具體到“人”，就越容易分析。如果需求來自于用戶反饋，我們溯源到具體的用戶。

有一個朋友出去創(chuàng)業(yè)，想做一個“找飯搭子”的同城陌生人交友軟件。他說，偶爾看到微信朋友圈有人召喚“有沒有人一起探店”的動態(tài)，去網(wǎng)絡(luò)社區(qū)搜索“飯搭子”、“同城探店”等詞匯也能看到不少帖子。而且探店吃飯這件事直接關(guān)聯(lián)消費，商業(yè)模式很清晰。他想通過他的產(chǎn)品解決“用戶｜在探店場景中｜無法及時找到飯友”的問題。——“找飯友”是一個行為動作，沒有切入到用戶的內(nèi)在需求。

定義用戶價值不能只停留在“行為上”，可以嘗試找到目標(biāo)用戶做定性訪談，進(jìn)一步深挖問題。比如，我們想進(jìn)一步把問題下鉆，可能會問到這些問題：

● 用戶為什么要找飯友？不能一個人探店？

● 用戶為什么找不到“飯友”？

● ……

我們進(jìn)一步細(xì)化“用戶-場景-問題”的價值定義：

解決一線城市年輕用戶（尤其是剛遷移新城市的年輕人）｜通過約伴探店｜解決同好交友（社群需求）、 “量大”餐館均攤成本（省錢需求）、獲得更愉悅的吃飯氛圍（情緒需求）的問題。

那有了這個用戶價值定義是不是就可以順利立項呢？——看這個文章的篇幅，你只讀了不到一半，當(dāng)然還有更多需要推敲的問題，請繼續(xù)閱讀。

這個需求接觸不到真實用戶怎么辦？

有時候我們的需求來源可能是市場風(fēng)向、技術(shù)革新帶來的未知變化。我們無法直觀地獲知“具體的用戶是誰”、“TA在什么場景遇到什么問題”。

——這種情況，我們則需要反向思考：這個需求如果做了，獲益的用戶是誰？滿足了他們在什么場景下的需求？如果不做，用戶會不會因此棄用我們的產(chǎn)品？可能流失的用戶，大盤占比可能是多少？是不是高價值用戶？

用上面的思路去層層推敲，可能會否定原來的產(chǎn)品策劃，可能會挖掘出新的需求，可能會改變需求的優(yōu)先級。

值得一提的是，有時候經(jīng)過層層推敲，最終得到的決策可能會與市面上的競品有所雷同。也就是我們經(jīng)常會問的一個問題：為什么A產(chǎn)品已經(jīng)做了這件事，B產(chǎn)品還要做同樣的事情？

有的功能或服務(wù)是順應(yīng)用戶需求而產(chǎn)生的，如果有所缺失，就無法達(dá)成用戶目標(biāo)。比如短視頻產(chǎn)品都會做點贊和評論，因為視頻創(chuàng)作者和消費者分別有“獲得認(rèn)可”的被尊重訴求、”表達(dá)意見“的掌控欲等心理需要。而產(chǎn)品則需要這些點贊和評論數(shù)據(jù)去評判內(nèi)容熱度和豐富個性化標(biāo)簽，以優(yōu)化內(nèi)容的推送機制。很多同一賽道的產(chǎn)品會有雷同的功能，雖然常常被調(diào)侃為”相互抄“，但是真正做需求分析才能看清“什么是無腦抄”、“什么是必然如此”。

2、商業(yè)價值評估

用戶會為你這個新產(chǎn)品/新功能買單嗎？

我們找到一個有用的需求點是簡單的，因為需求的來源真的太多太多，但是當(dāng)我們發(fā)現(xiàn)，用戶不一定會為我們的新產(chǎn)品或新功能買單。

請注意，這里的“買單”不限于用戶掏錢，還包括用戶決定使用哪個產(chǎn)品的決策成本、用戶愿意花費在某個產(chǎn)品的時間和學(xué)習(xí)成本等。

那我們怎么預(yù)判用戶會不會買單呢？或者，如何提升用戶的買單意愿呢？

如前面所言，“用戶價值”就是通過你的產(chǎn)品獲得了預(yù)期的效用。效用可以是省了時間、省了錢、省了學(xué)習(xí)成本、獲得情緒價值、獲得安全感等。而用戶對效用的感知，往往是對比過去經(jīng)驗的解決方案得到的。所以，我們首先要看用戶之前是怎么解決這個問題的，然后是用戶遷移到新的解決方案（使用新產(chǎn)品或新功能）要付出多少成本。

繼續(xù)用上面“飯搭子”的案例：

——我們從這個案例可以看到，當(dāng)我們做成本對比，不能簡單地說新舊方案哪個成本更高。用戶付出的“成本”是多維度，包括“時間成本”、“經(jīng)濟成本”、“安全風(fēng)險”等維度。

“飯搭子”這個新方案，對比舊方案，并沒有沒有壓倒性的成本優(yōu)勢。我們雖然可以通過產(chǎn)品設(shè)計和運營降低當(dāng)中的用戶成本，比如通過用戶歷史參與數(shù)據(jù)（參與飯局次數(shù)、飯友評價、真實職業(yè)信息等）提供用戶靠譜度評分，以降低安全成本。但消除用戶成本，需要花費較大的資源投入，我們可以預(yù)判這不是一個高ROI的產(chǎn)品項目。

有趣的是，人不是完全理性的。有的場景，只要其中一項成本感知強烈，人就可能選擇棄用這個產(chǎn)品。比如“飯搭子”這個案例中，女性用戶對安全風(fēng)險更為敏感，女性用戶更不愿意嘗試陌生社區(qū)。

如果我做的是一個非常創(chuàng)新的項目，真的沒辦法找到“舊方案”做對比呢？或者我無法獲知舊方案的用戶成本呢？——我們依然建議盡可能地接近用戶、收集足夠多的信息，以輔助判斷。如果依然非常不明朗，可以通過MVP的方案去預(yù)估。關(guān)于MVP實踐的書籍和網(wǎng)絡(luò)資料很多，大家可以自行搜索。

多少用戶會買單呢？

? 確認(rèn)了這個需求有用戶價值

? 確認(rèn)了有XX需求的用戶很可能會買單

——接下來可以開干了嗎？

不夠，還需要

預(yù)判收入規(guī)模

。因為：收入=客單價x支付用戶數(shù)=客單價x訪問用戶數(shù)x支付轉(zhuǎn)化率。

這個等式適用于一般的to C產(chǎn)品，不同的產(chǎn)品可能有差異，比如視頻用戶的使用時長可能與產(chǎn)品收入掛鉤，那么用戶時長也需要作為一個變量放入到你的產(chǎn)品收入公式中。

當(dāng)我們要開發(fā)一個新的付費互動功能，我們需要做數(shù)據(jù)預(yù)估：這個互動功能放在這個位置，每天的曝光可能是多少？按照此頁面同樣位置的點擊轉(zhuǎn)化和其他功能的付費轉(zhuǎn)化，能否預(yù)估這個新功能的收入？這個收入規(guī)模值得投入X天的開發(fā)人力嗎？

如果這個需求的直接目標(biāo)不是收入，而是獲取更大用戶規(guī)模。我們也同樣用“等式”這個思考方式來去做數(shù)據(jù)估算，只是把“收入”理解為用戶量或其他目標(biāo)數(shù)值、而非金錢收入。

當(dāng)然，通過歷史數(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)品需求當(dāng)下就要啟動，但是當(dāng)前要做到什么程度呢？

前者，對比不同需求的產(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)的最小集

不要忽視商業(yè)競爭中的時間差，因為搶先占領(lǐng)市場的產(chǎn)品實際上是提升用戶遷移到競爭對手的成本。過去我們提倡匠人精神，不放過每一個細(xì)節(jié)。而當(dāng)前激烈的市場競爭環(huán)境下，“有的放矢”比“摳細(xì)節(jié)”更加重要。

小結(jié)

我們歸納一下需求分析的思路，多問問這些問題：

需求分析是比較考驗全局觀、邏輯性、數(shù)理分析和共情能力的。工作中可以通過拉表格、思維導(dǎo)圖、白板等工具梳理思路。如果你喜歡寫文字，那就用寫的方式?？傊屑山拥疆a(chǎn)品需求就動手出界面方案。

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

關(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ā)

評論(0) 瀏覽(836)

192024-6

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

ui設(shè)計分享達(dá)人

前言

近年來，Ul設(shè)計行業(yè)蓬勃發(fā)展，圖標(biāo)設(shè)計風(fēng)格更是呈現(xiàn)出多元化的特點，各種新穎、創(chuàng)意的設(shè)計風(fēng)格層出不窮。圖標(biāo)樣式早已從潺潺溪水變成汪洋大海，通過系統(tǒng)歸納和整理各類常用的面性圖標(biāo)設(shè)計類型與風(fēng)格，我們構(gòu)建了一套體系化的記憶框架，使得在日常工作中能夠迅速且準(zhǔn)確地作出圖標(biāo)樣式的決策，從而有效提升設(shè)計效率與質(zhì)量。本文章主要討論近年UI界面中會經(jīng)常使用的圖標(biāo)風(fēng)格，線性圖標(biāo)樣式組成一般過于簡單，在此不做討論。

本文在探討圖標(biāo)的分類思維時，巧妙地運用了層級理念，

并特別關(guān)注層級是否穿透這一關(guān)鍵因素來區(qū)分不同類型的圖標(biāo)。這種分類思維不僅使圖標(biāo)的辨識變得更為便捷，還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法，我們得以更清晰地理解圖標(biāo)的本質(zhì)與特點，進(jìn)一步提升我們對常用圖標(biāo)的認(rèn)知水平和應(yīng)用能力。

無底板圖標(biāo)

單層級

單色扁平

整體風(fēng)格簡潔大方。由于沒有其他質(zhì)感元素的加入，所以對圖形要求更加需要簡約而精致

雙色扁平

主副圖形對比色搭配，整體風(fēng)格既簡約又具備顏色豐富度

微質(zhì)感

·漸變方向從上到下，這種漸變方向較為傳統(tǒng)，呈現(xiàn)輕輕鼓起的圓潤形態(tài)

·漸變方向從下到上，為圖標(biāo)賦予了輕盈而靈動的視覺感受

·漸變方向從左到右，融合了漸變圓弧形成的高光形狀，形式較新穎

多層級

多層級圖標(biāo)的設(shè)計，主要依據(jù)其是否具備穿透特性進(jìn)行劃分，即不穿透與穿透兩大維度。在實際操作中，多數(shù)情況下，我們會借助不同層級的設(shè)計手法來塑造圖標(biāo)的層次感，而這其中往往融入了微妙的質(zhì)感處理。因此，我們并不以扁平與質(zhì)感作為多層級圖標(biāo)的主要劃分標(biāo)準(zhǔn)。

層級不穿透

·色彩搭配鄰近色

·色彩搭配鄰近色，漸變方向-左到右

·色彩搭配鄰近色，和諧統(tǒng)一，主圖形內(nèi)發(fā)光質(zhì)感，邊緣有1像素高光和副圖形隔開

·色彩搭配鄰近色，采用強質(zhì)感，多層級之間巧妙運用投影進(jìn)行區(qū)分，使得每一層都清晰分明，互相映襯。主圖形的質(zhì)感通過漸變、內(nèi)陰影或內(nèi)發(fā)光等手法進(jìn)行精細(xì)刻畫，增強了視覺沖擊力。

·采用強質(zhì)感，多層級，更貼近真實物體的質(zhì)感和光影效果。用素描的三大調(diào)五大面思維，讓光影細(xì)節(jié)拉滿，通常需要手動加光，無法單純用軟件自帶漸變

層級穿透

主圖形透出底部副圖形形狀，副圖形被遮擋形狀模糊處理，主圖形通常邊緣有1像素高光，呈現(xiàn)出精致而獨特的分隔效果。

·鄰近色穿透，底部圖形通常為暗色

·不同色系穿透

有底板圖標(biāo)

為減輕記憶壓力，我們直接沿用先前提出的無底板圖標(biāo)風(fēng)格分類方案。在此基礎(chǔ)上，我們進(jìn)一步引入一個底板構(gòu)成元素，以此作為額外的區(qū)分點。因此，整個分類維度與異形圖標(biāo)分類方案保持高度一致，使得用戶能夠更輕松地進(jìn)行識別和記憶。分類維度不再贅述，直接展示案例

單層級

·底板漸變+投影，漸變方向從下到上，主圖形漸變方向從下到上，和底板統(tǒng)一

·底板漸變+投影，漸變方向從下到上，主圖形漸變方向上到下，和底板相反

·底板漸變，漸變方向從右下到左上，主圖形漸變方向上到下，并帶有較強的投影

多層級

·底板扁平，主圖形和副圖形之間投影區(qū)分

·底板扁平，主圖形和副圖形之間投影區(qū)分，副圖形降低透明度

·底板漸變，主圖形漸變方向根據(jù)物體造型來定制

·底板漸變，主副圖形穿透

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

評論(0) 瀏覽(831)

122024-6

用戶訪談系列之三：訪談后如何得出更深的訪談洞察

ui設(shè)計分享達(dá)人

寫在前面
研究結(jié)果最壞的情況是什么，無法回答研究問題，或者研究結(jié)果不能得到認(rèn)可。畢竟做完一場用戶訪談投入了大量的成本，發(fā)現(xiàn)的卻是一些大家都已知的結(jié)果那就比較失敗了，或者分析出的問題不具備深刻性，對落地實施起不到幫助作用。在前面兩個系列中，我已經(jīng)分享了如何做好訪談前的準(zhǔn)備，以及訪談中一些好用的訪談技巧，最終就是為了訪談后，我們能夠獲得專業(yè)性且能形成指導(dǎo)的建議和洞察。
訪談數(shù)據(jù)分析的難點主要是來源于訪談收集到的數(shù)據(jù)是大量碎片的，凌亂無序的。如何從這無條理的資料中找出新的線索，洞察出新的機會？這似乎是沒有一個固定的標(biāo)準(zhǔn)流程。定性數(shù)據(jù)的分析非常依賴研究者本人的分析能力，同樣一份定性數(shù)據(jù)，經(jīng)過不同人的分析，很可能有完全不一樣的結(jié)論和見解。所以本文也無法給出像數(shù)學(xué)公式一樣的規(guī)則和標(biāo)準(zhǔn)，滿足所有人去套用。在這里我想更多地去揭示定性數(shù)據(jù)分析的面紗，掀開裙子地一角，看看這個過程究竟是如何的，提供研究者們一個參考思路。

評論(0) 瀏覽(1078)

112024-6

揭秘UX文案魔法：撰寫引人入勝的文案細(xì)節(jié)，讓你的產(chǎn)品會說話！

ui設(shè)計分享達(dá)人

3月中旬，“Apple ID將成歷史”的話題登上熱搜，科技網(wǎng)站MacRumors爆料蘋果預(yù)計將在今年把“Apple ID”更名為“Apple Account”，屆時，使用超20年的“Apple ID”逐步淡出視野，成為記憶?？此坪唵蔚奈陌父?，其背后考量可能是復(fù)雜的。僅從文案的字面含義來看，“ID”指的是可以代表某個身份的一串?dāng)?shù)字或編碼，服務(wù)于“認(rèn)證”環(huán)節(jié)的工具屬性更強，而當(dāng)前蘋果給“Apple ID”的定位卻是“一個賬戶盡享Apple所有服務(wù)”，顯然“Account（賬戶）”的含義更加寬泛，即能代表身份標(biāo)識，又可以包含自定義設(shè)置、功能權(quán)限、服務(wù)狀態(tài)等所有個人相關(guān)的信息，文案更加符合實際定位，精準(zhǔn)地表述也讓用戶容易理解和區(qū)分。

同樣是為了降低用戶困擾，提升行為數(shù)據(jù)，2021年，蘋果發(fā)布iOS 14.5時，其播客服務(wù)將“訂閱”功能更名為“關(guān)注”，因為據(jù)市場分析機構(gòu)Edison Research的調(diào)研數(shù)據(jù)顯示，有47%的人認(rèn)為“訂閱”播客需要付費，這意味著過去幾年，可能有很多用戶因為擔(dān)心收費而不使用播客服務(wù)，造成大量用戶流失。更名為“關(guān)注”后，文案表述不容易發(fā)生歧義，可以消除用戶不必要的擔(dān)憂。

評論(0) 瀏覽(705)

112024-6

空間用戶體驗 101：Vision OS 初體驗入門

ui設(shè)計分享達(dá)人

用戶體驗（UX）開始進(jìn)入一個全新的時代， 3D 世界。虛擬世界正在不斷與現(xiàn)實世界融合。改變永不停止。

今天，我們一起體驗來自蘋果的新產(chǎn)品 Vision Pro，感受一下以虛實融合的 3D 空間，全新的空間體驗概念，是如何整合到消費者使用場景之中？我們在未來設(shè)計中，需要注意哪些的重要事項？帶著無限的好奇，戴著 Vision Pro…

評論(0) 瀏覽(819)

072024-6

構(gòu)建高效標(biāo)簽體系：如何優(yōu)化平臺權(quán)益感知，提升用戶體驗？

ui設(shè)計分享達(dá)人

一、前言

在數(shù)字化浪潮席卷全球的今天，標(biāo)簽早已不再是簡單的文字標(biāo)識，它們成為了連接用戶與信息的重要橋梁。從購物網(wǎng)站上的商品分類，到社交媒體上的話題標(biāo)簽，再到搜索引擎的關(guān)鍵詞，標(biāo)簽無處不在，默默地引導(dǎo)著我們的視線和選擇。

特別是在B2B領(lǐng)域，標(biāo)簽的作用更是不可忽視。在百度旗下的B2B平臺愛采購上，一個精心設(shè)計的標(biāo)簽體系不僅能幫助企業(yè)更精準(zhǔn)地展示產(chǎn)品信息，還能助力買家快速找到所需商品，極大地提升了交易的效率和便捷性。

一個優(yōu)秀的B2B平臺標(biāo)簽體系應(yīng)該具備哪些特點呢？接下來，我們將以愛采購為例，深入探討B(tài)2B平臺標(biāo)簽體系的設(shè)計優(yōu)化思路。

首先，標(biāo)簽需要具有明確的信息傳遞功能。在愛采購平臺上，標(biāo)簽被廣泛應(yīng)用于展示商品的各種信息，如功能、價格、活動優(yōu)惠等。這些標(biāo)簽不僅能幫助買家快速了解商品的特性，還能引導(dǎo)他們做出更明智的購買決策。

標(biāo)簽的分類和標(biāo)記功能也是至關(guān)重要的。通過合理的分類和標(biāo)記，愛采購平臺能夠?qū)⒑Ａ康纳唐沸畔⒂行虻爻尸F(xiàn)出來，讓買家能夠輕松找到自己需要的商品。同時，這也為賣家提供了一個展示自己產(chǎn)品優(yōu)勢的機會，增加了商品的曝光率和吸引力。

一個優(yōu)秀的標(biāo)簽體系還需要具備高度的靈活性和可定制性。隨著市場變化和用戶需求的演變，標(biāo)簽體系也需要不斷地進(jìn)行優(yōu)化和調(diào)整。愛采購平臺通過引入智能算法和數(shù)據(jù)分析技術(shù)，實現(xiàn)了對標(biāo)簽體系的實時監(jiān)控和優(yōu)化，確保了標(biāo)簽信息的準(zhǔn)確性和有效性。

1、常見的標(biāo)簽&作用

標(biāo)簽常用于展示內(nèi)容/功能/商品/活動/價格/身份等信息，用于對高優(yōu)信息進(jìn)行標(biāo)記&分類，輔助用戶決策。

2、標(biāo)簽對愛采購平臺的作用

愛采購作為百度旗下的企業(yè)一站式采銷平臺，致力于讓買家直接接觸海量商品和優(yōu)質(zhì)商家，同時還為賣家提供商家運營后臺，幫助他們快速實現(xiàn)交易目標(biāo)。在平臺上，經(jīng)過認(rèn)證的商家和商品信息將會被打上相應(yīng)的標(biāo)簽，確保真實性和實力資質(zhì)。這些標(biāo)簽不僅展現(xiàn)了商家的優(yōu)勢，更是他們寶貴的會員權(quán)益。

3、原標(biāo)簽體系因何而變

平臺的slogan從“買賣好貨源，做出好生意”轉(zhuǎn)變?yōu)?ldquo;定制、批發(fā)、找工廠就來愛采購”的階段中，逐步推出「實力品牌」「交易服務(wù)」「加工定制」「資質(zhì)認(rèn)證」四類標(biāo)簽權(quán)益。當(dāng)推出新權(quán)益時，為了快速樹立用戶認(rèn)知，將新權(quán)益的標(biāo)簽權(quán)重進(jìn)行強化。但隨著權(quán)益體系的逐步完善，各類標(biāo)簽優(yōu)先級排序不合理、不清晰等問題日益凸顯，影響用戶對各種權(quán)益的價值認(rèn)知。

4、新標(biāo)簽體系如何求變

我們從平臺的角度出發(fā)，通過對標(biāo)簽權(quán)重進(jìn)行排序和分類、統(tǒng)一標(biāo)簽的構(gòu)成形式，致力于建立統(tǒng)一的標(biāo)簽體系，統(tǒng)一會員權(quán)益的感知，完善設(shè)計規(guī)范，并建立標(biāo)簽建設(shè)的協(xié)同機制，以規(guī)范后續(xù)標(biāo)簽的更新迭代產(chǎn)出。

二、分類-排序-收斂

1、標(biāo)簽分類

現(xiàn)有的標(biāo)簽從B2B平臺的屬性和用戶的視角來看，可以分為六大類：會員類、認(rèn)證類、服務(wù)類、交易類、保障類、資質(zhì)類。

2、標(biāo)簽排序

各類標(biāo)簽都有其獨特的重要性，但在設(shè)計表達(dá)時，需要從助力買家尋找優(yōu)質(zhì)店鋪&服務(wù)這一核心情境出發(fā)，根據(jù)平臺對標(biāo)簽的綜合定位和用戶的心智感知，定義標(biāo)簽的權(quán)重排序，并劃分出強中弱三個梯級，以便后續(xù)的標(biāo)簽樣式系統(tǒng)優(yōu)化。

3、標(biāo)簽收斂

1）樣式收斂

新權(quán)益推出時，?；趹?yīng)用場景用“位置”和“樣式”強化對應(yīng)的標(biāo)簽。隨著權(quán)益體系的完善，一個標(biāo)簽存在多種樣式使得權(quán)益表達(dá)的不統(tǒng)一，影響了用戶對標(biāo)簽價值的認(rèn)知。為解決這一問題，需要對標(biāo)簽樣式的數(shù)量進(jìn)行收斂。保留符合標(biāo)簽權(quán)重和通用性強的樣式，作為標(biāo)簽迭代的基礎(chǔ)范式。

2）應(yīng)用收斂

常規(guī)非特色信息使用標(biāo)簽，反而影響其他標(biāo)簽的權(quán)重和頁面的閱讀效率，根據(jù)奧卡姆剃刀原則“如無必要，勿增實體”，需要通過視覺降噪來提升頁面的可閱讀性。

三、統(tǒng)一標(biāo)簽體系的構(gòu)成

1、形

標(biāo)簽的大小通常分為大、中、小三種，而標(biāo)簽的寬度常根據(jù)內(nèi)容的長度進(jìn)行適配。因此，在規(guī)則定義上，標(biāo)簽的大小會受到其高度的影響。

大標(biāo)簽（高度18-22Pt）：常用于表格、表單等信息密度相對較低的場景，使用相對較大的標(biāo)簽，以便與其他信息達(dá)到視覺上的平衡。

中標(biāo)簽（高度15-17Pt）：最常見的標(biāo)簽大小，常用于Feeds、用戶信息卡等場景中。

小標(biāo)簽（高度12-14Pt）：由于面積較小，通常用來承載輔助信息，常見于Feeds等場景中。

結(jié)合愛采購平臺的核心場景和常用文字字號，16Pt的標(biāo)簽高度與其他信息的大小比例最為平衡，故選擇16Pt的標(biāo)簽高度作為基礎(chǔ)大小。

在標(biāo)簽的造型上，可以將其分為常規(guī)形和異形兩種類型：

常規(guī)形：常見的標(biāo)簽為矩形，具有規(guī)整有序的外觀，閱讀效率較高，有較強的通用性，適用于列表等大部分場景。

異形：異形標(biāo)簽的形狀較為自由，由于其差異化較大，會更容易引起用戶的注意，適用于特殊的身份表達(dá)、大促活動等場景。

在統(tǒng)一的場景中，同屬性類型的標(biāo)簽形狀應(yīng)該保持統(tǒng)一和諧，避免在相同類別的標(biāo)簽中混用不同形狀，造成視覺上的不統(tǒng)一感。通過統(tǒng)一標(biāo)簽形狀，可以提升用戶對標(biāo)簽信息的識別和理解。

在標(biāo)簽的圓角上，我們可以分為以下幾種形狀：

膠囊形狀（圓角為高度的50%）：圓潤的外觀給用戶帶來柔和的視覺感受。

大圓角矩形（圓角為高度的18%~32%）：擁有視覺亮點的同時保持一定的圓潤度。

小圓角矩形（圓角為高度的6%~12%）：標(biāo)簽更加銳利，但又不失整體的和諧性。

直角矩形（圓角度為0）：具有簡潔硬朗的外觀，適用于某些特定的場景或者設(shè)計風(fēng)格。

新的標(biāo)簽體系從產(chǎn)品設(shè)計語言出發(fā)，選擇小圓角矩形作為主要標(biāo)簽的基本型，以保持整體視覺風(fēng)格的一致性。

2、色

采用HSB色彩系統(tǒng)來構(gòu)建標(biāo)簽的色彩體系。在HSB顏色模式下，我們以品牌紅的0°為起點，每隔24°遞增，選擇不同心智的輔助色。為了色彩體系在視覺上的統(tǒng)一性，通過色彩矯正保持H不變，對S/B進(jìn)行20°以內(nèi)的微調(diào)。

在建立新的標(biāo)簽色彩體系之前，需要根據(jù)現(xiàn)有標(biāo)簽的分類，在延續(xù)之前標(biāo)簽色彩心智的基礎(chǔ)上，對不同類型的標(biāo)簽選用具有不同心智的色彩。

深色場景的調(diào)色方式

在特定情境下，標(biāo)簽會應(yīng)用于深色背景上，這就需要在原有基礎(chǔ)上對顏色進(jìn)行有規(guī)則的調(diào)整，以確保標(biāo)簽的可閱讀性和統(tǒng)一性。

對于彩色標(biāo)簽，在這種HSB色值模式下，保持色相（H）不變，通過微調(diào)飽和度（S）和亮度（B），使在亮色和暗色背景上的對比度保持一致，以確保標(biāo)簽在不同背景下都能清晰統(tǒng)一。

3、字

針對常規(guī)標(biāo)簽，我們采用系統(tǒng)字體，而對于高優(yōu)特色標(biāo)簽，則使用特殊字形（非默認(rèn)字形）。通過對比原則，我們在保持整體統(tǒng)一的基礎(chǔ)上尋找差異，以強化高優(yōu)標(biāo)簽的視覺效果。

4、構(gòu)

1）標(biāo)簽體系樣式的構(gòu)成

標(biāo)簽的構(gòu)成形式可拆解為：雙色和單色、實心和半透明、描邊和填充、純文字或圖標(biāo)加文字等，這些形式可以搭配組合出豐富的標(biāo)簽樣式。

在標(biāo)簽內(nèi)部，重色占比越大，飽和度和對比度越高，標(biāo)簽的視覺權(quán)重就越高。根據(jù)視覺上的強弱，對各類結(jié)構(gòu)進(jìn)行強弱排順，形成強、中、弱三個層級的標(biāo)簽構(gòu)成樣式。

2）標(biāo)簽體系樣式搭配的構(gòu)成

在相同的場景中，應(yīng)盡量避免過多臨近權(quán)重的標(biāo)簽，而是需要確立一個合理的強弱比例。盡管每個標(biāo)簽都可能有其重要性，但根據(jù)其權(quán)重和優(yōu)先級順序，應(yīng)賦予各個標(biāo)簽合理的比例。綜合考慮標(biāo)簽的重要性和數(shù)量分配，以確保用戶可以快速準(zhǔn)確地獲取所需信息，同時保持界面整潔和易于閱讀。

1）標(biāo)簽體系改動的對比

通過“形-色-字-構(gòu)”的維度建立起統(tǒng)一的標(biāo)簽構(gòu)成形式，然后根據(jù)不同的強弱層級確定標(biāo)簽的形態(tài)。結(jié)合之前的標(biāo)簽權(quán)重層級排序，就可以得到新的標(biāo)簽體系。

2）標(biāo)簽體系應(yīng)用的對比

統(tǒng)一各場景中用戶對標(biāo)簽價值的感知。

四、沉淀設(shè)計規(guī)范&搭建協(xié)同機制

1、提煉共性沉淀設(shè)計規(guī)范

在確定了標(biāo)簽的構(gòu)成形式并明確了各個場景的標(biāo)簽使用規(guī)則后，我們需要從標(biāo)簽形態(tài)/尺寸/圓角/間距/字體/使用場景等多個維度出發(fā)，制定標(biāo)簽的設(shè)計規(guī)范，從樣式&場景應(yīng)用上規(guī)范后續(xù)標(biāo)簽的增刪改，以提升全場景標(biāo)簽的統(tǒng)一性。

2、搭建標(biāo)簽體系建設(shè)協(xié)同機制

標(biāo)簽體系由多個標(biāo)簽組成，牽一發(fā)而動全身。因此在構(gòu)建健全的標(biāo)簽體系時，需要從人、交付物、協(xié)同關(guān)鍵節(jié)點三個方面建立協(xié)同機制，共同推動標(biāo)簽體系的持續(xù)優(yōu)化和發(fā)展。

人：不同角色需密切合作，共同理解標(biāo)簽的重要性和功能，確保標(biāo)簽體系連貫有效。

交付物：需求文檔和設(shè)計稿標(biāo)注至關(guān)重要。需求文檔應(yīng)明確描述標(biāo)簽在體系中的含義、特征、排序和權(quán)重層級。

協(xié)同關(guān)鍵節(jié)點：建立覆蓋多方的協(xié)同機制，以確保在關(guān)鍵節(jié)點，標(biāo)簽體系得到合理建設(shè)和完善。

寫在最后

平臺標(biāo)簽的重點不僅應(yīng)在樣式上符合用戶對該標(biāo)簽的心智認(rèn)知，且標(biāo)簽的視覺權(quán)重順序也應(yīng)該正確符合平臺&用戶的訴求，保障各標(biāo)簽?zāi)茉谟脩舻臎Q策路徑中起到高效正確的引導(dǎo)。對于標(biāo)簽系統(tǒng)來說，規(guī)范的構(gòu)成形式應(yīng)對全局標(biāo)簽的構(gòu)成起到統(tǒng)領(lǐng)作用，良好的共建機制保障標(biāo)簽體系在業(yè)務(wù)發(fā)展的各個階段始終保持統(tǒng)一有序。

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

評論(0) 瀏覽(856)

« 1 ... 114 115 116 117 118 119 120 ... 934 »

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn

首頁

分類

日歷

鏈接

個人資料

存檔