表格作為組織整理數據的手段，可以有效的向用戶展示數據信息，是B端產品中出現最高頻的模塊之一。

下圖為典型的B端表格示例：

 

用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化（關聯和區別）。好的表格信息展示設計，應當是能夠輔助用戶高效便捷的實現以上場景中的訴求。

今天我們就來討論表格設計中一個重要的問題——【應該如何考慮表格信息展示】。首先拋出結論，我們認為良好呈現信息的表格應當做到疏密適度、高效掃視、精簡克制。 

 1

一、疏密適度

常見的表格信息包含文本、標簽、狀態樣式、數值統計圖表、關鍵信息Icon等。表格單元格是信息填充的基本單元，行高和列寬的定義決定了表格信息的疏密程度，進而決定了表格給用戶的直觀感受，因而下面分別從行高和列寬兩個方向來探討表格信息展示如何疏密適度。

 1

1、定義合理的表格行高

a、行高模數設定

在具體設定表格行高時，由于表格中以文字信息為主，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設定為字號的1.2~1.8倍，文字與分割線間距離可以設定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發同學寫代碼時的習慣（多行行高同理去設定）。

 

根據用戶場景的不同，來選擇模數倍數，需保證系統內使用統一的模數。比如，針對用戶快速瀏覽獲取大量數據場景時，可以選擇1.2倍作為模數，列表更為緊湊，同樣掃視范圍內，可獲取更多信息。

 

b、為小屏幕考慮一屏顯示的行數

表格行高決定屏幕內能呈現的行數，即用戶在一屏內能獲取信息的數量，主要影響用戶縱向對比數據的效率。對于1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數的感知不強，但對于1366×768、1280*720等這類小屏，顯示行數有限，用戶進行縱向數據對比的效率就會有所降低。在設計前，應當充分了解目標用戶的行為訴求，了解目標用戶設備屏幕分辨率的占比分布情況，有針對性的設置行高。

 

c、用戶自定義行高的場景

B端產品的特點之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。比如個人視力的原因，有些用戶喜歡表格行高值大一些，看起來舒適透氣，便于閱讀。而有些平臺用戶由于很熟悉線下excel表格模式，希望線上的表格也盡可能像excel那樣緊湊，以便他們在一屏內看到更多的數據，進行對比，提升工作效率。產品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設置開放給用戶，建議不是完全開放給用戶去調整尺寸，而是給出一定階梯度的快速選項，例如舒適、標準、緊湊三種高度來滿足用戶需求。

例如，Gmail提供默認/標準/緊湊三種表格密度設置，如圖：

 1

2、靈活擴展的橫向空間

通過對表格固定位置與列寬的調整，擴大表格數據空間，使信息不局促，空間更透氣，保證橫向掃視易讀性。

a、列寬極限值設定

設計師需要根據表格承載內容定義表格的列寬，應包含最大/最小/默認列寬的定義以及使用規則。

我推薦的一個規則是：

規則1：當相對列少【瀏覽器寬度-頁面其他模塊 > 全部列的默認寬度和】，則各個列自動等比拉伸，撐滿屏幕；

規則2：當相對列多【瀏覽器寬度-頁面其他模塊 < 全部列的默認寬度和】，則出橫向滾動條，每列寬度為默認寬。

另外需注意最小值設定時應避免信息展示出現【對聯式表格】。對聯式表格最大的問題在于，一屏內展示的行數有限，當用戶縱向對比數據時，需往復滾動多次，記憶壓力大；橫向掃視時，閱讀視線不能一直保持左右橫向預覽，而是不停上下左右切換，使用體驗不佳。

 

b、橫向『偷取』屏幕外空間、行高模數設定

當壓縮列寬也無法在有限空間內展示大量的數據指標列時，我們可以借助橫向滾動來『偷取』屏幕外更多空間。橫向滾動需用戶拖動滾動條進行瀏覽，有一定操作成本，所以要結合業務實際情況選用是否利用屏幕外橫向空間。

隨著行和列的增加，用戶的瞬時記憶會達到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內的數據，防止遺忘某列數據的意義。因而當表格數據列較多橫向滾動時，建議為用戶固定重要信息列，如標題列、操作列。同時用戶瀏覽表格時是符合F型掃視原則的，建議固定列顯示在表格左側，方便用戶從左至右瀏覽數據、從上至下對比數據時能夠清晰定位當前所瀏覽數據的主體是什么，同時可根據需要快速發起操作。

 

同理，用戶拖拽縱向滾動條來閱讀數據時，可固定表格的表頭，幫助用戶在閱讀過程中清晰知曉單元格數據的意義。

 

c、用戶自定義展示信息

針對需展示大量數據的情景，我們除了【偷取】屏幕外空間外，可以根據B端產品提供的數據表格是覆蓋全部用戶角色的全量數據的特點，讓不同用戶角色來自定義想要瀏覽的信息，從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能，用戶可根據需要選擇展示的數據列，系統將在用戶完成選擇后，主動幫用戶保存自定義內容，下次登錄后，表格依然按照用戶定義的數據來展示。

 

1 

二、高效掃視

無論是在表格中要明確的定位數據，還是順序閱讀，高效掃視都是B端用戶一個很重要的訴求，我們在設計表格時可嘗試一些有效手段提升用戶瀏覽獲取信息的效率。 

1

1、合理的對齊方式

數據信息本身包含多種格式，可遵守一個基本原則即文字左對齊，符合從左到右的閱讀習慣；數據信息右對齊，方便數據大小的直觀對比。

具體對齊方式可參考我們建議的方式：

文本字段：可點擊字段、普通文本類、數字、字母等，長短參差不齊，左對齊；

格式化字段：日期、時間、部分枚舉類等，字符數一致且較短的，左對齊。

數據字段：金額、數據、百分比。帶小數點等數據，方便對比為主，右對齊。

 1

2、去除視覺雜音，強調對比關系

a、正確使用分割線，實現對表格行與列的強調

橫向分割線可強調行內信息的連續性。垂直分割線在縮減元素之間的距離后也能區分不同元素，更好的強調縱向數據對比。但只要遵循良好的對齊方式，通常不展示縱向分割線，避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割，提升表格閱讀效率。 

1

b、斑馬線作用有限

斑馬線即隔行（列）變色。它能讓行（列）間界限更為明顯，但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如針對不同類型的數據（如總和、平均值）使用不同底色來區分，可以更突出強調該數據。要注意的是，隔行（列）換色的兩種顏色不能反差過大，否則看來太“跳躍”。

對同一類數據而言，分割線就已經能夠明顯區隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態，強化橫向導視，避免出現列數過多引起數據錯行的問題。

 

1

3、突顯重要內容的視覺重量

前面我們提到表格呈現的數據信息除文本外，還有其它一些可視化數據?？梢暬环矫嫣嵘肆斜硪曈X表現力，增加差異化，另一方面讓內容更加突出，提升閱讀效率。例如：數據列中數據異常時，最好可以醒目的形式突顯，讓用戶一進入頁面就能快速注意到異常狀況。

 1

三、精簡克制

體驗好的表格一定是克制的，克制應表現在信息的適度隱藏以及內容折行與截斷展示原則。

 

1、適度隱藏信息

a、隱藏低頻操作

當表頭需要承載排序、表頭篩選、提示等功能時，不建議一股腦的將所有功能展示出來。用戶對表頭的訴求是定位數據指標﹥執行操作的，因此可根據具體業務定義展示哪些操作，將其它操作隱藏，有需求時用戶主動觸發再展示。比如，百度搜索推廣平臺的推廣管理頁面提供了全局篩選，所以表頭篩選對于用戶而言是相對低頻的操作，我們選擇隱藏表頭篩選的圖標，當用戶鼠標HOVER表頭單元格時再展示。

 

對于表格行內的操作我們也應當進行優先級排序，為用戶專門設置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關數據單元格中，用戶有訴求時hover對應單元格即可快速發起操作。

 

b、隱藏輔助信息

表格中的有些數據指標是綜合緯度的，當用戶關注點定位于該指標時，需要通過細分數據來理解、分析。指標的細分緯度信息雖能起到輔助用戶更好理解數據指標的作用，但如果全部拿出來在表格列展示，會讓表格變得臃腫不易讀，此時可以考慮采取一定設計手段去隱藏這些信息，把觸發展示的自由度交給用戶，也更符合用戶逐級查看的場景。例如，百度搜索推廣平臺中關鍵詞列表中，質量度指標是由多條數據共同決定的，我們采用了將細分指標聚合在氣泡卡片中，當用戶HOVER質量度得分數據時展示出來。

 1

再比如，有父子層級關系的數據，可以通過父子折疊表格將子信息默認隱藏，用戶根據需要，去展開查看詳細的子信息。

 

2、設定折行與截斷規則

B 端業務的數據信息復雜多樣，信息內容的長度高度是多樣不可控的，很多內容會超出我們限定的最大列寬，最大列高，我們應當給出折行與截斷原則去約束內容的展示，而非總是為具體情況而做特殊設計，破壞體驗的一致性。

截斷折行原則設定時要細分，不能簡單粗暴的一刀切，比如一行截斷這種，如日期、時間等固定格式內容，拖動列寬后文字應折行而非截斷展示，避免影響用戶誤讀。再比如很多業務實體標題字段是格式化的，即標題前面部分可能都是一致的，這時候如果簡單的截斷，用戶就需要逐一Hover才能找到定位到要找的數據。因而折行與截斷原則，我們建議是給出三種：單行截斷、雙行截斷以及自適應截斷，根據具體業務情景選擇。

 1

總結

我們今天集中討論了應該如何考慮表格信息展示，并總結了如何做好表格信息展示，即遵守【 疏密適度】、【高效掃視】、【精簡克制】三原則，并結合業務特點以及目標用戶場景，設計高效易讀的表格。

最后，感謝你花費寶貴時間閱讀這篇文章，希望可以給你帶來一些啟發。我們非常期待我們的思考和一些小經驗能夠幫助你去設計滿足你的業務場景的表格，也可以通過這些方法和步驟，創造屬于你們團隊自己的設計資產。 

也歡迎加入MEUX,視覺/交互/用研

可投簡歷至MEUX@BAIDU.COM

(注明信息獲取來源如：公眾號）

如今設計師不再僅僅作為一個需求的接收方與執行方，職能更加的全面，在整個產品設計研發流程中也需要我們有更強的參與度。最近工作中得到一些設計同學的咨詢并參與圍繞著一些項目中的問題進行討論，比如：項目協同與執行的過程中總感覺節奏亂？對于項目缺乏整體的規劃、每次設計過程中付出的成本很高。對結果驗證時發現不論設計質量還是效率都還有很大的提升空間。設計感覺做的不錯，但項目中的角色話語權不高？多個項目并行不知如何管理操作，有無標準方法，怎么從中創造更大的價值？本文結合日常項目管理當中的一些思考與方法，帶大家了解設計師需要有的項目管理意識。

a

01.好的設計能不能管理出來？能收獲什么？

首先，我們思考一下，管理是什么？其實簡單來說更像是很多標準化、流程化、格式化的方式方法組合，輔助我們更好的達成目標，并為整個設計團隊構建一個基礎的工作體系。項目中穩定與高效輸出都來自于更加科學的管理。設計師鏈接上下游部門，也需要通過管理來解決諸多設計以外但與設計有聯系的事務。對于我們的收獲部分可以大致分成以下三點：

· 目標達成層面

引導促成整個產品/項目的目標高質高效達成，使之利益最大化。

· 視角變化層面

能夠讓我們視角產生改變，能夠更全局看待問題，讓自己有大局觀的同時更加擁有結構化的思維。

· 影響力與服務能力的提升層面

在項目中角色話語權提升，在團隊內外有更高的影響力

a

02.項目管理我要管什么？

設計師運用項目管理的方法，個人認為最基本的就是要合理的規劃與控制，管人管事，且貫穿在整個項目流程當中，以下幾點其實我們可以重點關注。

我們工作當中實際參與的流程，基本可以歸納為啟動階段、計劃階段、執行監控階段、收尾階段。

· 啟動階段

在這個階段經常會使用到6W2H方法，它有助于我們思路的條理化，杜絕盲目性，所以此方法能夠快速幫助我們確定目標、里程碑、項目成員以及合作模式，例如在此前的二手車大類頁改版等大型改版項目中都有所使用。

· 規劃階段

需求的梳理、排期、以及任務拆分、資源協調。我們可以嘗試使用STAR模型來操作。而這部分在車業務的內部設計需求中也是在iWiki常態化留檔的，以SITUATION（背景）,TASK（任務）,ACTION（行動）,RESULT（結果）幾個維度構成表的基本結構。

需求規劃完畢需要考慮的就是內部資源協調，在專職項目、動態項目、創新項目中協調的原則上可以是：擅長人做擅長事，挑戰與執行并存，提效最大化，成長最大化。

· 執行監控階段

在此階段，我們可能會遇到以下一些問題，產出效率不高、質量不高、反復修改或項目推進緩慢影響業務目標。這些情況或風險在很多項目當中都存在，風險并不一定是壞事，而風險大多數都是可以預測和管理的，我們可以多使用WWH模型和STAR模型結合的方式快速的輔助我們思考、記錄、評估、計劃、調整。在落實的時候我們會使用到iWork工具進行需求的變更、說明、同步，包括后續的進度跟蹤與回溯，在項目的管理上非常直觀易用。

· 收尾階段

對于該階段質量控制方面，我們引入了更規范的走查文檔、共建集成體驗環節、以及全職能自查環節。常規的設計走查介入方式如下：

改變走查方式之后，增加集成體驗環節與每個節點中的輸入輸出內容，保障每次項目的最終落地質量。

在收尾階段從項目管理的角度來說另外一個希望提及的是，除了事前有規劃、執行有控制、更要注重事后收尾有總結。雖然每一次的項目可能過程會有一些不同、結果目標不同，但是我們在總結復盤的過程中一定要做到以下幾點：

1.拒絕形式化，避免假大空反思

2.具備借鑒意義

4.對應解決方案，具體落實到人、功能范圍、時間等

w

03.聊聊其它

其實我們可以發現既然是要去管理項目，在每個節點里溝通是非常重要的，可能很多設計師都會遇到一些溝通方面的問題：效率低、無結果、懼怕溝通。其實多數就是在信息通過傳輸渠道、媒介的時候，發送者與接受者在各階段所暴露出的不同問題，如下圖：

· 我們可以怎么做呢？大家可以多從以下幾點去思考

1.溝通前的思路整理以及相關案例或設計理論的支持

2.對齊溝通方的關注點與信息交集

3.靈活正確的處理意見與分歧，開放心態、開放式話術、氣氛控制、善用詢問等

4.總結與使用流程管理進行規劃

5.建立設計師個人品牌可信度

以上為對日常設計項目管理工作的一些個人理解，大家可在實際的項目當中靈活應用，如對項目管理方面非常感興趣的同學也可以去看看PMP相關知識，也歡迎入群多多交流。

原文地址：58UXD（公眾號）

轉載請注明：學UI網》設計師的項目管理意識

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

01.契機

每一個偉大的項目背后總有一個必要的契機和一個有趣的故事，而我們的故事是這樣開始的。

在我們團隊設計師之間經常會聽到這樣一些問題：

1、這個項目是誰做的？有沒有源文件？
2、這個產品是設計規范是什么？我這樣做符合規范嗎？
3、之前那誰誰離職了，文件誰能找到？

總體說來就是設計文件管理難，規范一致性統一難，設計師對接協同難

在技術同學之間也會存在一些問題：

1、這部分代碼是誰寫的，怎么這么亂？
2、技術框架已經落后了，我們現在不這么寫了，再優化也沒有價值，我們計劃重構代碼
3、大量重復的UI還原工作，研發變身”切圖仔”
4、明明是按照設計稿還原，設計同學總說差1px

而在產品側的問題卻是這樣的：
每次都做了很多重復的事，我們版本需求量太有限了，這些問題大大影響了產品節湊和業務擴展的要求。

我們在工作協同開發過程中，一直缺少一個連通器，導致產品、設計、技術溝通協作不便，設計和技術規范落地較難。同時因為缺少容器承載導致各種資源和文件共享不便。因此使得我們重復設計和重復開發內容較多，影響了我們版本需求的吞吐量。

對于一款成熟的產品來說，夯實設計與技術的框架基礎地基，這樣才能助力我們在上空蓋更壯麗的樓閣，基于這種契機，我們希望做一次徹底的改變

1

02.故事

生逢亂世總有一些拯救世界的英雄出現。當我們帶著想法和前端專家“存哥”一起聊的時候，沒想到我們雙方的想法不謀而合，甚至在細節和方向都出奇的一致。經過幾次深度的協商溝通，我們快速制定了解決方案，同時招募研發團隊，快速的開展項目，帶著激情與理想，「58UXD」與「前端技術委員會」發起了共建項目「風火輪」。

主要通過兩方面來解決問題：

設計插件提效：通過Sketch插件進入設計師的工作流程，聚合設計資產，解決設計規范落地、設計資產可視化承載，提升設計規范和設計資產的使用率，增強資源共享避免重復設計。

設計協同管理：通過風火輪協作平臺進行團隊資產、項目管理，實現設計稿在線標注解析，供研發同學在線查看研發。

在這里有的同學就會說，這不就是做了一個藍湖嗎？

那可就想簡單了，我們的終極目標是：“把設計稿變成終端代碼”。通過智能解析，將設計稿自動化解析生成代碼，提升產研效率。

那么背后的邏輯和我們的思路又是什么呢？

3

03.代碼生成

在我們集團設計師Sketch的使用率高達90%，因此我們選擇了Sketch作為UI自動生成代碼的設計源，通過Picasso解析工具進行智能解析，高精度還原設計稿，支持多種代碼格式，滿足各種場景需求。

設計稿生成代碼的主要流程如下圖：

設計稿生成代碼的實際效果展示：

為了提升操作效率，我們將Picasso工具在風火輪協作平臺直接內置，這樣設計師上傳設計稿交付需求的同時，風火輪自動將設計稿轉換成代碼。代碼生成的UI界面與設計稿幾乎完全一致，并且代碼的可用度高，生成代碼的結構布局合理、可維護性高，提供了兩種模式: 專注于高精度解析的運營版和專注于代碼可用度的普通版，并且支持多種格式、尺寸的切圖，導出來滿足不同平臺、不同尺寸屏幕的需求。

為了保證智能解析代碼的還原度，我們通過以下幾個方式來處理解析問題：

1、還原度計算—感知哈希算法

我們將自動生成的UI頁面通過puppeteer進行截圖，通過感知哈希算法與原圖進行像素對比，計算出生成頁面的真實還原度。

2、樣式解析-漸變解析方案

在漸變處理方面，首先根據漸變類型分為線性漸變、徑向漸變、環形漸變三種，然后根據漸變值、位置等信息計算漸變方向距離及漸變節點之間的比例，最終生成漸變樣式代碼。

3、圖片處理—精準切圖方案

為了精準還原圖片，我們通過調用sketch API進行圖層截圖的方式，計算不規則圖形的精準位置及大小，精準切圖是保證我們的高精度還原頁面的關鍵；

為了保證智能解析代碼的可用度，我們通過以下三個方式來處理可用度問題：

1、結構重組

由于設計同學輸出設計稿是以視覺為主，不太關注分組結構的合理性，因此我們需要將原有的分組去掉，按照符合開發習慣的方式進行重新分組。

2、特征分組

針對列表這種重復結構的場景，我們通過特征分組算法識別相似結構，減少代碼重復，提升生成代碼的合理性

3、樣式優化-樣式精簡、樣式排序

樣式精簡及排序，使得生成代碼更貼近工程師”手寫代碼”，代碼可維護性更高。

w

04.能力與規劃

我們做一下回顧，20年12月30日成功將「風火輪」研發上線以來，歷經7個月的時間，用戶覆蓋了集團85%的產研團隊，并且覆蓋了大多數的子公司。Sketch Plugin以容器的形式承載了6000+的設計資產和14調業務的設計規范，智能生成了1500+代碼。

風火輪上線7個多月的時間，經歷的3次版本迭代，上線核心功能點20+；風火輪插件發布了2個大版本，20多個小版本迭代，快速解決了100+的線上BUG，不斷完善功能和優化體驗。并且建立了完善的用戶反饋機制，以最快的的方式解決用戶訴求。

目前為止我們生成代碼覆蓋了常見終端代碼格式：Web、Mini Programs、React Native、Flutter、iOS、Android等。代碼解析還原精度達99.8%，生成終端代碼可用度85%（目前行業頂級）

在未來我們要以解放生產力為目標，繼續深耕從設計到代碼的路線，以風火輪為媒介，將產品、設計、開發緊密的連接起來，為我們內部協同發光發熱。同時也歡迎更多的設計師和研發工程師加入我們，共同構建風火輪生態，編寫故事的下一篇章。

原文地址： 58UXD（公眾號）

轉載請注明：學UI網》把設計變成終端代碼｜風火輪背后的故事和規劃

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1.企業不是學校 

很多同學工作后一定要明白，企業不是學校，職場也不是學校，公司招你過去是希望你給公司帶來價值，對設計師定位一定不是學生，好的企業可能會有很多內部培訓，學習的機會，但是一定是靠你去主動學習。

這也是職場的潛規則，工作越久越會發現，很難有人會毫無保留的教你，如果我們一直處于學生思維，只會在職場中失去好的機會。職場上的學習，一定是主動的。

學生時候我們學習是被動接受，老師教什么，我們學什么，但是職場不一樣，一定要從“被動”改為“主動”，公司會有很多內部培訓，學習資料，但是學習一定要記得是自己的事情。

好的公司會有體系化培訓，相當多的公司是不愿意付出培養成本的。比如之前在阿里，內部很多設計培訓、課程，但是大家都主動去報名學習，沒有人逼著你一定要學，大家時間都是一樣的。所以從“被動學習”到“主動學習”是新人設計師職場進階的第一步，現在互聯網上學習資源那么多，無論我的星球，還是各種教程，只要你想一定能學到，關鍵在于你自己意愿是否足夠強烈。

a

 2.掌握正確的學習方法 

上圖就是我們大多數學習狀態，每周學下AE，學下C4D，然后三天打漁兩天曬網，最后會發現，都學的很一般，沒有一個學的很精通。

聚焦學習，單點突破

正確的學習方法是什么，是單點擊破，橫向拉通，我們要聚焦學習，一段時間只學習一個知識點，比如你最近學AE，就花精力把這個技能徹底掌握，再去學下一個，我把這個叫100小時刻意練習，我在星球里，也是帶著大家這樣去學習知識點。當你學習一件事情持續100小時，每天3小時，堅持3個月，你會比90%人都要學習的好。

考慮投入產出比

學習的目的最終是要學以致用，現在大家每天工作本來就很忙，如果毫無目的地學就沒有意義了。一定要考慮投入產出比，要根據自己的規劃去學。

比如你未來是走體驗設計師的方向，那么你就應該學技能樹里面相關的內容，比如數據研究、交互知識、產品思維、商業思維這些維度，這些方向是未來幫你邁入新的臺階需要具備的能力。

w

3.性格上一定要有「要性」

阿里有一個詞叫「要性」，什么意思呢，簡單的說就是對一件事物的渴求程度。作為設計師也是如此，無論我們學習，做項目，還是工作上，都需要有這種精神。

要性決定判斷

我們今天接到一個項目，判斷這個項目好好做一定會有很大的市場反響，比如我做雙11這個項目一定會被上億人關注，那么我判斷這個事情價值后，我會很拼，會拼盡全力做好，因為我知道這個事做好后帶來的價值，假如我沒有那么強渴望這個事情，或許我就當一個普通項目，也不會去判斷它的價值，說不定就錯過了提升和磨練的機會。

判斷決定行動

要性能決定我們的判斷，假如我判斷這個事情一定要做好，做好后可以發到behance，或者放作品集里面。那我的行為也會跟著變成正向。

工作多年后，其實對于加班不加班，其實很好衡量，這個事情加班做好對你晉升、對你成長有沒有好處，如果有自發都會去加班，如果這個事情就是一個投入產出比不高的，我可能就會去另外更有價值的事情。要性決定我們的行為。

同樣個人學習也是一樣，如果你渴望掌握它的欲望足夠強烈，那么根本不需要人督促你，你都會自發去學習。這就是信念的力量。

行動決定結果

4.當你沒優勢的時候，唯有勤奮 

每個人都想去大公司，去做優秀的產品，但是光有想是不夠的，最重要是去做。能在夏天做的事情就在夏天完成吧，不然到了秋天，它就黃了，到了冬天，它就涼了……

w

想不等于做

w

充分利用工作外的8小時

所以在我們起跑線比較低的時候，沒有學歷，沒有知名項目，沒有大廠背景，唯有勤奮，上班時間8小時，大家都是被項目纏住，重復利用下班和周末時間，不斷去提升專業技能，唯有勤奮你才能有彎道超車的機會，我們這一行和其他行業不一樣，沒有任何捷徑，如果有，很多人都去嘗試了。

o

學會曲線救國

大公司招人都是有標準的，有些崗位就是有鄙視鏈的，比如喜歡招知名公司背景，海外的，年輕有潛力，做過知名APP的，如果簡歷上沒有這些很難進去的。但是就因此放棄么，當然不是。

學會曲線救國，我沒有知名項目，那我是不是提升我專業項目，爭取去一個規模小點公司，積攢知名項目案例，比如每年TOP100的應用榜單，里面其實很多小而美的公司，先去這些公司鍛煉好了，再去二線公司，再去一線公司，循序漸進往上走。

不要一根筋的，在毫無背景、毫無資歷情況下去碰壁，試想你是大公司人，你是不是也想招一個被市場驗證過，有過同樣公司背景和項目的設計師。

5.設計師推動力是帶著方案 

q

左手藝術，右手科學

t

讓決策者做選擇題，而不是判斷題

提案也有很多技巧，后續再和大家分享，但是很重要一點就是提案時候，不要給領導太多的方案選擇，很多設計師很容易犯的錯誤就是，提案時會放一堆方案給領導看，讓領導做決策，這樣最終結果還是繼續改下去。

6.你的一招鮮就是你的競爭力 

什么是競爭力？人無我有，人有我全，如果你在一個幾十人團隊，怎么能被領導記住，一定是你具備其他人不具備的技能，或者你這個技能在你們團隊是最好的。任何時候，設計師具備一招鮮的能力，都會很吃香，你可以想下你的團隊，那些備受領導喜歡的設計師是不是都具備這個特征。

每個人都想成為主角，團隊核心，怎么做到，就是某個專業能力上，設計總監或者主管有事情第一個想到就是找你來完成，那么就成功了。

q

7.打造自己的標簽 

w

第一個：專業標簽

專業標簽，毋庸置疑也是最難的，大家對你專業上評價怎么樣的，哪方面是你特長，在主管心中是很一般，還是說UI上是你優勢，數據是你優勢，你需要自己給自己定位好，假設你想讓別人覺得數據分析是你專業標簽。

o

第二個：性格標簽

性格標簽很好理解，你在大家心中是個什么性格的人，活潑的，有才華的，有魅力的，吃貨還是內向的，職場上人和人之間關系很微妙，雖然不提倡站隊，但是這種事情哪里都少不了。

那些性格活潑開朗，比較玩的開的，往往容易受歡迎，所以你要問自己，你希望在大家心中是個什么樣性格，是內向的老黃牛，還是吃貨一枚，還是美食專家。你需要建立一個性格標簽，去和身邊的人情感上維系。否則很容易職場上吃虧，和主管沒有共同語言，沒有尿到一個壺里，那你后面晉升，漲薪股票，或許也沒你什么份。

w

第三個：沒有無緣無故的愛

和同事之間多去培養一些共同的愛好，在互聯網公司做事情，很多事情其實難的不是事情本身，而是人的關系處理上，在大公司的同學應該很能體會。

 w

最后 

這是我所總結出來的一部分職場心得，或許和設計無關，但是在我們工作中卻尤其重要，希望今天的分享你會喜歡。

00.【前言】

現在我們在目標導向流程的第一個部分：研究。

我是從0開始、系統講解用戶體驗設計方法的CC～

上周說完了決定是否購買的客戶之后，我們就需要聊一聊，購買了以后真實使用產品的用戶——也就是我們常說的【關注點為用戶的訪談】。

01.【用戶是誰？】

這個人是親自使用我們產品的人，也就是【現有用戶】。

是更能對我們的產品提出有建設性的優化意見的人。

問題

那么問題來了：

“如果說我們的產品還沒有進行發布，或者說我們還沒有明確的使用我們產品的用戶，這個時候應該怎么辦呢？”

仔細思考一下，在推廣一個物品的時候，我們一定會有一個目標的用戶也就是說這個產品的潛在用戶。

他們現在雖然沒有使用這款產品，但是后期他很有可能去使用這款產品。

就比如說線下進行美術教育活動的學生是否也有可能在后期的過程當中接受線上的教育呢？

這肯定是非常有可能的！

就像我們現在的疫情發展，會讓很多學生出于安全考慮，去更多的接受線上教育，避免人流繁雜的線下課堂。

在此之前，我們就該認識到，這些孩子就是我線上教育的潛在用戶。

總結

【現有用戶】以及【潛在用戶】，這兩種用戶都是我們可以對產品進行優化訪談的重點人群。

02.【用戶要什么？】

如果我們賣一款洗發水，那我們就需要去訪談使用這些洗發水的用戶的真實感受。

【香味是否好聞？】【去屑能力如何？】【使用感受如何？】等等……

在前期我們首先需要了解的就是我們這款產品對用戶生活產生的影響。

訪談用戶會在什么時候，什么原因來使用一款產品、用戶的期望是什么？

需求

如果用戶所說的需求是：“在夏天的時候我希望能有一款產品能讓我在很熱的時候放松和清潔自己，并且達到清爽怡神的目的。”

那我們就需要去考慮針對用戶的生活需求來劃重點。

Q：用戶想在什么時候使用？

A：夏天。

Q：什么原因使用？

A：覺得很熱想要清潔放松。

Q：用戶具體的關鍵要求是什么？

A：清爽怡神。

我們就可以針對用戶的這幾點需求，圍繞著這幾點需求去考慮，一款什么樣的產品能夠帶給用戶這樣的體驗呢？

解決方案

我們可以采取添加薄荷元素或者是清新的香氛元素來達到放松清爽的感覺等等等。

后續的開發過程就是我們需要提煉用戶的關鍵需求，讓它成為一款對用戶有用的產品。

這就是一款有針對性的產品。

03.【產品的用戶針對性】

當然洗發水這個例子是我們生活中非?；镜纳铑I域的產品。

還有很多在用戶領域知識之外的產品，也就是用戶完成這個工作必須有需要知道的信息。

要從用戶當前的這個領域知識出發。

如果說我們針對的用戶是小白級用戶，我們就需要將產品盡量做的淺顯易懂。

如果說我們的產品是一款專業性很高的領域性產品，我們就需要提供給專業大牛盡可能完善、準確性高、易用性強的產品。

了解用戶的任務和活動是我們開發一款產品前提。

小思考   

這時候提一個小思考了：【如果用戶告訴你的任務和活動并不是他真實的想法，或者壓根不愿意告訴你，我們應該怎么做？】

下章我們就聊這個吧～

我是cc~下期繼續帶你系統學習用戶體驗的基本方法。

原文地址：達芬奇的火柴（公眾號）

作者：CC本人

轉載請注明：學UI網》用戶體驗 | 與用戶交流，我們是認真的

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

#01。Willian Santiago  

#02。Fran Labuschagne

#03。Abbey_lossing

#04。Danielbarretoes

#05。Levysfriends

#06。Laborregaviuda

博客地址：

https://www.instagram.com/laborregaviuda/

個人介紹

https://ballpitmag.com/portfolio/laborregaviuda/

 

#07。kazuhisauragami

Kazuhisa Uragami 是來自日本東京的插畫家。他的作品從風格手法上就可看出極具日本文化特色，色彩像素化表現，讓人印象深刻。

博客地址：

https://www.instagram.com/kazuhisauragami/

最后想說的是：插畫能帶給我們不一樣的情感體驗，是我們的內心世界和我們周圍的現實之間的紐帶。通過插畫我們喚起情感連接，表達想法。喜歡插畫的小伙伴們，趕緊畫起來。

好了，今天文章就到這，下期見~

轉載請注明：學UI網》你絕對想不到，這波寶藏插畫師的博客究竟有多好！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

01 音視頻娛樂新形態

挖掘更好玩的娛樂社交場景，能帶給用戶更愉悅的體驗。疫情期間，線下聚會因此受限，線上娛樂應運而生，在此契機之下，期望借助音視頻實時互動、聲影重現的特性，開啟了新的娛樂形態——QQ一起派對。

觀察競品普遍存在不足之處，即缺乏真實聚會游戲的氛圍與互動。因此，解決社交游戲產品缺少真實情境的問題，成為QQ一起派對的創新機會點，有利于在競品中突圍，塑造差異化優勢。

02 打造真實聚會游戲體驗

2.1 回歸本質，突圍創新

QQ一起派對是基于音視頻展開的線上聚會游戲，結合了實時互動與娛樂化內容。為了讓游戲過程更貼近真實聚會場景，我們從游戲氛圍和自然交互兩方面切入，尋找創新突破口。

游戲氛圍

構建適用于游戲類型的界面框架，讓線上聚會更貼近真實世界，并運用視覺感染力，營造環境氛圍，包括場景具象化、增強代入感等方法，實時感知好友的情感變化，從而獲得社交臨場感，在心理上感到彼此的存在。

自然交互

有別于競品需通過點擊按鈕作答，QQ一起派對利用實時語音識別，讓用戶通過更自然的人機交互方式，在游戲過程中進行語音搶答，彷佛置身于真實世界中與好友互動，成為QQ一起派對的獨特賣點（Unique Selling Proposition）。

綜上所述，QQ一起派對的設計要素包括：、

1. 社交臨場感（Social Presence）：場景具象化、高度同步實時響應、感知他人情感變化

2. 沉浸感（Immersion）：營造氛圍、增強代入感、突出內容與主角

3. 可玩性（Playability）：游戲界面、游戲機制、游戲互動

4. 凝聚力（Cohesion）：將好友聚在一起、吸引更多用戶來玩

2.2 游戲界面設計

舞臺場景化布局

QQ一起派對能讓用戶創建房間，邀請好友參加線上聚會，促使游戲氛圍具象化。游戲類型聚焦于〝你演我猜〞、〝明星問答〞等猜題游戲，為了增強代入感，讓用戶融入情境之中，我們采用舞臺表演的界面隱喻（Interface Metaphor），借由深色背景突出內容與表演者。界面框架選擇一個大畫面與多個小畫面的組合，更貼近輪流上臺表演的游戲類型。通過舞臺場景化布局，模擬線下互動的真實感。

多層次感官體驗

我們真實還原了線下搶答的互動體驗，通過倒計時動效、實時分數標簽，以及搶答成功反饋，增添游戲的緊張感與刺激感。

在游戲過程中，除了通過視頻畫面感知好友的情感變化，用戶的語音狀態也會實時反饋在頭像上，響應搶答題目、好友交談，以及各種表達情緒的聲音，借著聲音視覺化的效果，搭配視頻與人聲的重現，交織出多層次的感官體驗。

邀請消息實況化

發送邀請是召集好友的重要途徑，而作為〝邀請函〞的消息，需要傳達明確的信息，讓用戶一眼就能感知房間內的狀態，包括準備開始、游戲中、游戲結束等，避免用戶點擊加入游戲時，卻因游戲已開始或結束而無法加入。為此，我們將邀請消息實況化，持續更新當前狀態、參與成員等，讓用戶能實時感知派對房間的變化。

03 拯救孤獨，陌生人玩法登場

3.1 讓你隨時找到伙伴

排解寂寞心理訴求

QQ一起派對初期聚焦于好友一起玩，但仍不免發生創建了房間，當下找不到好友，或因等待過久而退出房間的狀況，使得創建房間到實際參與的轉化率受到影響。從用戶訪談結果來看，用戶存在排解寂寞的心理訴求，但對象不一定得是熟人好友，因此渴望找到游戲伙伴、快速開始游戲，成為QQ一起派對擴展至陌生人玩法的契機。

引入陌生人匹配

針對找不到好友的問題，我們新增了匹配陌生人的能力，用戶可從游戲大廳進行隨機匹配，倘若創建房間后找不到好友，也能在房間內匹配玩家，降低游戲參與門檻。

此外，進一步優化房間內的界面布局，將游戲卡片縮小平鋪排列，讓用戶一眼就能看到多款游戲，提升對游戲數量的感知與轉化率。在游戲類型上，新增了猜歌與知識問答兩款游戲，并提升現有題庫質量，避免游戲趣味性不足，影響用戶留存率。

3.2 游戲大廳情感化設計

搭建游戲世界觀

為了增強游戲氛圍，我們通過情感化設計帶領用戶進入情景中，讓用戶更好地理解每個玩法，并從游戲玩法與情感訴求提煉出場景元素，以此搭建游戲世界觀，并將故事情節加以推演，增強趣味性與獨特性，還能進一步提升記憶度。

利用光效聚焦視線

光效有利于吸引和聚焦視線，并以不同的表現形式來影響情緒。我們從光的色彩、動效、光感和造型等層面，創造出五種增強感官體驗的光效設計，將其應用在游戲大廳入口，借由不同的光效類型與動畫形態，強化用戶的世界觀感知。

會講故事的界面

帶有情感的故事會在記憶中發酵，引領用戶進入場景。我們將游戲入口的功能屬性，轉化為富有故事性的場景設計，當用戶被故事所吸引，多感官區域被激活，將會激發用戶情緒，有利于記憶與理解游戲入口，對游戲產生共情，進而超出產品的功能價值，與用戶建立情感鏈接。

例如匹配陌生人入口，使用QQ的IP形象駕駛UFO，準備召集用戶前往神秘的太空之旅，意味著通過陌生人匹配，你將擺脫寂寞，以光速般的速度找到游戲伙伴、快速開始游戲。通過故事劇情激發情感共鳴，并適當結合IP滲透品牌價值，吸引用戶參與游戲。

破格設計能夠加強張力、突出游戲主題，我們運用破格效果的3D圖標造型，彰顯游戲的獨特調性，樹立鮮明的品牌印象。

組件化卡片設計

組件化除了提高設計效率，還能從整體一致性考量差異化。我們將游戲卡片、題庫卡片、提示卡片和入口卡片等功能界面，構建一套組件系統，讓框架布局貫通全流程，打造體驗一致的可玩性，利于后續的擴充與延展。

3.3 生存戰增添挑戰性

激發持續參與動力

根據游戲可玩性研究，提供挑戰與磨練技巧的機會，對持續參與游戲的動機有正面影響。有鑒于此，除了提供隨機匹配、召集同好共樂，我們還設計了極限生存戰玩法，希望借著1v1淘汰賽制增添樂趣與挑戰性，激發用戶持續參與的動力，特別是年輕人酷愛這種競技感，擊敗的對手越多，獲得的獎勵就越高，有利于勾起用戶的勝負欲。

匹配動效強化氛圍

為了營造同場競技的臨場感，我們利用匹配動效強化氛圍。隨著已加入玩家的數字不斷增加，底部會實時展示用戶頭像，具象化呈現玩家數量，烘托熱鬧氣氛，消除等待時的焦慮感，讓用戶處于蓄勢待發的狀態，而紅藍對戰布局則進一步強化PK宣戰的氛圍。過程中若有玩家遭到淘汰，用戶也能通過底部頭像感知剩馀玩家數量，以此增強游戲臨場感與成就感。

增強榮譽感與儀式感

每輪擊敗對手時，答題區域將變為全屏的慶祝畫面，搭配撒花特效、頭像聚光燈，營造歡愉的勝利氛圍。而在游戲結果頁，我們同樣利用色彩和動效的差異對比，塑造勝敗雙方的情緒氛圍，以此增強榮譽感與儀式感。在生存戰登頂挑戰成功的用戶，將會站上頒獎臺授予最高榮譽，在舞臺聚光燈的照耀下，迎接光榮勝利。排行榜有助于強化擊敗眾多好手的感知，激發勝利者的分享欲。

04 結語

QQ一起派對推出后深受用戶喜愛、獲得廣泛好評，調研結果顯示，用戶整體評價相當高，也樂于將QQ一起派對推薦給好友。

綜而觀之，音視頻除了廣泛應用在通訊場景，正逐漸賦能更多創新場景，而娛樂場景更成為兵家必爭之地。QQ一起派對開啟了新的娛樂形態，充分發揮音視頻聲影重現的獨特優勢，消弭了空間距離，嘗試解決社交游戲產品缺少真實情境的問題，讓游戲過程更具臨場感，就像面對面進行游戲一般。未來將從玩法豐富性、游戲挑戰性、題庫可玩性三方面持續優化，打造更好玩的音視頻體驗。

立即打開QQ，邀請好友暢玩聚會游戲！

原文地址：ISUX

作者：騰訊ISUX

轉載請注明：學UI網》聲臨其境 | QQ音視頻娛樂社交設計

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

移動設備激增，零工經濟迅速發展，遠程工作開始興起。在疫情的影響下，幾乎每個人都成了遠程工作者。

表情符號與我們一道穩步發展，成為鮮活和豐富情感的必要交流工具。肢體語言，微妙幽默，或者環境條件——雖然我們可以親眼看到并回應這些暗示，但在網絡環境中失去它們會極大地影響我們的交流。然而，用表情符號，幾個像素就能以有趣、清晰、能引起情感共鳴的方式表達我們的想法和感受。（彩云注：這就是這項艱巨工作的商業價值）

隨著世界走向混合工作場景，面對面和遠程結合，線上交流的表達形式比以往任何時候都更加重要。微軟365里有超過1800個表情符號，我們在過去的一年里一直在努力通過創建一個自然的Fluent（流暢）系統 （彩云注：這是他們更新整套表情系統的理念）來更新它們。

我們選擇了3D設計而不是2D設計，并選擇了讓大多數表情動畫化。在接下來的幾個月里，你會看到這些產品的推出，我們想和大家分享一下，以紀念世界表情符號日。我們也很激動地推出了五個全新的表情符號，這代表著我們對工作、表達和空間的新視角。

擁抱游戲的力量

在疫情改變工作和生活之間的界限之前，交流就已經朝著真實情感和娛樂的方向發展。為了確保我們的新設計反映這一點，設計研究員Meghan Stockdale與我們密切合作，重新思考專業的圖形表達。通過主次研究，她專注于游戲概念，將其作為一種催化劑，幫助我們挖掘最好的作品和最誠實的自我。她引用了斯圖爾特·布朗(Stuart Brown)的精彩著作Play: How it Shapes the Brain, open the Imagination, and inspiring the Soul （游戲:如何塑造大腦，開拓想象力，激發靈魂），對她的有著特別地影響。

“游戲對于創造性頭腦風暴、發展和掌握新技能以及團隊建設等活動至關重要，”Meghan說，“但我們通常不愿意在工作或工作工具中給予游戲空間。由于我們工作和成年的關系，玩有時會讓一些人感到不舒服——盡管我們生來就是為玩而生的。”

因為對每個人來說，好玩或富有表現力不是件容易的事，表情符號是完美的小幫手。它們絕不是無聊或裝飾性的，而是我們人性的延伸，是重要的溝通工具。根據Meghan的研究，它們可以軟化或強化我們的語氣，為平淡無奇的互動增添樂趣，幫助我們以一種比書面文字更普遍的方式表達自己。

這張圖片展示了我們用不完美的圓來做頭部的形狀。人是不完美的，為什么我們的圖形表示要完美的正圓呢?

那么，表情符號或其他好玩的媒體適合在工作中交流嗎？游戲鼓勵創新，而表情符號則是有趣的交流者。也許文字和表情符號之間的相互作用加強了兩者的交流力量。也許表情符號的脆弱和輕松不僅可以激發我們自己的創造力，還可以鼓勵我們組織中其他人共同參與。當我們進一步進入混合工作模式世界時尤為重要，在那里我們將首次在網上見到新的團隊成員。

我們的一些全新表情符號甚至試圖捕捉這個新的混合世界。下面是一些概念草圖，我們希望能得到你的想法。

以上是我們正在創建的新表情符號的概念草圖，以幫助傳達混合工作的現實。從左到右:一心多用，靜音，不拍照，一邊工作一邊照顧孩子，穿著睡衣。

自然有趣，天生流利

在整個過程中，信任和清晰是我們的指導原則。我們希望人們相信，我們的新表情符號風格會理解到他們的意圖，反映出他們的人性。人是不完美的，我們的創意中有美，這就是為什么我們選擇了一個不完美的圓形作為頭部的輪廓形狀。

我們還密切關注表情符號中眼睛的表情，并傾向于把眉毛特征做的更加明顯。對我們來說，在保留情感意圖的同時進行設計是至關重要的。最后，因為我們希望人們相信他們并能從設計中找到令人振奮和鼓舞，我們傾向于明亮、高飽和的顏色和大膽的形式! 

通過全面利用特定的眼睛、嘴巴和頭部形狀，我們創建了一套統一的面部特征，可以縮放，同時保持一致的外觀和感覺。

為了保持不同類別的1888個表情的一致性，我們在新風格中使用了簡單的幾何形狀作為每個表情的基礎。如果這聽起來很熟悉，那是因為我們連接圖標系統的工作方式是相同的。螃蟹表情確實突出了這一點;我們用圓形和半圓形來代替解剖的表示法，造型更加簡單，從而賦予它更多的個性。

當你注意細節時，平凡也能變得不平凡。圖中的螃蟹表情符號通過大膽、美麗的顏色和厚實的圖形形狀證明了這一點。

整套表情我都喜歡，但我最喜歡的還是這只螃蟹。這只酷炫的小螃蟹體現了我喜歡我們表情符號系統的地方:它讓看似普通的表情符號都變得與眾不同。無論是螃蟹還是人類，我們的獨創性都蘊含著美。（彩云注：這就是作品中的亮點部分闡述，面試的時候講自己作品的亮點，就可以從類似這樣的角度去講，學到了?。?

最后，但并非最不重要的是，我們必須利用這個機會做出一個改變，只有我們才能真正做到——將經典標準的回形針，改了全新的3D形態。

當然，我們現在使用的回形針可能比全盛時期要少，但我們無法抗拒懷舊的吸引力。

為了讓自己煥然一新，我們忍不住把扁平的、標準的回形針變成了新造型的回形針。

表情符號正在鞏固其作為在線交流不可或缺的工具角色，你將能夠在不同平臺和設備上使用這些全新的表情符號。我們的一些新表情從今天開始在Flipgrid中上線，其余的將在未來幾周推出。在這個假日季，團隊和Windows將配備該套件，Yammer、Outlook和更多的產品將在2022年全年實現落地。

除了表情符號，我們還將在微軟365中通過更具表現力的主題、插圖、背景等，將我們的流暢美學帶入生活。但首先，我們想聽聽你的意見!你最喜歡的表情符號有哪些?如果你能成為一天的表情符號設計師，你會創造出哪些新的表情符號?

本文翻譯已獲得作者的正式授權（授權截圖如下） 

原文地址：medium

作者：Microsoft Design

譯文地址：彩云譯設計（公眾號）

譯者：彩云Sky

轉載請注明：學UI網》被刷屏的微軟全新3D表情，微軟官方分享背后的設計思路

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

在開始之前，請大家先思考下面兩個問題～

問題1：你的產品真的需要Tab Bar嗎？

好像并不是。雖然淘寶、微信、微博、美團等大多數主流的產品都在使用Tab Bar，但這并不意味著所有產品都需要它。

問題2：為什么產品要有Tab Bar？

答案是為了易于使用，意味著通過Tab Bar這種簡單的設計可以輕松幫助用戶導航到頁面。

#1顯示最重要的信息

導航欄應該只包含最有用的信息，不能添加過多無用的標簽使導航欄混亂。許多App在導航欄上添加搜索功能，因為這有助于用戶更快地導航和檢索內容。

#2擴展導航的功能

主流App更喜歡在底部導航欄中使用4-5個標簽，這樣能保持導航欄的整潔，還避免了標簽過多導致用戶難以精確點擊選項的情況。

#3容納多種標簽形式

多數App底部導航欄會使用「圖標+文字」的標簽形式，這樣能清楚地告知用戶點擊標簽之后的結果。

有時候我們也會看到有些產品的導航欄只有圖標沒有文字，但這種形式并不會影響我們的操作，因為當導航欄的標簽使用了用戶特別熟悉的形狀和內涵，完全可以省略文字。

▲ 宜家App的導航欄使用了大眾都很熟悉的圖標，所以即使不加文字，我們也能清楚地知道這3個圖標分別代表了主頁、分類、我的。

▲ 相對于宜家，Youtube的導航欄就顯得有點復雜，因為Youtube的圖標含義用戶可能并不是很熟悉，加上文字說明很有必要。

#4文字標簽應該簡短

文字標簽應該簡短而清晰，準確的文字說明能對用戶使用正確導航起到關鍵作用。

▲ TikTok導航所有的文字標簽都簡短，并且中間的添加圖標還隱藏掉了文字，以此來引吸引用戶的注意力。

#5避免隱藏導航欄

Tab Bar通常包含了最重要的導航信息，應該始終向用戶展示，避免在用戶滾動頁面的情況下被隱藏掉。

▲ Pinterest導航欄的設計是個例。當滾動頁面時，底部的導航欄會隱藏，這么設計的原因可能是為了防止導航欄遮擋圖像，保證用戶看到更多的圖像內容。

#6傳達位置

Tab Bar幫助用戶輕松導航，但如果用戶不知道自己的位置，將會影響他們瀏覽和使用產品的體驗。

▲ 多鄰國App通過改變導航圖標的樣式來讓用戶清晰的知道自己所有的板塊。

▲ Headspace在底部導航欄加上了線條裝飾，每次切換選項，線條都會跟著一起切換，確保告知用戶確切的位置。

#7從反饋中學習并不斷改進

反饋是關鍵，如果想改善產品的導航欄設計，就要考慮并測試用戶最喜歡哪個導航選項，不使用哪個導航，需要四個還是五個選項等等。

#8在導航欄中顯示更新

Tab Bar不僅僅起到導航的作用，很多時候還能通過狀態變化告知用戶更多的信息。

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》從TikTok、Youtube、Pinterest等主流海外產品中，學習如何設計底部導航欄

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

江湖上一直流傳著這樣一套理論，視覺設計語言五維度即“形、色、字、構、質”，說人話就是圖形、色彩、字體、結構、質感。這套理論的來源我尋了很久也沒找到，但是這套理論卻經常出現在各種方法論里面。下面我來逐一分享一下我對這幾個要素的理解。

1、形 

形就是指圖形，界面中的圖形就包括圖標、卡片、圖片，因此，icon的風格、卡片圓角的大小、圖片圓角的大小，都會影響界面的風格，所以要進行規范。 

2、色

色即是色彩，在界面中色彩不是單一的色調，它是整個色彩規范，什么時候應該用主色，什么時候應該用輔色，主色和輔色的比例，顏色在圖標、文字、裝飾上的應用，這些會影響人的整體感受，吸引視覺注意力，規范的配色搭配會讓界面的視覺更加舒適。

 

3、字

字即是字體，字體的形式、字號大小、文字的間距都影響著界面的信息傳遞，選擇符合產品特性的字體、合適的字號、舒適的間距都能讓界面看起來更加精致。

 

4、構

構即是結構，也就是界面的內容布局，排列的方式、分割的方式、留白的多少，都是屬于界面結構的范圍，結構的定義非常重要，決定著界面是否具有呼吸感、通透感、舒適感。

 

5、質

質就是質感，也就是整體頁面的感覺，通過圓角的大小、留白的多少、排版的疏密、投影的大小來決定整個質感是扁平的還是擬物的、高冷的還是活潑的。

知道了這五個維度之后該如何應用呢？我們可以應用在競品的視覺分析里，項目的視覺改版里，項目初期的定風格階段里，反正就是應用在一切需要整理匯報的地方，提升你設計的專業度和可信度，如果在你的述職報告或者作品集里面搞一下，檔次一下子就上去了。

最近因為季度匯報，我發現有些領導可太愛聽這一套大道理了，加了這些方法論之后，他就會覺得這個人有思考、能力強、有自己的方法論，不過是好是壞那就各自評說吧。

原文地址：LEO設研所（公眾號）

作者：設研_倉倉君

轉載請注明：學UI網》沒想到學會這套方法論，定義視覺風格能這么快

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務