一  階段劃分

按時間和經(jīng)驗區(qū)間來看，大致可以分為三個階段：初級階段、高級階段、專家階段。

每個階段我們總結(jié)出一個最具有關(guān)鍵點的問題來展開分析。

二  初級階段

這個階段的設(shè)計師初入職場或者一兩年工作經(jīng)驗，處于小白階段，對任何事物都有好奇心，精力也是最充沛的階段。

同時也是在這個階段，設(shè)計師往往是迷茫的，不知道自己要朝著哪個方向努力、該學(xué)習(xí)什么。一個不小心，努力錯了方向，耽誤的時間是彌補(bǔ)不了的。

這里我給初級階段的設(shè)計師總結(jié)了一個問題，同時這個也是目前各大廠在招人的一些可參考的標(biāo)準(zhǔn)。

（問題一）如何在眾多設(shè)計師中脫穎而出？

2.1 對設(shè)計有足夠的熱愛

俗話說干一行愛一行，只有對設(shè)計有足夠的熱愛，才能激發(fā)出無限的潛力。加班到深夜完成一個項目后，才會有無比的滿足感而不是厭惡感。

2.2 學(xué)習(xí)能力

學(xué)習(xí)伴隨終生，互聯(lián)網(wǎng)發(fā)展如此之快，你如果只局限于現(xiàn)有的能力，早晚會被時代所拋棄。學(xué)習(xí)能力分為兩類：

• 自我學(xué)習(xí)：抓住當(dāng)下火熱的趨勢，不斷挑戰(zhàn)自己的能力，提升自己；
• 項目中學(xué)習(xí)：項目完成后做復(fù)盤，可以讓你學(xué)到更多的東西，避免相同問題再犯錯。

2.3 交叉能力

職業(yè)有邊界，設(shè)計無邊界。不要只看重自己當(dāng)下職業(yè)中的技能，要把有限的職業(yè)做出無限的可能。多學(xué)習(xí)相關(guān)知識和技能，充實自己。

2.4 協(xié)作能力

隨著互聯(lián)網(wǎng)的發(fā)展，協(xié)作能力變得越來越重要，很多項目是你一個人無法完成的，所以就需要多人協(xié)作，人效也尤為重要。為了提高效率，你就必須增強(qiáng)你的協(xié)作能力。

2.5 責(zé)任心

有責(zé)任心的設(shè)計師往往是會被看重的，像那些只為了眼下自己的任務(wù)而不關(guān)心項目整體的設(shè)計師，會被慢慢邊緣化。

2.6 有想法

這個是基本的能力，就不用過多闡述了吧？沒有想法的設(shè)計師只是一個沒有感情的做圖機(jī)器。

2.7 高執(zhí)行

無論有多好的設(shè)計能力、想法，最后能落地才是好方案，高的執(zhí)行力可以讓你的方案很快的落地，不至于讓別人認(rèn)為你只有嘴上的功夫。

2.8 懂商業(yè)

隨著行業(yè)的發(fā)展，設(shè)計能力不僅僅是視覺能力，更大一部分是是否滿足商業(yè)化的需求，只有懂商業(yè)才能設(shè)計出更符合消費者的產(chǎn)品。

2.9 正能量

設(shè)計師一定要有正能量，是一個積極向上的人，每天都在想 *** 的事情，是不能成為真正的大神。

2.10 有沉淀

每個設(shè)計師的思想都是獨特的，你要把自己的想法和經(jīng)驗沉淀下來，多年過去回頭看，你才不會覺得前些年什么都成績都沒有。

三  高級階段

高級階段一般處在 5 年左右的一個工作經(jīng)驗，這個時候職業(yè)技能方面已經(jīng)爐火純青，行業(yè)上面也有一些造就。

這個時候呢，又到了職業(yè)生涯的第二個分叉口。我們就來引出第二個問題：

（問題二）30+ 歲的設(shè)計師如果走不上管理崗，該如何做好自己的職業(yè)規(guī)劃？

在這里我想反問大家兩個問題：

• 管理崗位跟你的職業(yè)目標(biāo)是不是一一對應(yīng)？
• 你是想要獲得一個管理崗位還是管理的能力？

其實在 30 歲這個年齡，是設(shè)計師最美好的時間。要職業(yè)技能有職業(yè)技能，要經(jīng)歷有經(jīng)歷，也有年輕人的干勁。

其實很多人都是因為喜歡設(shè)計這個行業(yè)才做的設(shè)計，剛畢業(yè)的時候都是憧憬著自己哪一天能成為設(shè)計界的大?！，F(xiàn)在卻被行業(yè)內(nèi)卷的，非要走上管理崗嗎？

設(shè)計上走上管理崗是一種出路，但不是唯一出路，我們完全可以在專業(yè)度上深挖，把自己打造成一位大神（據(jù)大廠數(shù)據(jù)統(tǒng)計，專家級別的平均年齡在 30 出頭）。

設(shè)計是有無限的可能，把所有的時間都放在專注設(shè)計上都不夠用的。

最后，我想再反問大家一個問題：你真的想得到的是管理崗嗎？你有可能只是想得到認(rèn)可。

所以價值的體現(xiàn)會在各個方面，不要被內(nèi)卷的世界所誤導(dǎo)。

四  專家階段

這個階段你就已經(jīng)站在了行業(yè)金字塔的頂端了。一般情況下，就算不專門的轉(zhuǎn)做管理崗，也會或多或少的帶一些職級低一些的設(shè)計師，需要有一些管理的能力。那么最后一個問題也就也就引出來了：

（問題三）如何打造一個優(yōu)秀的設(shè)計團(tuán)隊？

4.1 對專業(yè)的熱愛，你要讓你團(tuán)隊的成員感受到從上到下都是很專業(yè)的。很多優(yōu)秀的設(shè)計團(tuán)隊不是有很多人，而是有一群非常專業(yè)的人。

4.2 愛的氛圍：你要把團(tuán)隊成員當(dāng)做家人一樣，讓他/她在這個團(tuán)隊里感受到愛。

4.3 給予大家更多的空間，不設(shè)定死的 KPI 目標(biāo)，不設(shè)定框框架架，可以激發(fā)更多的潛力。

4.4 接上一個點，如果沒有 KPI，那該如何量化設(shè)計價值？當(dāng)團(tuán)隊的專業(yè)能力達(dá)到足夠的高度，硬性指標(biāo)的事情就會做的非常得心應(yīng)手，反而大家都會去做一些沒有嘗試過的事情，激發(fā)框架之外的潛力。

4.5 找一個比你還優(yōu)秀的人，永遠(yuǎn)有個人鞭策著你，讓你不斷前進(jìn)。

4.6 你要做決定，要不然要你做什么，做任何一個關(guān)于團(tuán)隊的決定。

最后總結(jié)下來，你要“雌雄同體”，既要有男性的理性和果斷，也要有女性的包容和愛，這樣才能成為一個合格的 leader。

總結(jié)

每一個階段的過度都是一個成長，勇于困難、不懼未來，你總會成為你理想中的樣子，加油！

最后，希望本編文章能對看完的你有所幫助，這也是我做分享的初衷，我們下期見。

原文地址：友設(shè)青年（公眾號）

作者：Luckgg

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》我們來聊一聊設(shè)計師成長的三個階段

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

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

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

1. 色輪分析

顏色是我們眼睛感知不同波長的方式。色輪是將一系列顏色，有次序地利用圓盤的形式展現(xiàn)出來，色輪顏色的構(gòu)成包括三組顏色：

原色：紅色、黃色、藍(lán)色

二次色(間色)：綠色、橙色、紫色(三原色混合而成)

三次色(復(fù)色)：黃橙、紅橙、紅紫、藍(lán)紫、黃綠、藍(lán)紫(原色二次色混合而成)

通過不斷混合相鄰的顏色，產(chǎn)生新的顏色，最終形成一個全域的色輪。

▲ 色輪顯示了3組顏色，原色范圍最小，在圓的的中心處，二次色在中間環(huán)。最大的外圓由三次色組成。

2. 色彩搭配

色彩搭配最基本且重要的原則就是顏色間要相互協(xié)調(diào)，一些常見的顏色搭配包括：

同類色：色輪上90°以內(nèi)彼此相鄰的顏色，這種顏色搭配的對比度較低。

互補(bǔ)色：色輪上相對的顏色，產(chǎn)生較高的色彩對比度，在搭配上可以一種作為主色，另一種用于強(qiáng)調(diào)。

分裂補(bǔ)色：互補(bǔ)色兩側(cè)相鄰的顏色。這種顏色搭配既有同類色的低對比度的美感，又具有互補(bǔ)色的沖擊力，形成一種既和諧又突出重點的顏色關(guān)系。

三色組：色輪上的三種等距顏色，相隔120度，其中二種顏色互相類似，另一種與它們形成對比關(guān)系。

單色搭配：只使用一個色相,通過改變飽和度、明度來得到其他色彩。這種搭配看上去干凈、優(yōu)雅，但是不容易突出重點。

引入的顏色越多，就越難平衡視覺層次。如果你有豐富的配色經(jīng)驗，可以從兩種或三種顏色開始，不斷嘗試更復(fù)雜的搭配。

3. 色彩含義

雖然隨著全球化的到來，某些顏色可能已經(jīng)達(dá)到了標(biāo)準(zhǔn)含義，例如紅色表示停止，綠色表示開始，但色彩含義會因文化而有所差異，例如想一下錢是什么顏色，紅色(中國)還是綠色(美國)？

如果想在設(shè)計中明確解釋色彩的含義，需要做到兩點：

• 顏色可能不會在全球范圍內(nèi)起作用；
• 設(shè)計時考慮少數(shù)群體(色盲)，進(jìn)行用戶測試來確保用戶明確了解顏色示意。 

4. 將色彩理論應(yīng)用到設(shè)計中

調(diào)色板是為特定項目、品牌選擇的一系列或一組顏色，每個顏色都是特意添加的，整個調(diào)色板的色彩組合展現(xiàn)了產(chǎn)品或界面的視覺美感。

創(chuàng)建調(diào)色板

選擇一種顏色搭配并進(jìn)行顏色迭代

單色方案通常最容易創(chuàng)建和應(yīng)用，因此如果你沒有太多的配色經(jīng)驗，可以從這種配色開始。

首先要弄清楚為什么要選擇這些顏色、這些顏色有什么作用、表現(xiàn)出來怎樣的效果等問題，這樣創(chuàng)建調(diào)色板才更有效率。

▲ 如果在配色過程中覺得卡住了或者不知道從哪里開始，可以從ColorHunt的調(diào)色板中汲取靈感。

將調(diào)色板限制為三種顏色

少量的顏色加強(qiáng)了視覺層次和對比度，因為影響用戶考慮和分心的元素更少。所有的顏色都在爭奪注意力，在設(shè)計中也是如此。

▲ 少即是多。過多的顏色反而會讓用戶眼花繚亂，找不清重點信息。

遵循品牌的顏色標(biāo)準(zhǔn)

創(chuàng)建調(diào)色板時要始終遵循既定的顏色標(biāo)準(zhǔn)，這樣不僅會讓工作更輕松，因為不考慮太多新的的顏色，還會給用戶帶來一致的品牌體驗。

如果沒有品牌色標(biāo)準(zhǔn)，可以看看現(xiàn)有設(shè)計和產(chǎn)品中使用的顏色，并嘗試融入到調(diào)色板中。

▲ 耐克的網(wǎng)站使用了最基本的單色調(diào)色板：黑色、白色和灰色，這種顏色選擇使用戶可以專注于產(chǎn)品。

使用調(diào)色板

使用60-30-10規(guī)則

這條規(guī)則僅表示主色使用60%，輔助色使用30%，強(qiáng)調(diào)色使用10%，通常主色和輔助色是相對中性的顏色。

這些比例有助于創(chuàng)造平衡，防止搭配的顏色出現(xiàn)混亂。

▲ 蘋果新聞App很好地使用了60-30-10規(guī)則，白色和淺灰色是主色調(diào)，藍(lán)色是輔助，粉色作為強(qiáng)調(diào)色來吸引了用戶的注意力。

應(yīng)用然后迭代

使用了60-30-10規(guī)則后，接下來就要調(diào)整顏色來提高美感，并且突出設(shè)計中重要的內(nèi)容。

看看顏色選擇是否有助于創(chuàng)建正確的視覺層次結(jié)構(gòu)、顏色選擇在設(shè)計中是否創(chuàng)造了平衡和對比。

保持顏色的一致性

一致性是幫助用戶理解顏色使用的關(guān)鍵。如果在一個頁面上使用亮藍(lán)色作為提示按鈕，那么在產(chǎn)品的任何地方都應(yīng)該使用相同的顏色作為提示。

測試調(diào)色板

測試設(shè)計效果

將調(diào)色板應(yīng)用到設(shè)計中后，需要做一些可用性測試，例如顏色在按鈕、鏈接或其他類型組件上的可用性，頁面的易讀性和可訪問性問題等

最后

合適的顏色搭配可以增強(qiáng)品牌認(rèn)知度，吸引用戶注意力并提高可用性，靜下心來多多實踐，才能充分利用好這些奇妙的顏色。

最后為大家分享一波非常不錯的配色方案，特別適合用在日常設(shè)計中～

下載方式：

1）關(guān)注公眾號“Clip設(shè)計夾”

2）公眾號后臺回復(fù)“配色”自動獲取下載鏈接

原文地址Clip設(shè)計夾（公眾號）

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》配色看起來總是不舒服？用這個科學(xué)的配色方法！

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

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

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

a

字體 

Samsung Sharp Sans

三星這款字體是一個幾何感很強(qiáng)，接近完美的圓形O和簡約設(shè)計感強(qiáng)的小寫字體，特別是字母a設(shè)計的脫穎而出。

在首爾的街頭上，物理交通工具上，這款字體都很清晰美觀，和整個城市的時尚結(jié)合在了一起。字體不僅僅是一個字體，同時還是一個溝通工具。三星這款字體不僅用在數(shù)字廣告，還包括印刷上，這個字體承載了三星對于未來的突破。三星不再是只有產(chǎn)品線，而是成為時尚生活品牌。

在移動端，三星使用的是 Samsung One 字體，它也是一個非襯線字體，相對于傳統(tǒng)的襯線字體，這款字體設(shè)計更加具有人性化。

蘋果和谷歌早已推出了自己的字體，三星也推出了自己的通用字體，Samsung One 由三星和 Brody Associate 聯(lián)手打造。超過400種語言，以及超過25000個字符，成為一套全球性的字體。從手機(jī)到電視，從筆記本電腦到微波爐，所有的三星產(chǎn)品都將用上這套字體。它也是未來三星視覺語言的核心。

Samsung One 字體設(shè)計語言有5個關(guān)鍵詞：人文主義，易區(qū)分，通用性，專業(yè)性，清晰可擴(kuò)展。

▲人文主義：筆畫自然就像手寫一樣變化，字體具有動態(tài)角度的正方形曲線，有很大想象空間。

▲字沒有的左右空間都很窄，所以有效空間非常好。

▲通用性：在全球各種語言環(huán)境下要足夠通用。

▲專業(yè)性：就是每個筆畫的設(shè)計都需要經(jīng)得起考究。▲清晰可擴(kuò)展：各種場景的拓展性這塊需要能適用。

Helvetica Neue 字體之前有一些設(shè)計很受詬病的地方，比如時間的冒號不居中，理想狀態(tài)應(yīng)該是居中，識別性和平衡感更好。

三星整體的版式采用的左圖右文或者右圖左文，這樣的設(shè)計能讓用戶更加關(guān)注內(nèi)容，閱讀也比較符合從左到右的習(xí)慣。這樣的版式結(jié)構(gòu)在全球官網(wǎng)設(shè)計都是類似，和蘋果的上下排版不同。版式字體上也是通過字重來凸顯視覺層級。

蘋果會結(jié)合產(chǎn)品的特點，重點體現(xiàn)產(chǎn)品，其次生活場景。三星的產(chǎn)品圖片，色調(diào)都是以生活化，貼近生活為主，無論手機(jī)還是電器。

原文地址：我們的設(shè)計日記（公眾號）

作者：sky

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》蘋果和三星，哪家設(shè)計強(qiáng)？

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

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

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

宋體的起源和發(fā)展

雕版宋體字的形成 

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

現(xiàn)存最早的雕版印刷品是唐代咸通九年的《金剛經(jīng)》

宋朝體

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

浙江刊本–《姓解》

四川地區(qū) – 《開寶大藏經(jīng)》

明朝體

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

《南齊書》 –明朝時期的南京國子監(jiān)刊本

清代宋體字

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

《學(xué)統(tǒng)》清康熙刻本

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

現(xiàn)休宋體

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

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

根據(jù)中宮和體飾等特點，可以大致地將宋體分為傳統(tǒng)型宋體、中間型宋體、現(xiàn)代型宋體：

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

推薦9款免費商用宋體。

宋體的使用場景

傳統(tǒng)、歷史

傳統(tǒng)宋體的筆畫結(jié)構(gòu)帶有手工雕刻的痕跡，幾百年的文化沉淀，加上字體本身的特征，使得宋體用于傳統(tǒng)、歷史題材的設(shè)計中，可以體現(xiàn)出古樸的傳統(tǒng)文化感。

文化、藝術(shù)

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

典雅、高貴

宋體字方正平穩(wěn)、對稱均衡的字體結(jié)構(gòu)，顯得端莊典雅，舒展大氣。常運用在要體現(xiàn)高端、雍容、典雅、華麗的設(shè)計中。

女性、優(yōu)雅

宋體在工整中充滿人情味，有著很強(qiáng)的韻味感和精致美感，帶著幾分女性的溫柔與優(yōu)雅氣質(zhì)。所以很多和女性相關(guān)的設(shè)計都會使用宋體。

時尚、前衛(wèi)

現(xiàn)代宋體筆畫呈幾何化結(jié)構(gòu)，相對于傳統(tǒng)宋體的溫情，現(xiàn)代宋體更加的冷峻，細(xì)膩中透露出時尚前衛(wèi)的風(fēng)格，具有時尚感與精致的印象。

宋體搭配推薦

案例一

使字體搭配協(xié)調(diào)的一個基本原則就是選擇風(fēng)格相近的字體。使用同一字族里的字體進(jìn)行搭配，是最簡單、安全的搭配方法。所謂字族（font family）即一款字體下的多個子字體，如思源宋體字族從細(xì)到粗共有七款字體，風(fēng)格協(xié)調(diào)統(tǒng)一。

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

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

案例二

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

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

根據(jù)書法字的結(jié)構(gòu)和筆勢，通過對文字大小、位置的調(diào)整，進(jìn)行編排，讓文字看起來更緊密也更有節(jié)奏感。

案例三

在進(jìn)行時尚類的設(shè)計時，可以選擇現(xiàn)代型宋體，西文字體則可以搭配幾何襯線體。本案例使用方正風(fēng)雅宋和Didot進(jìn)行搭配，這兩款字體簡約的幾何造型和粗細(xì)對比強(qiáng)烈的筆畫，細(xì)膩中透露著時尚前衛(wèi)的風(fēng)格。

黑體與宋體的混搭是很常用的一種搭配方式，需要注意的是尺度的把握，適當(dāng)?shù)膶Ρ饶軌驗榘婷鎺砀S富的視覺印象，但對比過度也會產(chǎn)生凌亂感。

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

編排效果：

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

在進(jìn)行設(shè)計時，不管是中文與中文還是中英文搭配，都是需要經(jīng)過仔細(xì)分析和不斷練習(xí)，才能達(dá)到和諧統(tǒng)一、層次清晰而美觀大方的效果。

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

作者：鄧海貝

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何排版更高級？帶你重新認(rèn)識宋體字排版！

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

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

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

宋體的起源和發(fā)展

雕版宋體字的形成 

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

現(xiàn)存最早的雕版印刷品是唐代咸通九年的《金剛經(jīng)》

宋朝體

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

浙江刊本–《姓解》

四川地區(qū) – 《開寶大藏經(jīng)》

明朝體

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

《南齊書》 –明朝時期的南京國子監(jiān)刊本

清代宋體字

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

《學(xué)統(tǒng)》清康熙刻本

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

現(xiàn)休宋體

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

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

根據(jù)中宮和體飾等特點，可以大致地將宋體分為傳統(tǒng)型宋體、中間型宋體、現(xiàn)代型宋體：

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

推薦9款免費商用宋體。

宋體的使用場景

傳統(tǒng)、歷史

傳統(tǒng)宋體的筆畫結(jié)構(gòu)帶有手工雕刻的痕跡，幾百年的文化沉淀，加上字體本身的特征，使得宋體用于傳統(tǒng)、歷史題材的設(shè)計中，可以體現(xiàn)出古樸的傳統(tǒng)文化感。

文化、藝術(shù)

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

典雅、高貴

宋體字方正平穩(wěn)、對稱均衡的字體結(jié)構(gòu)，顯得端莊典雅，舒展大氣。常運用在要體現(xiàn)高端、雍容、典雅、華麗的設(shè)計中。

女性、優(yōu)雅

宋體在工整中充滿人情味，有著很強(qiáng)的韻味感和精致美感，帶著幾分女性的溫柔與優(yōu)雅氣質(zhì)。所以很多和女性相關(guān)的設(shè)計都會使用宋體。

時尚、前衛(wèi)

現(xiàn)代宋體筆畫呈幾何化結(jié)構(gòu)，相對于傳統(tǒng)宋體的溫情，現(xiàn)代宋體更加的冷峻，細(xì)膩中透露出時尚前衛(wèi)的風(fēng)格，具有時尚感與精致的印象。

宋體搭配推薦

案例一

使字體搭配協(xié)調(diào)的一個基本原則就是選擇風(fēng)格相近的字體。使用同一字族里的字體進(jìn)行搭配，是最簡單、安全的搭配方法。所謂字族（font family）即一款字體下的多個子字體，如思源宋體字族從細(xì)到粗共有七款字體，風(fēng)格協(xié)調(diào)統(tǒng)一。

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

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

案例二

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

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

根據(jù)書法字的結(jié)構(gòu)和筆勢，通過對文字大小、位置的調(diào)整，進(jìn)行編排，讓文字看起來更緊密也更有節(jié)奏感。

案例三

在進(jìn)行時尚類的設(shè)計時，可以選擇現(xiàn)代型宋體，西文字體則可以搭配幾何襯線體。本案例使用方正風(fēng)雅宋和Didot進(jìn)行搭配，這兩款字體簡約的幾何造型和粗細(xì)對比強(qiáng)烈的筆畫，細(xì)膩中透露著時尚前衛(wèi)的風(fēng)格。

黑體與宋體的混搭是很常用的一種搭配方式，需要注意的是尺度的把握，適當(dāng)?shù)膶Ρ饶軌驗榘婷鎺砀S富的視覺印象，但對比過度也會產(chǎn)生凌亂感。

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

編排效果：

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

在進(jìn)行設(shè)計時，不管是中文與中文還是中英文搭配，都是需要經(jīng)過仔細(xì)分析和不斷練習(xí)，才能達(dá)到和諧統(tǒng)一、層次清晰而美觀大方的效果。

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

作者：鄧海貝

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何排版更高級？帶你重新認(rèn)識宋體字排版！

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

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

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

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

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

 

用戶主要通過表格瀏覽獲取信息、對數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等更多復(fù)雜操作、對比數(shù)據(jù)的差異與變化（關(guān)聯(lián)和區(qū)別）。好的表格信息展示設(shè)計，應(yīng)當(dāng)是能夠輔助用戶高效便捷的實現(xiàn)以上場景中的訴求。

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

 1

一、疏密適度

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

 1

1、定義合理的表格行高

a、行高模數(shù)設(shè)定

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

 

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

 

b、為小屏幕考慮一屏顯示的行數(shù)

表格行高決定屏幕內(nèi)能呈現(xiàn)的行數(shù)，即用戶在一屏內(nèi)能獲取信息的數(shù)量，主要影響用戶縱向?qū)Ρ葦?shù)據(jù)的效率。對于1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數(shù)的感知不強(qiáng)，但對于1366×768、1280*720等這類小屏，顯示行數(shù)有限，用戶進(jìn)行縱向數(shù)據(jù)對比的效率就會有所降低。在設(shè)計前，應(yīng)當(dāng)充分了解目標(biāo)用戶的行為訴求，了解目標(biāo)用戶設(shè)備屏幕分辨率的占比分布情況，有針對性的設(shè)置行高。

 

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

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

例如，Gmail提供默認(rèn)/標(biāo)準(zhǔn)/緊湊三種表格密度設(shè)置，如圖：

 1

2、靈活擴(kuò)展的橫向空間

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

a、列寬極限值設(shè)定

設(shè)計師需要根據(jù)表格承載內(nèi)容定義表格的列寬，應(yīng)包含最大/最小/默認(rèn)列寬的定義以及使用規(guī)則。

我推薦的一個規(guī)則是：

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

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

另外需注意最小值設(shè)定時應(yīng)避免信息展示出現(xiàn)【對聯(lián)式表格】。對聯(lián)式表格最大的問題在于，一屏內(nèi)展示的行數(shù)有限，當(dāng)用戶縱向?qū)Ρ葦?shù)據(jù)時，需往復(fù)滾動多次，記憶壓力大；橫向掃視時，閱讀視線不能一直保持左右橫向預(yù)覽，而是不停上下左右切換，使用體驗不佳。

 

b、橫向『偷取』屏幕外空間、行高模數(shù)設(shè)定

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

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

 

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

 

c、用戶自定義展示信息

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

 

1 

二、高效掃視

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

1

1、合理的對齊方式

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

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

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

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

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

 1

2、去除視覺雜音，強(qiáng)調(diào)對比關(guān)系

a、正確使用分割線，實現(xiàn)對表格行與列的強(qiáng)調(diào)

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

1

b、斑馬線作用有限

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

對同一類數(shù)據(jù)而言，分割線就已經(jīng)能夠明顯區(qū)隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態(tài)，強(qiáng)化橫向?qū)б?，避免出現(xiàn)列數(shù)過多引起數(shù)據(jù)錯行的問題。

 

1

3、突顯重要內(nèi)容的視覺重量

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

 1

三、精簡克制

體驗好的表格一定是克制的，克制應(yīng)表現(xiàn)在信息的適度隱藏以及內(nèi)容折行與截斷展示原則。

 

1、適度隱藏信息

a、隱藏低頻操作

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

 

對于表格行內(nèi)的操作我們也應(yīng)當(dāng)進(jìn)行優(yōu)先級排序，為用戶專門設(shè)置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關(guān)數(shù)據(jù)單元格中，用戶有訴求時hover對應(yīng)單元格即可快速發(fā)起操作。

 

b、隱藏輔助信息

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

 1

再比如，有父子層級關(guān)系的數(shù)據(jù)，可以通過父子折疊表格將子信息默認(rèn)隱藏，用戶根據(jù)需要，去展開查看詳細(xì)的子信息。

 

2、設(shè)定折行與截斷規(guī)則

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

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

 1

總結(jié)

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

最后，感謝你花費寶貴時間閱讀這篇文章，希望可以給你帶來一些啟發(fā)。我們非常期待我們的思考和一些小經(jīng)驗?zāi)軌驇椭闳ピO(shè)計滿足你的業(yè)務(wù)場景的表格，也可以通過這些方法和步驟，創(chuàng)造屬于你們團(tuán)隊自己的設(shè)計資產(chǎn)。 

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

可投簡歷至MEUX@BAIDU.COM

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

01.契機(jī)

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

在我們團(tuán)隊設(shè)計師之間經(jīng)常會聽到這樣一些問題：

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

總體說來就是設(shè)計文件管理難，規(guī)范一致性統(tǒng)一難，設(shè)計師對接協(xié)同難

在技術(shù)同學(xué)之間也會存在一些問題：

1、這部分代碼是誰寫的，怎么這么亂？
2、技術(shù)框架已經(jīng)落后了，我們現(xiàn)在不這么寫了，再優(yōu)化也沒有價值，我們計劃重構(gòu)代碼
3、大量重復(fù)的UI還原工作，研發(fā)變身”切圖仔”
4、明明是按照設(shè)計稿還原，設(shè)計同學(xué)總說差1px

而在產(chǎn)品側(cè)的問題卻是這樣的：
每次都做了很多重復(fù)的事，我們版本需求量太有限了，這些問題大大影響了產(chǎn)品節(jié)湊和業(yè)務(wù)擴(kuò)展的要求。

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

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

1

02.故事

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

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

設(shè)計插件提效：通過Sketch插件進(jìn)入設(shè)計師的工作流程，聚合設(shè)計資產(chǎn)，解決設(shè)計規(guī)范落地、設(shè)計資產(chǎn)可視化承載，提升設(shè)計規(guī)范和設(shè)計資產(chǎn)的使用率，增強(qiáng)資源共享避免重復(fù)設(shè)計。

設(shè)計協(xié)同管理：通過風(fēng)火輪協(xié)作平臺進(jìn)行團(tuán)隊資產(chǎn)、項目管理，實現(xiàn)設(shè)計稿在線標(biāo)注解析，供研發(fā)同學(xué)在線查看研發(fā)。

在這里有的同學(xué)就會說，這不就是做了一個藍(lán)湖嗎？

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

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

3

03.代碼生成

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

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

設(shè)計稿生成代碼的實際效果展示：

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

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

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

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

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

在漸變處理方面，首先根據(jù)漸變類型分為線性漸變、徑向漸變、環(huán)形漸變?nèi)N，然后根據(jù)漸變值、位置等信息計算漸變方向距離及漸變節(jié)點之間的比例，最終生成漸變樣式代碼。

3、圖片處理—精準(zhǔn)切圖方案

為了精準(zhǔn)還原圖片，我們通過調(diào)用sketch API進(jìn)行圖層截圖的方式，計算不規(guī)則圖形的精準(zhǔn)位置及大小，精準(zhǔn)切圖是保證我們的高精度還原頁面的關(guān)鍵；

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

1、結(jié)構(gòu)重組

由于設(shè)計同學(xué)輸出設(shè)計稿是以視覺為主，不太關(guān)注分組結(jié)構(gòu)的合理性，因此我們需要將原有的分組去掉，按照符合開發(fā)習(xí)慣的方式進(jìn)行重新分組。

2、特征分組

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

3、樣式優(yōu)化-樣式精簡、樣式排序

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

w

04.能力與規(guī)劃

我們做一下回顧，20年12月30日成功將「風(fēng)火輪」研發(fā)上線以來，歷經(jīng)7個月的時間，用戶覆蓋了集團(tuán)85%的產(chǎn)研團(tuán)隊，并且覆蓋了大多數(shù)的子公司。Sketch Plugin以容器的形式承載了6000+的設(shè)計資產(chǎn)和14調(diào)業(yè)務(wù)的設(shè)計規(guī)范，智能生成了1500+代碼。

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

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

在未來我們要以解放生產(chǎn)力為目標(biāo)，繼續(xù)深耕從設(shè)計到代碼的路線，以風(fēng)火輪為媒介，將產(chǎn)品、設(shè)計、開發(fā)緊密的連接起來，為我們內(nèi)部協(xié)同發(fā)光發(fā)熱。同時也歡迎更多的設(shè)計師和研發(fā)工程師加入我們，共同構(gòu)建風(fēng)火輪生態(tài)，編寫故事的下一篇章。

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

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》把設(shè)計變成終端代碼｜風(fēng)火輪背后的故事和規(guī)劃

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

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

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

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

問題1：你的產(chǎn)品真的需要Tab Bar嗎？

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

問題2：為什么產(chǎn)品要有Tab Bar？

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

#1顯示最重要的信息

導(dǎo)航欄應(yīng)該只包含最有用的信息，不能添加過多無用的標(biāo)簽使導(dǎo)航欄混亂。許多App在導(dǎo)航欄上添加搜索功能，因為這有助于用戶更快地導(dǎo)航和檢索內(nèi)容。

#2擴(kuò)展導(dǎo)航的功能

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

#3容納多種標(biāo)簽形式

多數(shù)App底部導(dǎo)航欄會使用「圖標(biāo)+文字」的標(biāo)簽形式，這樣能清楚地告知用戶點擊標(biāo)簽之后的結(jié)果。

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

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

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

#4文字標(biāo)簽應(yīng)該簡短

文字標(biāo)簽應(yīng)該簡短而清晰，準(zhǔn)確的文字說明能對用戶使用正確導(dǎo)航起到關(guān)鍵作用。

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

#5避免隱藏導(dǎo)航欄

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

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

#6傳達(dá)位置

Tab Bar幫助用戶輕松導(dǎo)航，但如果用戶不知道自己的位置，將會影響他們?yōu)g覽和使用產(chǎn)品的體驗。

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

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

#7從反饋中學(xué)習(xí)并不斷改進(jìn)

反饋是關(guān)鍵，如果想改善產(chǎn)品的導(dǎo)航欄設(shè)計，就要考慮并測試用戶最喜歡哪個導(dǎo)航選項，不使用哪個導(dǎo)航，需要四個還是五個選項等等。

#8在導(dǎo)航欄中顯示更新

Tab Bar不僅僅起到導(dǎo)航的作用，很多時候還能通過狀態(tài)變化告知用戶更多的信息。

原文地址：Clip設(shè)計夾（公眾號）

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》從TikTok、Youtube、Pinterest等主流海外產(chǎn)品中，學(xué)習(xí)如何設(shè)計底部導(dǎo)航欄

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

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

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

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》UI動效設(shè)計之設(shè)計原則

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

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

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

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

Aesop 的天貓國際店截圖

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

這樣一家原本挺傳統(tǒng)的中高端護(hù)膚品牌，與知名設(shè)計公司 Work&Co 合作推出了自己的購物網(wǎng)站。

這個網(wǎng)站確實做得很有特色，而且把護(hù)膚購物的體驗細(xì)節(jié)打磨到位，做到了大型網(wǎng)購平臺做不到的事情。

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

信息架構(gòu)

由于 Aesop 注重商品在精不在多，所以網(wǎng)站在導(dǎo)航里就直接將商品目錄列出了，當(dāng)然還是根據(jù)用途和膚質(zhì)進(jìn)行了分類。

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

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

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

內(nèi)容策略

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

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

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

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

第二屏?xí)峁┮粡埵褂蒙唐返囊曨l或者圖片，并提供更多信息：用法+用量+材質(zhì)+氣味。

第三屏?xí)嬖V用戶，做一套完整的護(hù)膚流程是怎樣的，以及還可以購買哪些配套的商品。

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

視覺語言

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

線下門店的也是在結(jié)構(gòu)上規(guī)整干練，但因為多用木質(zhì)材料，所以沒有工業(yè)風(fēng)格那種冷冰冰的感覺。

Aesop 的網(wǎng)站設(shè)計使用了與包裝紙類似的色調(diào)，把白底換成米黃色，上面無論是線條還是文字，都是統(tǒng)一的深灰色。

而且整個網(wǎng)站在布局上運用了很多大方框和抽拉效果，與線下門店的設(shè)計風(fēng)格像呼應(yīng)。

對于商品展示的風(fēng)格，設(shè)計團(tuán)隊也是給出了一套與網(wǎng)站設(shè)計匹配的范例，Aesop 未來如果要增加新品，也可以在此基礎(chǔ)上進(jìn)行拓展延伸。

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

思考總結(jié)

雖然國內(nèi)購物都是平臺的天下，但是很多大品牌還是沒有放棄做自己的網(wǎng)站。

Aesop 這個網(wǎng)站，不論是在視覺風(fēng)格、內(nèi)容策略還是信息架構(gòu)上，都是為這個品牌量身定制的，在細(xì)致程度上有統(tǒng)一模板的電商平臺難以企及的地方。

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

原文地址：體驗進(jìn)階（公眾號）

作者：設(shè)計師ZoeYZ

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》做好大平臺忽略的細(xì)節(jié)，這購物網(wǎng)站連獲三大設(shè)計獎

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

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

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