宋體的起源和發展

雕版宋體字的形成 

在印刷術發明之前，書要一字一句用手抄寫，費時費力。而唐代發明的雕版印刷術，使書籍由手工抄寫進入印刷復制時代。

現存最早的雕版印刷品是唐代咸通九年的《金剛經》

宋朝體

到了宋代，雕版印刷迎來黃金時代，但此時的字體也并非我們熟知的“宋體”，而是以唐代大家的楷書字體入板，并且不同地區入板的字體也不同。

浙江刊本–《姓解》

四川地區 – 《開寶大藏經》

明朝體

明朝體是中國明代木板印刷中出現的字體，也是現今大眾所認知的“宋體”的原型。雖然明朝體逐漸失去宋朝體所特有的風格，但由于易于凋刻，字形便于走刀，能滿足當時的印量而得以發揚。

《南齊書》 –明朝時期的南京國子監刊本

清代宋體字

在康熙中期以后逐漸形成清代的風格，此時的宋體字更加成熟、精致。乾隆時期，宋體字大體定型，與現代宋體字基本相同。

《學統》清康熙刻本

綜上所述，我們可以知道宋體字不是宋朝的字體，而是漢字字體中的一種風格類別。而在日本以及港臺地區，宋體字也被稱為“明朝體”，“宋體”與“明體”本為一物，是由于文化差異所帶來的名稱上的差異。

現休宋體

如今，為了適應印刷和電子屏顯示的需要，宋體又被進行了一番改造。現代型宋體的幾何特征更為明顯，筆畫更為利落冷峻，為了可讀性，文字胸線也較大，更加符合現代設計所需要的明快感。

以宋體為基礎發展出許多新字體，各大字庫也開發有各有特點的宋體。包括老宋到新宋，再到仿宋，從用于標題的粗宋、中宋，到用于正文的書宋，成為一個完整的字體系列。筆畫較粗的宋體適合用做標題，醒目大方；筆畫較細的宋體，擁有很高的閱讀性，主要用于正文排版。

根據中宮和體飾等特點，可以大致地將宋體分為傳統型宋體、中間型宋體、現代型宋體：

目前可免費商用的宋體字非常稀缺，

推薦9款免費商用宋體。

宋體的使用場景

傳統、歷史

傳統宋體的筆畫結構帶有手工雕刻的痕跡，幾百年的文化沉淀，加上字體本身的特征，使得宋體用于傳統、歷史題材的設計中，可以體現出古樸的傳統文化感。

文化、藝術

宋體由于繼承了自然書寫的痕跡，又具有精致的裝飾性美感，運用在文化藝術等題材，具有強烈的人文氣息，充滿文藝范。

典雅、高貴

宋體字方正平穩、對稱均衡的字體結構，顯得端莊典雅，舒展大氣。常運用在要體現高端、雍容、典雅、華麗的設計中。

女性、優雅

宋體在工整中充滿人情味，有著很強的韻味感和精致美感，帶著幾分女性的溫柔與優雅氣質。所以很多和女性相關的設計都會使用宋體。

時尚、前衛

現代宋體筆畫呈幾何化結構，相對于傳統宋體的溫情，現代宋體更加的冷峻，細膩中透露出時尚前衛的風格，具有時尚感與精致的印象。

宋體搭配推薦

案例一

使字體搭配協調的一個基本原則就是選擇風格相近的字體。使用同一字族里的字體進行搭配，是最簡單、安全的搭配方法。所謂字族（font family）即一款字體下的多個子字體，如思源宋體字族從細到粗共有七款字體，風格協調統一。

使用中西文組合排版時，西文盡量不要使用中文自帶的字體。宋體常與襯線體相搭配使用，因為兩種這字體無論在筆畫特征，還是氣質上都很相似。如本案例使用的是西文字體“Times New Roman”。

在編排時需要形成視覺層次，通過字體的大小、粗細、顏色等方式來給版面帶來閱讀的層次感。

案例二

搭配不同的字體時，要注意他們之間的包容性，既要有所區別又要統一和諧。書法字筆畫變化豐富且非常具有視覺沖擊力，通常會搭配同樣具有歷史文化屬性的宋體字形。

西文則選擇與宋體對應的襯線體，與書法字形搭配。

根據書法字的結構和筆勢，通過對文字大小、位置的調整，進行編排，讓文字看起來更緊密也更有節奏感。

案例三

在進行時尚類的設計時，可以選擇現代型宋體，西文字體則可以搭配幾何襯線體。本案例使用方正風雅宋和Didot進行搭配，這兩款字體簡約的幾何造型和粗細對比強烈的筆畫，細膩中透露著時尚前衛的風格。

黑體與宋體的混搭是很常用的一種搭配方式，需要注意的是尺度的把握，適當的對比能夠為版面帶來更豐富的視覺印象，但對比過度也會產生凌亂感。

本案例選擇較細黑體進行搭配，字形形成了微妙的對比，較細的黑體還有著高雅、精致的氣質，運用在具有女性時尚特征的設計中相得益彰。西文則選擇和黑體相對應的無襯線體。

編排效果：

如果感覺排版太過于規矩，可以嘗試加入手寫體加強字形對比，打破呆板感，營造更強烈的動感。

在進行設計時，不管是中文與中文還是中英文搭配，都是需要經過仔細分析和不斷練習，才能達到和諧統一、層次清晰而美觀大方的效果。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》如何排版更高級？帶你重新認識宋體字排版！

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

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

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

宋體的起源和發展

雕版宋體字的形成 

在印刷術發明之前，書要一字一句用手抄寫，費時費力。而唐代發明的雕版印刷術，使書籍由手工抄寫進入印刷復制時代。

現存最早的雕版印刷品是唐代咸通九年的《金剛經》

宋朝體

到了宋代，雕版印刷迎來黃金時代，但此時的字體也并非我們熟知的“宋體”，而是以唐代大家的楷書字體入板，并且不同地區入板的字體也不同。

浙江刊本–《姓解》

四川地區 – 《開寶大藏經》

明朝體

明朝體是中國明代木板印刷中出現的字體，也是現今大眾所認知的“宋體”的原型。雖然明朝體逐漸失去宋朝體所特有的風格，但由于易于凋刻，字形便于走刀，能滿足當時的印量而得以發揚。

《南齊書》 –明朝時期的南京國子監刊本

清代宋體字

在康熙中期以后逐漸形成清代的風格，此時的宋體字更加成熟、精致。乾隆時期，宋體字大體定型，與現代宋體字基本相同。

《學統》清康熙刻本

綜上所述，我們可以知道宋體字不是宋朝的字體，而是漢字字體中的一種風格類別。而在日本以及港臺地區，宋體字也被稱為“明朝體”，“宋體”與“明體”本為一物，是由于文化差異所帶來的名稱上的差異。

現休宋體

如今，為了適應印刷和電子屏顯示的需要，宋體又被進行了一番改造。現代型宋體的幾何特征更為明顯，筆畫更為利落冷峻，為了可讀性，文字胸線也較大，更加符合現代設計所需要的明快感。

以宋體為基礎發展出許多新字體，各大字庫也開發有各有特點的宋體。包括老宋到新宋，再到仿宋，從用于標題的粗宋、中宋，到用于正文的書宋，成為一個完整的字體系列。筆畫較粗的宋體適合用做標題，醒目大方；筆畫較細的宋體，擁有很高的閱讀性，主要用于正文排版。

根據中宮和體飾等特點，可以大致地將宋體分為傳統型宋體、中間型宋體、現代型宋體：

目前可免費商用的宋體字非常稀缺，

推薦9款免費商用宋體。

宋體的使用場景

傳統、歷史

傳統宋體的筆畫結構帶有手工雕刻的痕跡，幾百年的文化沉淀，加上字體本身的特征，使得宋體用于傳統、歷史題材的設計中，可以體現出古樸的傳統文化感。

文化、藝術

宋體由于繼承了自然書寫的痕跡，又具有精致的裝飾性美感，運用在文化藝術等題材，具有強烈的人文氣息，充滿文藝范。

典雅、高貴

宋體字方正平穩、對稱均衡的字體結構，顯得端莊典雅，舒展大氣。常運用在要體現高端、雍容、典雅、華麗的設計中。

女性、優雅

宋體在工整中充滿人情味，有著很強的韻味感和精致美感，帶著幾分女性的溫柔與優雅氣質。所以很多和女性相關的設計都會使用宋體。

時尚、前衛

現代宋體筆畫呈幾何化結構，相對于傳統宋體的溫情，現代宋體更加的冷峻，細膩中透露出時尚前衛的風格，具有時尚感與精致的印象。

宋體搭配推薦

案例一

使字體搭配協調的一個基本原則就是選擇風格相近的字體。使用同一字族里的字體進行搭配，是最簡單、安全的搭配方法。所謂字族（font family）即一款字體下的多個子字體，如思源宋體字族從細到粗共有七款字體，風格協調統一。

使用中西文組合排版時，西文盡量不要使用中文自帶的字體。宋體常與襯線體相搭配使用，因為兩種這字體無論在筆畫特征，還是氣質上都很相似。如本案例使用的是西文字體“Times New Roman”。

在編排時需要形成視覺層次，通過字體的大小、粗細、顏色等方式來給版面帶來閱讀的層次感。

案例二

搭配不同的字體時，要注意他們之間的包容性，既要有所區別又要統一和諧。書法字筆畫變化豐富且非常具有視覺沖擊力，通常會搭配同樣具有歷史文化屬性的宋體字形。

西文則選擇與宋體對應的襯線體，與書法字形搭配。

根據書法字的結構和筆勢，通過對文字大小、位置的調整，進行編排，讓文字看起來更緊密也更有節奏感。

案例三

在進行時尚類的設計時，可以選擇現代型宋體，西文字體則可以搭配幾何襯線體。本案例使用方正風雅宋和Didot進行搭配，這兩款字體簡約的幾何造型和粗細對比強烈的筆畫，細膩中透露著時尚前衛的風格。

黑體與宋體的混搭是很常用的一種搭配方式，需要注意的是尺度的把握，適當的對比能夠為版面帶來更豐富的視覺印象，但對比過度也會產生凌亂感。

本案例選擇較細黑體進行搭配，字形形成了微妙的對比，較細的黑體還有著高雅、精致的氣質，運用在具有女性時尚特征的設計中相得益彰。西文則選擇和黑體相對應的無襯線體。

編排效果：

如果感覺排版太過于規矩，可以嘗試加入手寫體加強字形對比，打破呆板感，營造更強烈的動感。

在進行設計時，不管是中文與中文還是中英文搭配，都是需要經過仔細分析和不斷練習，才能達到和諧統一、層次清晰而美觀大方的效果。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》如何排版更高級？帶你重新認識宋體字排版！

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

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

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

表格作為組織整理數據的手段，可以有效的向用戶展示數據信息，是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

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

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：你的產品真的需要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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

轉載請注明：學UI網》UI動效設計之設計原則

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

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

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

不知道大家有沒有聽過 Aesop（伊索）這個澳洲護膚品牌子？以天然有機植物草本為賣點，大部分產品在小幾百到大幾百之間。產品的網站上線后連獲三獎，網站做得好，我覺得是定位清晰，想清楚產品的戰略層和范圍層定位定位，并運用到結構層、框架層、表現層。下面我們從各個層面分析一下網站的有哪些可以學習借鑒的地方。

Aesop 的天貓國際店截圖

他們本來是特別注重線下體驗店的，除了裝潢考究之外，里面的護膚顧問也都是經過專門培訓的。

這樣一家原本挺傳統的中高端護膚品牌，與知名設計公司 Work&Co 合作推出了自己的購物網站。

這個網站確實做得很有特色，而且把護膚購物的體驗細節打磨到位，做到了大型網購平臺做不到的事情。

上線后連獲三個獎，我們來看看有什么可以學習借鑒的地方。

信息架構

由于 Aesop 注重商品在精不在多，所以網站在導航里就直接將商品目錄列出了，當然還是根據用途和膚質進行了分類。

這種商品名稱列表的展示方式，還真不是什么電商都適用的。

但是 Aesop 的商品不多而且包裝設計非常統一幾乎沒什么可預覽的，而老顧客大多更需要快速補貨或者找到新品，所以就不需要像普通電商那樣一層一層地靠預覽圖尋找。

以及購物車的設計也非常簡潔，沒有圖片只有文字，而且換成深色的背景以提醒用戶注意。

內容策略

護膚品這類產品非常特殊，不像服裝或者日用品那樣看著不錯就買了，而是需要向用戶提供很多輔助信息才能促使其下單。

一般在門店里，顧問都會詢問顧客的膚質和需求，向他們推薦合適的商品，并介紹其功效、用法、成分等信息，并打開讓顧客聞一聞、試一試。

網上購物時，雖然聞一聞和試一試提供不了，但其它的部分還是要想辦法提供。

Aesop 的官網的商品詳情頁里，第一屏圖片旁邊會提供的基本信息包括：標題+功效說明+適合膚質+皮膚觸感+主要成分+容量+價格。

第二屏會提供一張使用商品的視頻或者圖片，并提供更多信息：用法+用量+材質+氣味。

第三屏會告訴用戶，做一套完整的護膚流程是怎樣的，以及還可以購買哪些配套的商品。

另外，回頭客會收到基于購買記錄的個性推薦，內容也會根據季節和地域氣候量身定制。

視覺語言

Aesop 的產品包裝非常簡潔，深棕色的瓶子上，貼著米黃色的包裝紙，上面印著深灰色的字，除了一些矩形框之外，幾乎毫無裝飾。

線下門店的也是在結構上規整干練，但因為多用木質材料，所以沒有工業風格那種冷冰冰的感覺。

Aesop 的網站設計使用了與包裝紙類似的色調，把白底換成米黃色，上面無論是線條還是文字，都是統一的深灰色。

而且整個網站在布局上運用了很多大方框和抽拉效果，與線下門店的設計風格像呼應。

對于商品展示的風格，設計團隊也是給出了一套與網站設計匹配的范例，Aesop 未來如果要增加新品，也可以在此基礎上進行拓展延伸。

另外，配套的活動頁也設計也挺有特色的。

思考總結

雖然國內購物都是平臺的天下，但是很多大品牌還是沒有放棄做自己的網站。

Aesop 這個網站，不論是在視覺風格、內容策略還是信息架構上，都是為這個品牌量身定制的，在細致程度上有統一模板的電商平臺難以企及的地方。

我想未來哪怕平臺再強再大，小而美的電商如果能夠把細分領域的體驗做到極致，還是有自己的生存空間的。

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網》做好大平臺忽略的細節，這購物網站連獲三大設計獎

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

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

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

大家好，我是彩云。在做UI界面設計時，有時候看著設計出來的界面總覺得不大好，但又不知道問題出在哪，這里其實考驗的就是設計觀察力。資深設計師之所以強，往往就是強在對設計細節的把握能力，他們總能找到你所看不到的細節問題。大的問題往往一眼就能看出來，但設計品質高低往往就藏在這些設計細節中。觀察力的提升也是來自于平時項目中的經驗積累，為此，彩云圍繞設計細節計劃出一個系列文章，今天這篇文章是第一期，感興趣的同學保持關注，后續會有更多設計細節干貨文章連載更新，保證看完就能用到自己的工作中。

當你在設計一個高效、美觀的UI界面時，有時只需要一些小的調整，就能快速提高設計的品質。有時候僅僅是簡單的調整就能設計出讓客戶、用戶和你自己真正滿意的界面。

在這篇文章中，我整理了一些小的設計技巧，來幫助你快速改進自己的設計，提高用戶體驗。

1.適當使用文本裝飾元素

有些人會拿極簡設計出來說事，認為不應該加多余的文字干擾 ，界面上的內容都應該遵循有意義這個原則，這沒有問題。但有時候增加文本的目的只是簡單的為了“裝飾”，這樣是可以的。我們不希望所有的設計都變得平平無奇。

純粹出于裝飾原因而加入一些比較特別的元素也完全沒問題，它可以不遵循可訪問性標準，比如顏色對比度特別淺，看不清都沒關系。只要這些元素不影響用戶體驗就可以。

2.UI界面中的不同元素要有區分度

按鈕、通知（文字鏈接）是用戶界面中兩個獨立又重要的元素。如果可以的話，一定要確保用戶在瀏覽你的網站或應用時能夠快速且輕松地將它們區分開來。

按鈕，在大多數情況下都是最重要的，所以在界面中一定要確保是最突出，并且很容易區分其他元素（例如：文本鏈接）。

3.使用更自然的投影

設計過程中我們通常都會用到投影。投影的恰當使用，可以有效提高視覺品質。在設計界面時，避免使用比較重的投影，降低不透明度，讓界面看著更加自然。

4.使用讓視覺更加清晰的字體

在設計中，字體適當都使用大寫也是很不錯的。它可以幫助你在設計中實現元素之間的多樣性和對比度，提高視覺的整體效果。但要確保選擇是合適的字體，行高和字重粗細，確保給用戶呈現的內容清晰度。

5.面包屑導航設計要便于用戶理解

導航的設計無處不在，通常會應用在內容比較多的網站上，但有時很難理解它所表達的意思。如果將字體顏色和粗細稍微調整下， 就可以讓用戶快速確定自己所在站點中的位置，以及他們可能需要去的其他地方。

例如：如果他們通過搜索跳轉到某個站點的某個位置，這就特別有用。像上圖中的設計一樣，始終讓導航鏈接中的最后一項讓它在視覺上與其他有明顯區別，這樣用戶更加容易理解。

6.少用過高飽和度的顏色

高飽和度的顏色（明亮的藍色、紅色、綠色等）在網站上是挺有視覺沖擊力，并能吸引用戶的注意的。但是如果過度使用它們可能會讓用戶的眼睛感到疲勞，尤其是結合文本內容一起使用的時候。

盡量少地使用高飽和的顏色，你可以嘗試把飽和度降低，增加顏色中的灰度來使顏色變淡，這樣不僅能避免用戶視覺疲勞，還能更加突出重點內容，讓用戶閱讀起來更加方便且不被視覺干擾。

7.使用用戶熟悉便于識別的圖標

在設計中使用圖標時，最好使用用戶熟悉并便于識別的圖標，讓用戶能快速理解使用它能做什么。使用不能傳達正確含義的圖標，只會變成視覺噪音，引起用戶混淆，成為用戶的認知障礙。

8.使用親密性原則來表達元素之間的關系

版式設計四大基本原則：對比，重復，對齊，親密性，其中親密性原則是把畫面中相關元素進行分類，建立某種視覺上的關聯，實現頁面整體結構清晰度，加快用戶在瀏覽網站或應用時的認知。

9. 使用4pt基線網格+8pt網格來做字體排版

進行文字排版時，將 4pt 基礎網格 與 8pt 網格 一起使用可以為設計帶來更加和諧的垂直節奏。

你只需要使用 4 的倍數（16、20、24、28 等）的行高值將字體與 4 的基線網格對齊。為什么是 4？ 好吧，就我個人而言，我發現在處理某些文本大小時，過去以 8 的倍數進行縮放并不是那么通用。

10. 減少標題的行高

冗長的正文需要足夠的行高來增加可讀性，而標題通常要短得多，所以你可以稍微減少間距。

標題的推薦行高通常是文本大小的1 – 1.3倍，標題文字越大，需要的行高就越少。

11. 使用色輪上的鄰近色不容易出錯

鄰近色，是最和諧的配色方案之一，當你在挑選顏色遇到困難時，它能給你很大的幫助。

一組由“主”、“次”、“再次”組成的鄰近色可以幫你快速構建一個簡單的、不會出錯的配色方案。

12. 在設計中最大化信噪比

設計中的清晰度和可用性可以通過“最大化信號”和“最小化噪音”來實現，這反過來又產生了高信噪比。

你可以通過確保相關信息(信號)有效地呈現，而不相關的信息(噪聲)被完全減少或刪除來實現這一點。剪掉絨毛。使事情更加清晰，刪減無關信息，強化重要信息，提高信噪比達到提高界面設計品質的目的。

彩云注：由于篇幅有限，今天是設計細節系列文章的第一期，下一篇會繼續更新更多設計細節，感興趣的同學保持關注，保證看完就能用到自己的工作中。如覺得有學到，一定要給彩云點個贊，我會更有動力，哈哈~

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

原文地址：mediue

作者：Marc Andrew

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

譯者：彩云Sky

轉載請注明：學UI網》UI設計細節連載系列① | 讓設計細節更高級的12個實用小技巧

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

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

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

不論是 toB 還是 toC 的移動端設計中，都會遇到一些表單填寫和上傳證件信息的情況。面對移動端要手動填寫的表單，用戶通常期待有高效的解決辦法可以立即完成填寫任務。本文為你總結出了幾種移動端表單設計的實用原則，可以有效解決表單不夠友好、用戶填寫錯誤、費時費力的問題，希望對你有幫助。

一. 信息內容層級化——信息分層次、分步驟、分頁面呈現

1 . 表單結構分層

從表單結構層面來看，內容過長的表單，信息可以分步驟、分頁面處理。

使用條件

• 表單內容過長，用戶填寫有壓力
• 操作步驟較多，需要給用戶明確的步驟提示
• 中途需要多次跳轉，接入第三方服務的表單

案例分析

做企業認證時，由于需要填寫的項目較多，步驟繁雜，因此很多產品會采用分步驟的形式，提示用戶當前進度。

2 . 頁面內容分層

每個頁面的信息內容呈現，有層級，有重點

使用條件

• 表單填寫內容較多
• 頁面內文字內容較多
• 產品對于用戶填寫的內容有傾向（如對平臺來說更有意義、更希望用戶填寫的信息）

案例分析

大眾點評在設置用戶信息時，雖然要填寫的內容都是“設置”，但是重點需要設置的信息使用了鏈接顏色處理，做了強調。

二. 減少用戶輸入——用其他方式代替用戶手動輸入

1 . 以選擇代替輸入

如果用戶可以做選項時，就不要使用輸入，可以充分利用移動設備的性能，比如 GPRS 定位、通訊錄等，合理調用第三方或系統信息。

使用條件

• 填寫的內容邊界較為模糊，詞語不確定性較高
• 選項數量控制在 3-5 個之間
• 可以調用第三方或系統信息

案例分析  

• 案例一：知乎 App 博主認證 和 愛康國賓 App 個人信息都使用了部分選項替代填寫：

• 案例二：淘寶 App 可以調動系統定位，并提供幾個最有可能的選項，讓用戶選擇最佳定位。

2 . 提供默認選項，替用戶做選擇

選取最大概率事件作為默認選項，減少用戶的手動調整

使用條件

• 系統能夠確定出符合用戶的較大概率選項
• 選項數量控制在 3-5 個之間

案例分析  

螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區，幫助用戶默認選擇概率最大的選項，不需要用戶自己操作。

三. 定義鍵盤類型

根據調用內容調動不同的鍵盤類型

根據表單輸入內容的不同，調用出系統不同的鍵盤類型。

使用條件

• 填寫的內容有明確的輸入語言要求

案例分析  

航旅縱橫在航班查詢的時候，由于航班號都是大寫字母和數字的組合，所以鍵盤會默認調用出只有數字和字母的輸入法，同時默認開啟大寫形式。螞蟻鏈實人認證在用戶手動填寫身份證時也同理。

四. 避免重要信息被遮擋

重要的信息要始終可以被看到

需要避免輸入項被鍵盤遮擋，也要避免將重要的輸入提示作為占位符，不要在用戶填寫時被輸入的內容遮擋。

使用條件

• 表單的填寫位置剛好會被彈出的鍵盤擋住
• 輸入提示很重要，需要用戶在輸入時隨時注意
• 輸入提示很長，用戶短時間內記不住

案例分析  

大眾點評在寫評論時，一些可以激勵用戶寫點評的提示性文字，會在用戶輸入時始終存在。

五. 實時校驗

重要的信息要始終可以被看到

當輸入需要被判斷和檢驗的信息時，系統最好可以針對信息做實時校驗，避免用戶一直到最后提交表單時才發現填寫問題。

使用條件

• 輸入的信息需要判斷，并會影響最終的表單填寫通過率
• 輸入內容的質量需要用戶知曉，如密碼的強度

案例分析  

證件號碼輸入錯誤時會給予相應的提示。

原文鏈接：長弓小子（公眾號）

作者：元堯

 轉載請注明：學UI網》干貨｜移動端·表單設計有方法！

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

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

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

酷家樂的產品性質決定了其增值付費類活動的目標用戶從根本上說是真正意義上的b端用戶，這類用戶群體的審美喜好一直以來很難與視覺流行的趨勢和酷家樂品牌調性找到平衡點，這類視覺產出已經遇到瓶頸；而此類運營動作越來越多，并且作為公司營收的重要組成部分，在視覺側形成正確的指導方向具有非常重要的意義。

背景與目標：

背景

• B端增值付費類用戶群體具有特殊性
• 低成本的線上運營活動推廣逐漸增多
• 在線增長是公司營收的重要部分，尚未形成視覺側的品牌形象

目標

• 符合用戶層且體現時下趨勢的視覺形象
• 品牌刻板印象扭轉
• 具有貫穿各類運營活動的可識別特性，形成視覺指導

調研階段：

用戶畫像

過半購買角色具備設計屬性，對審美也有一定的要求，所以推廣視覺表現可以也需要具備一定的設計感

購買角色年齡分布較廣，崗位屬性分布也比較平均，因此推廣視覺表現需要兼顧各年齡層，具有通用適配性

視覺現狀

設計過于“用力”，為了在營銷活動中體現酷家樂科技屬性，與D端視覺產生差異，一味采用深色/藍色，硬朗機械感；營銷氛圍疊加后畫面過飽和，難以與傳統電商拉開層次。

流行趨勢

關鍵詞提?。?/strong>