作者：黑馬青年

轉載請注明：學UI網》【UI設計作品總結】DJI 農業無人機 APP 頁面重構

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

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

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

作為舊友，當然不能錯過近水樓臺的學習機會。一方面我在學習和鍛煉自己的烘焙技巧，但更多的是，我想從蛋糕創意的過程中，提煉和提升自己的設計能力。下面就和大家在“主題創意”、“設計重點”、“色彩搭配 ”， 三個方面分享蛋糕設計心得。

首先是確定主題，就像我們在做一個設計的時候往往先要找到設計方向和主題，蛋糕設計同樣如此，我們要根據客戶表達的內容進行發散再聚焦。

例如：“我要給7歲的兒子制定一個生日蛋糕，他喜歡動畫片《貓和老鼠》，希望蛋糕是雙層的，夠10個人食用。”那么蛋糕的主題就出現了——卡通貓和老鼠的兒童風格全家型蛋糕。如何去切合主題并突出主題呢，就是要尋找重點元素，并圍繞其進行突破。

接下來就是尋找設計重點，包含整體造型，色彩搭配，裝飾元素，線條律動，肌理紋路，比例角度，協調搭配，和諧美感，細節亮點等。身為一名烘焙師，蛋糕上的每一個元素都要經過深思熟慮被設計過的，就像我們做界面設計一樣，頁面中每一個元素都不是隨便安放偶然出現的。

例如下圖中的哈利波特蛋糕，設計的重點即在于制作圍繞主角的元素內容，金飛賊和魔法杖能很好概括小哈利在魔法學院中最美好的回憶。加之偏暗色的奶油與金色銘文的結合，也表達了魔法世界的尊貴與神秘。

再如下圖中兩款男孩的世界為主題的蛋糕，設計的重點則是迎合小男孩的各類興趣愛好，以玩具元素為基礎，構建立體的場景或悅動的圖形肌理，以活潑和玩耍作為設計重點。

另外，在做蛋糕設計時，也可以遵從“少即是多”的原則，不管元素還是配色都可以簡單為主。日常生活中我們不難發現很多蛋糕做的五彩繽紛，很容易抓住人的眼球，但卻禁不住仔細推敲。

最后是配色，西點蛋糕的美麗一半是靠味道，另一半則是靠調色。我們常?？吹胶芏辔恼轮惺褂谩靶闵刹汀眮硇稳菝朗常鋵嵾@個用法是錯誤的，秀色可餐只能用來形容人的美貌和景色的秀麗。但我們從中不難看出人們對美食的理解之中，“顏色”是吸引人的第一要素。如果生活失去色彩，將變得毫無生命力。如果蛋糕沒有色彩，它將失去靈魂！所以，顏色搭配在蛋糕制作中則更為重要，它就是美觀與創意在蛋糕上的最高表現，那么如何進行蛋糕調色呢？

想要把奶油或翻糖調出滿意的顏色，首先需要了解色彩的基本常識，雖然對于身為設計師的我們來說，這是再熟悉不過的基礎知識，但也不妨讓我們一起復習和加強一遍。

1、色彩基本知識

三原色：紅、黃、藍是色彩的最基本單位，就是我們常說的三原色，這三種顏色不能再被拆解成其他顏色，也無法被其他顏色調和而得。

間色：三原色中任何兩種原色混合調和而形成的顏色，也叫二次色，和三原色形成對比色、互補色。分別是橙、紫、綠。

復色：是由原色與間色兩兩疊加得到的顏色，分別是橙紅、橙黃、黃綠、藍綠、藍紫、紫紅。

暖色：紅、橙、橙紅、橙黃、黃，象征太陽，創造柔和、柔軟，溫暖的感覺。

冷色：綠、藍、藍綠、藍紫、紫，讓人聯想起天空、大海，給人平靜、堅實、有力的感覺。

2、色彩寓意

每一種顏色都有著各自不同的含義，表達效果也會不一樣。（供參考）

3、色彩搭配建議

色彩不能過多，最好在色彩搭配中所有顏色不要超過5種，否則會顯得過于花哨。其中，主要配色需占據整體造型面積的50%以上為最佳，30%-40%作為全身輔助色，剩下的作為點綴。

冷暖色的使用，前面我們有講述不同的色系表達的情緒和親密程度是不一樣的，適合的人群也不一樣。一般情況下，我們可以根據人群特點來決定最終的色調。

– 如果送老師、同事或朋友，可以選擇冷色系，因為冷色系會令人產生沉穩、正式、高雅的感覺，能夠表達尊敬和真誠的情意。

– 如果送長輩、愛人或小孩，可以選擇暖色系，因為暖色系會產生熱情、明亮、活潑、溫暖的感覺，能夠表達祝福。

4、調色技巧提示

顏色不宜太艷麗：除非是一些主題非常明確的蛋糕，否則用色上不宜使用過于鮮艷厚重顏色，它會使蛋糕產生一種不自然的感覺，直白的說就是看起來不像食物。所以蛋糕可以多嘗試使用一些亮度高、色度低的顏色進行制作，也能體現出奶油的質感。下圖中左側的蛋糕就明顯比右側的主題蛋糕食物感更多一些。

顏色調制盡量由深到淺：蛋糕制作中白色的顏料一般都是奶油，建議一開始調色時盡量用少量的奶油霜，從而避免浪費食材。因為如果一開始用很少量的奶油霜，不小心把顏色調深了的話也是很容易補救，只需要加入一些白色奶油霜進行稀釋就可以了。

最后給大家展示一些烘焙實例～
– 節日主題蛋糕，烘托節日氛圍：

– 五彩繽紛的甜點系列：

分享了這么多蛋糕制作的心得和案例，大家是看會了呢？還是看餓了呢？^_^

希望這些配色技巧和方案可以為大家不僅在蛋糕制作方面帶來靈感，更能將其引入到日常設計工作和生活當中去。當然如果想要品嘗老師或者我制作的蛋糕也隨時歡迎。

作者：環鐵藝術家

轉載請注明：學UI網》好吃也要好看——烘焙與設計密不可分

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

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

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

海報視覺如何做的有創意？有哪些方法呢？

比如從構圖、擬物、光影、嫁接、對比、或者反差？等等等等

每一種又都可以拆分成很多細類。

比如對比在視覺海報中的運用，又有明暗對比、顏色對比、大小對比、虛實對比等等、太多了！

首先我們來分析一下大小對比是如何應用的。

一、大小對比

1、大小對比的作用

我們先看下這張圖：

兩個元素， 如果一樣大，平鋪在畫面中，就會顯得普普通通的，沒有任何亮點。

如果我們把其中一個放大，另一個縮小，再來看：

畫面是不是有特點了很多，并且有了節奏感， 就連文案排版也有更多的方式。

所以對比就是讓畫面的兩個組成部分/元素，以夸張的手法，布局構圖，以讓畫面產生強烈的反差。以提升畫面沖擊力，畫面縱深，內容豐富度。是非常有效提升畫面品質的方法之一。

那大小對比如何玩的精通，玩得高級呢？
我們一起來看一下：

01 人物與人物

⑴ 全身與半身對比

這種半身人物和小人物的對比，或者頭部表情眼神與小人物的對比主要可以展示人物細節，后面的人物放大表情傳遞情緒，前面的人物展示全身，傳遞狀態，可以很好地傳遞內容，常常用在各類視覺海報中。

⑵ 局部大特寫與小人物對比 (下面右側的圖是江湖哥2017年做的圖，分析兩次了，哈哈，備注下）

這種對比有強烈的大小反差，并且可以很大程度地拉伸畫面縱深，表現出很強的空間感！
并且還有一個細節：這兩張都是三角形構圖，非常穩定。

所以我們在設計的時候要也要注意畫面的構圖方式，夸張對比同時，要保證畫面的穩定和飽滿！

⑶ 全身與全身對比

全身的人物對比很小的人物，讓畫面有更多的空間可以利用， 可以留白想象，也可以打造場景氛圍，展示更多場景氛圍。

02 人物與場景

⑴ 小場景與大人物

夸張化的對比，讓本該小巧的人物矗立在場景里，很容易就營造除了一種巍峨磅礴的視覺感受。

一般需要很高的設計成本，工時不小。簡單點的做法我們可以直接在人物下面拼接一些小場景，比如這樣：

一些日常小需求中，沒有那么多的時間去打磨細節，就可以這樣做，既能保證按時完成需求，也能有一定的創意性。

⑵ 小人物與大場景對比

這種方法也非常具有創意性，把一些很小的物體放大，人物縮小， 反差表現兩個主體的大小對比。往往也能有出人意料的效果，需要更多的靈感和想法。

小節

創意本身就是打破常規，把不可能變成可能，達到出人意料的效果就是創意。本期分享的大小對比在畫面中的各種玩法就是可以很好達成這種目的的方法之一，大家可以多去嘗試，和練習，單這一種方法用好了就很牛逼了。

光影是在平面視覺里常用的一種技法方式，在說光影的創意之前，我們先說一下光影的作用。讓大家對光有所了解。

二、光影對比

1、光影的作用

我們為了直觀一些，直接用幾個圖片說明。
現在這張圖，這是一個瓶子的圖形：

我們給瓶子加入光影：

瓶子就變得立體了！

我們給背景加入光影

空間變得有縱深了，畫面層次也豐富了起來！

所以光在畫面中最基礎的有兩個作用：
⑴讓物體變得立體，更加真實！
⑵增加空間縱深，豐富畫面層次！

那我們應該如何利用光影，去做更有創意性的設計呢？

光影、光影，先有光后有影。那我們就先來說說主要表現光的幾個玩法：

2、光

⑴逆光
逆光就是主體在正前方，光源與主體重疊的一種使用方式，可以說是我們最常用的光影塑造方法之一了：

它的特點是光源與主體重合，形成很強的對比，在畫面可以可以非常好地聚焦視線，強化主體。

⑵側光
側光是光從主體側面打過來的光，一般不會太強：

主要是起到一個豐富畫面層次，營造氛圍的作用。

⑶頂光
從主體頂部打下來的光：

這種光，可以有效引導視覺，把需要的部分亮起，不需要的部分暗下去，由上至下，吸引人的視線范圍和順序。

⑷聚光
從前方照射過來的燈光：

聚焦視線，不要的地方全部暗下去，是一種最能收攏視線的打光方式了。有些細節比較豐富的聚光畫面，暗部也會保留一定的細節，不會是一個純黑色。

⑸造型
給光賦予一個造型，可以達到一種形式創意上的突破，
比如這種：

把光塑造成一個人物的造型，下面放置對應的人物垂喪的狀態，形成很強的人物情緒反差，可以說是非常有創意了。

還可以把光塑造成物體，比如這種：

把偷過來的光塑造成與主體相關的某個物品造型，中間放置一個小的人物，同樣也是一種很棒的創意方式。

⑹分割
除了打光方向，造型之外，其實還可以用光來風格畫面，也可以起到一些非常亮眼的視覺效果，比如這樣：

以上就是光的玩法了，可以看到，光的玩法多種多樣，利用好了可以讓畫面非常具有創意性。

說完了光，我們來接著說說影子的玩法都有哪些呢？

3、影

⑴投射
投射相交來說是比較常規的一種處理方式了：

用投影的方式加入到畫面中，可以增加畫面層次，渲染氛圍，讓畫面更有深度。

⑵造型
影子也是可以改變造型的：

本來是應該與人物動作一致的影子，被改變造型與人物產生互動或對比，映射出了非常強的故事性，和內容深度，非常具有創意性了。

在一些插畫或者游戲視覺中同樣也可以應用起來：

內容深度和想象空間直接拉滿！

⑶剪影
配合逆光的形式，將主體以剪影的形式表現出來：

剪影的表現形式，為了凸顯剪影，背景上都會有一個逆光源存在，并且輪廓要清晰，在素材上刻畫一些輪廓光源以讓人物變得立體，可以營造出很棒的神秘感，常常應用在神秘嘉賓、新品發售、新角色發布等活動中。

應用在一些游戲中，強烈的明暗對比配合富有氣勢的人物造型，也可以打造出一些很有視覺沖擊力的海報視覺！

光與影的玩法多種多樣，既可以讓畫面變得立體，又可以提高空間縱深。打光方式、造型、剪影、分割等等用法，可以讓我們的視覺變得不太平淡單調，讓畫面擁有無限想象力的創意方式。

海報視覺如何做的有創意？有哪些方法呢？

比如從構圖、擬物、光影、嫁接、對比、或者反差？等等等等
每一種又都可以拆分成很多細類。
比如對比在視覺海報中的運用，又有明暗對比、顏色對比、大小對比、虛實對比等等、太多了！

今天就先分析一下大小對比是如何應用的。

其他對比

1、陣營對比

陣營對比的特點是5:5分畫面，以對比色鋪墊畫面，形成強烈的視覺對比，和陣營感。常用于表現兩個不同的陣營，或者正反派的視覺表現中。

除了影視海報、游戲，競技類體育類也常常使用這種對比方法：

主要表現：對抗、競爭、陣營

2、狀態對比

狀態對比常用于表現同一個人或主體物的多種狀態，比如人物的正常狀態和特殊狀態對比。通過一些技法讓兩種狀態和諧地拼接到一起，是讓單薄畫面豐富起層次和內容的一種有效方法。

比如用畫面拼接的方式：

或者是同一主體，把兩種狀態表現到一起的方式：

主要表現：人或物的的兩種不同的狀態，冰對火、明對暗、正常對黑化等等。

3、時空對比

讓兩個不同的時空聯系到一起，形成時間地點上的反差對比。

⑴兩個不同空間的對比

由同一個元素貫穿兩個不同空間，提供畫面的延續性，表現出打破/穿越空間的意境，非常具有沖擊力。

⑵兩個不同時段的對比：

同一人物不同時期通過倒影等巧妙的表現方式，與主體形成時間上的對比。具有延續時間長河的感覺，為觀者提供非常大的想象空間，是一種很有創意性的的方法。

主要表現：空間穿越、時間變化的對比。

4、情緒對比

這種創意方式更多是傳遞人物的情緒，安靜的狀態
對比憤怒的狀態，快樂的狀態對比悲傷的狀態，

也可以表現人物的兩面性，正常狀態和陰暗面等等:

會讓觀者感受到強烈的情緒傳遞，視覺表現上反而不會那么注重。

主要表現：重視情緒的傳遞

5、虛實對比

此虛實非彼虛實。
和我們常說的虛實對比不同，這里指的是虛幻和真實的對比，比如：

用線條或者影子打造一些和實體區別開的虛構元素，和實體的元素形成對比，會有一種很虛幻浪漫文藝的感覺，可以用于表現一些幻想，不切實際的愛戀類似的主題中，能達到很少見的一些視覺效果。情感和創意都能得到很充分的傳遞。

總結 

以上就是我今天想和大家分享的內容，依舊是一些視覺層面的知識點，希望對大家所有幫助和啟發！

作者：慢熱

轉載請注明：學UI網》第一次寫3000字的干貨，獻丑了！

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

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

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

共識目標大致分為兩方面，拉齊理解和對齊標準。

拉齊理解，減小彼此間的認知差距。總體上，我們需要拉齊彼此對度量長短期價值和目標的理解；到各執行階段，則需要拉齊對所需資源和預期輸出的理解。

對齊標準，選擇團隊認同的維度指標與監測方式。個體對體驗優劣的主觀感受和不同崗位職責的關注視角不盡相同?？傮w上，我們需要以產品定位規劃為指導，結合客觀資源情況選擇適合的衡量標準。

如上圖舉例，一個對內的商戶操作系統與其他競對在系統操作層面的比較意義不大，度量模型中用于和同類產品對標的功能完整性的參考價值降低，則可以考慮暫不納入監測維度。

確定維度后的下探監測指標是共識最主要的內容。如上舉例，當前業務首要關心產品SOP（Standard Operating Procedure 標準操作程序）“使用率”，而這項指標與已確認的參與度指標定義極為貼合，那我們就不妨直接將該項做為參與度內衡量指標優先接入。

二、共識內容

到了具體的共識內容，我們再按立項之前、項目執行，項目復盤的階段順序聊聊。

1、立項之前

01.確認要做體驗度量嗎？
體驗度量模型從搭建、驗證，到持續分析應用需要一個漸進的過程。充足的數據和穩定的調研機制是良好應用模型的基礎。處于探索與深化初期的產品調整較為頻繁，數據資源可能也有待完善。這一階段體驗度量理論方法或可以輔助完善線上埋點、建立定期走查、用戶調研等機制，但對度量前期數據可用于分析的價值預期要適度降低。

02.首期度量的范圍和預期？

首因效應的影響不容忽視。雖然第一印象并非總是正確的，但卻是最鮮明、最牢固的，并且決定著以后雙方交往的進程。

如上說到，度量需要一個漸進的過程。我們可以選擇由局部擴充至整體，也可以由整體完善至局部。首期度量就面臨著這樣的選擇，當然選擇的范圍也對應著不同的預期。

由局部擴充至整體，圍繞業務當前需求，圈定最小度量范圍。這樣選擇，一方面可以適度減低試跑數據的成本；另一方面，首期度量結果還不便向前比對應用分析，但這不妨礙調研監測到的信息為業務當前需求提供輔助價值。需要注意的是，雖然選擇了由局部開始，但要始終遵循度量模型既定的統一框架，不能過分定制化。

由整體完善至局部，先監測宏觀指標再逐步完善下探。這樣選擇，一般可以快速選定已處于長期監測的指標接入系統，但也因指標較為宏觀，初期不免暫時無法解釋數據現象，就需要多期的下探追蹤來定位原因。

2、項目執行

01.指標統計

這部分是共識內容的主體，具體指標選取與統計方式我們在《體驗度量經驗分享：如何搭建體驗指標模型?》中進行了梳理介紹。這里補充兩個共識小方法，準備詳細參考資料和選取整合已有資源。

對應每次共識的內容，參考資料可以有效提高溝通效率。“站在前人的肩膀上”在具體可感的案例指標基礎上調整，遠比憑空討論有效。

選取整合已有資源，“避免重復造輪子”。舉例滿意度維度，如此前已建立了相似的NPS調研制度，那便不必費時費力重新發調研問卷或是開發線上場景化調研能力。接入現有調研數據，選擇符合模型需要的數據接入或許更經濟適用。然后，在此基礎上再去優化指標細項與收集方式。

02.分析提煉

指標選取和統計僅僅是準備，怎么應用現有食材炒出好吃的“菜”，目前依舊需要人工分析提煉。

結合業務所需，明確重點分析方向，深挖原因是收獲滿意結果的基礎。面對大量的數據呈現，雖不可預知提煉的結果，但唯有聚焦能減少迷失，盡量避免最終呈現結果過于泛泛。
分析結果往往包含需求洞察、痛點定位等多條信息，整體打包解決稍不實際。為跟進度量結果逐步落地，需明確優先級共識，推動度量不僅僅停留在“報告”的階段。

3、項目復盤

01.如何評定度量的投入產出？

每期度量復盤，除共識達成情況和后期調整外，團隊內對度量本身的投入產出評定常常有被忽略。

因度量周期較長，定位問題也較寬泛，即便已經定義了問題優先級，通常狀況下也不便短期內解決，有些方向性的洞察也會分散應用到更多常規需求上，度量的價值也就沒能被很好的跟蹤記錄下來。這一方面我們的經驗也稍顯欠缺，與需求綁定似乎還是不夠明確的解決方案。拿出來和大家分享，期待收獲更多的討論。

三、共識方式

最后，簡要聊聊共識的態度與形式。

中立的態度是溝通的基礎。每個環節共識前，可以先單獨收集團隊成員的思路想法，引導大家放心分享自己的見解，提高收集效率，而不需當即討論合適與否。

內部訪談，基于團隊成員職責差異，制定訪談大綱與溝通順序，為方便更高效的溝通與記錄。內部溝通在達成指標統計共識的基礎上，更可以幫我們對產品表象之下的業務邏輯有更加深入的理解。

穩定的節奏，明確每一階段的待辦與負責人，定期組會對齊進度，定期匯總小結，逐層匯報共識，得到更廣泛團隊成員的認可。

以上，便是對往期度量共識中非理論方法部分的梳理。如何溝通沒有標準，共識程度也難以衡量。期待大家提出寶貴意見，共同討論如何將度量的理論方法更好地應用于業務實踐。

作者：李明玥、賀紫蒙

轉載請注明：學UI網》體驗度量經驗分享：如何溝通共識?

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

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

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

文字是UI設計中最重要的信息傳遞元素，文字的排版看似容易其實并不簡單，因為文字的屬性眾多，比如字號、字間距、行高、段落等等。

很多設計師對文字屬性很了解，也能夠合理運用，但總會卡在開發環節，花費很長時間驗收，最終還是得不到理想效果。

下面我們從根上去認識文字，對文字中能夠影響排版間距的屬性，一一解析，并且了解開發邏輯，正確與他們對接。

二、文字-行高

字體設計師，為了能滿足文字行間距的合理展示，通常會給字體設定一定的行高。

行高就是在設計軟件中選中文字后，上下外邊框高度，字體的行高沒有標準，不同的字體一般默認行高也不一樣。

也就是因為字體的行高，讓UI設計師對文字與其他元素的間距設定，有不同的見解。

上圖都是30px的間距，但因為字體行高不同，A、B兩個方案的實際視覺間距不同。

認同A方案合理的設計師，理由是文字最好設置一定的行高，不然折行時視覺上沒有行間距，很擁擠，不得不再設置行高，最終30px的間距還是有間隙。

認同B方案的設計師，理由是UI設計本身對幾個像素的差距就很敏感，視覺上做不到統一，就是不合理。

兩者的表述都對，但也確實都有一定的弊端，下面給大家介紹兩個解決方案。

可以確定的是，為了滿足文字折行后的閱讀性體驗，最好帶有一定的行高，這樣也會利于與開發對接。

1、第一種：

首先說一下UI設計中，間距設定的一個理念，間距設定一般要設定一個最小柵格基數，如4、5、6、8為間距設定的起始數值。

然后頁面中，接下來所有的間距設定，都得是這個數值的倍數。（這點后面會詳細講解）

?在一個帶有文字的設計組件中，若設計思路上要呈現視覺統一的間距，那可以算出字號與行高的間隙，然后減去相對應的柵格數值，使其視覺上接近統一的間距。

下圖所示，設計思路上想呈現一個30px的統一間距，那就可以減去一個最小柵格數值。

若最小柵格數值是6px，最終給出的間距就是24px，視覺距離呈現的就是接近30px的距離。

這種方式也是我一直以來用的方法，好處就是沒有打破間距設定的原則。

設計的間距與開發看到的間距，都是有規律的柵格系統間距。

唯一有點不完美的地方就是，實際距離有時還會有一點小誤差，但其實在視覺上也完全可以忽略掉了。

2、第二種：

第二種方式就是精益求精，不考慮間距的柵格系統原則，算出字號與行高的間隙，間距上準確減去，保證沒有一丁點的誤差。

我找了一下這樣的產品，發現iOS端的滴滴APP中，有個模塊是這樣的設計理念。

上圖案例中，字號36px，行高44px，文字上下的間隙就是4px。

所以設置距離26px，加上行高間隙正好是30px，得到統一的間距效果。

這種方式有一個小小的弊端，就是開發感受不到間距的規則，最終設計驗收時可能會耗費更多的時間。

特殊情況：

另外有一種情況，就不能刻意去追求文字的視覺對齊，除非是平面設計，因為開發的邏輯也不會去支持這樣做。

上圖中錯誤的方式是因為，開發寫這個卡片，會寫成一個容積俗稱盒子，內容都會放在盒子里面，就算內容過多，也是向下進行擴展適配。

三、開發對接-關于行高（重點內容）

字體行高的間隙有了解決方法，接下來是與開發的對接，這也是最關鍵的一個環節，設計的再好，最終不能很好的落地，也是白搭。

UI設計師在設計驗收iOS端時，可能會遇到這樣的問題，設計與開發都用了同樣的間距參數，但最終呈現的間距還是不一樣。

原因就是，同樣的蘋方字體，iOS端開發的默認字體行高，與設計軟件中的字體默認行高不一樣。

比如在Sketch軟件中42號字的蘋方字體默認行高是59，但是iOS開發軟件中默認是52。

如果開發不手動調整字的行高，就會出現與設計的偏差。

根據我的調研，iOS開發工程師，若不是特殊情況，基本不會去改默認行高參數。

下面我們列舉一下，設計常用蘋方字號的默認行高，與iOS開發默認行高的數值對比，從中找一下規律。

上圖中可以得出，字號越大，設計默認行高與iOS開發默認行高差距越大。

所以設計上最好把默認行高改成與開發一樣的默認行高，這樣才能保障，開發不手動調整行高下，是一致的。

iOS開發字號默認行高有一定的規律，隨著字號的增加，行高會在字號基礎上+4、+6、+8、+10以偶數遞增。

雖有規律但也不容易形成記憶，推薦一個公式。

用字號除10后乘以2，再加上字號，就是iOS開發的默認行高，公式如下：

有公式可能還不夠便捷，再給大家推薦一款Sketch行高修復插件，Auto Fix iOS Text Line 1 for Mac 。

這款插件是專門針對iOS字體行高修復，使其與開發默認行高保持一致。（公眾號后臺回復666可獲取）

1、關于安卓

安卓系統 Material Design 使用的字體，中文是思源黑體，英文是Roboto。

因為安卓系統開源，不同的安卓手機廠商大多會更換字體。

比如小米手機MIUI系統中英文都使用Misans字體，所以安卓文字行高沒有一個標準。

安卓開發與iOS開發還有個不同點是，安卓開發使用什么字體，行高就是字體本身的默認行高。

思源黑體行高默認和字號大小一樣，Roboto行高接近蘋方字體行高。

如果設計稿按安卓規范設計，那思源黑體最好設置成與蘋方字體一樣的行高，然后安卓工程師手動去調整，iOS開發工程師所見即所得。

2、字體修復后使用經驗

關于修復后字體的使用方式，分享一些經驗，UI設計中使用文字的頻率很高，有標題、副標題、正文、輔助文字等，字號都有所不同。

當在設計中，確定這些文字字號后，做一次行高的修復，然后把這些文字創建成字符樣式，每次用時從字符樣式庫里面選擇即可。

最后說一下，特殊情況結合自身產品風格，去定義文字行高是完全沒有問題的，開發可以根據設計的定義的行高進行調整。

四、文字-段落

在有段落的文案中，很多設計師為了方便，直接給一個回車鍵的段落間距，這樣是萬萬不可取的。

一個回車鍵的間距，就是一行字的行高，通常這個間距都比較大，就算設計風格需要這么大的間距，那一定也要手動去設置段落。

段落數值的設定，一般情況要大于文字行高的一半，比如文字行高為42，那段落最好大于21，這樣段落間距加上文字行高，整體就是≥1.5倍。

為什么是≥1.5倍？原因是文字的行間距，一般大于1.5倍視覺上是比較舒適，例如字號是30，那行高設置為45，形成1.5倍的間距。

五、文字-字間距

字間距是字與字之間的間距，默認一般為0不做設定，特殊設計風格以外。

有一種情況，當一段左對齊文字中存在標點或數字英文字母時，那末尾可能不夠一個字符的空間，就會出現末尾留白的情況。

出現這種參差不齊的情況，確實不那么美觀，但在UI設計中實屬正常。

不用刻意去設置成左右水平對齊，這樣雖整齊，但因為不同的字間距會影響閱讀體驗。

六、文字-字號

不同字號間距設定有一個原則，當字號越大時，字與其他元素間距也就需要相對越大。

字號越大說明級別越高，級別越高從信息層級上來講，就需要較大的間距來呈現。

這是客觀上的一個原則，文字越大，就需要更多的留白去承托，就像文字的行高，字號越大文字的行高增加的倍數也就越大。

 1、如何定義間距？ 

間距是UI設計中建立信息層級、提升閱讀體驗、表達元素之間的關系、表現重要信息的重要方式。

定義合理的間距其實非常有學問，打開京東、淘寶你會發現元素之間的間距非常緊湊，打開愛彼迎、蔚來又會發現元素之間較為寬松，這是為什么？

其實就是他們的設計語言不同，致使展示出的形態也就各異，而間距就是表現設計語言的其中一種方式。

在UI設計中，間距的設定一般會選擇一個最小柵格基數，如4、5、6、8等數值，之后頁面中，所有的間距都要以，最小柵格基數的倍數呈現。

谷歌推出的設計語言 Material Design 推薦柵格系統的最小基數是8dp，一切間距、尺寸都應該是8dp的倍數。

淘寶的設計，據我所知用的是5的基數，愛彼迎用的是8的基數，從這點來看，基本可以得出一個結論，使用越小的數值基數，設計呈現通常就會越緊湊。

一個最小柵格基數的倍數值有很多，但其實通常有6個左右常用間距，就能滿足絕大多數的場景。

我目前負責的產品最小柵格基數是6，設計上常用間距大概有6個，完全能夠滿足大多數設計場景所需。

這些間距其實并不用刻意去選擇，當你使用最小柵格倍數值時間長了，就能自然得出幾個常用的間距，字號的選擇使用基本也適用這個邏輯。

另外，一個產品中模塊眾多，難免會出現一些特殊情況，所以肯定不能限定死只可以用那幾個間距。

除了上圖中列舉的常用間距之外，12、36、90、120等一些間距數值也會用到，只是用的頻率不會很高。

2、案例解析

接下來，根據最小柵格基數為6的設計規范，通過一個商品卡片案例，分析一下間距設定的幾個原則。

上圖中，首先要給各個元素分類，比如主標題和副標題是一類內容；標簽是一類內容；價格是一類內容；“找相似”按鈕又是一類內容。

根據親密關系原則，同類內容的間距應該更近，這樣有利于建立信息層級關系，提升用戶的可讀性。

具體多近呢？可以根據商品卡片在頁面中的外邊距，來進行分析定義。

看一個產品的外邊距基本能判斷，是寬松型排版，還是緊湊型排版。

產品的外邊距是根據設計語言，產品定位，產品內容多少等來定義，常見的邊距有20、24、30、36、48、60等。（大概就是這個范圍內）

使用較大外邊距，內容區域的間距要小于外邊距，小到可以直觀分辨即可，這樣可以體現出頁面中，內容的親密關系。

使用常規外邊距，比如我們的案例中，使用30px就是常規外邊距，內容區域要適當小于或等于外邊距，這樣視覺上體現的是統一性。

主標題與副標題屬于同類項，它們之間的間距一定要小于，卡片的內邊距，這樣整體看上去才能體現信息層級。

間距小到多少，還是那個理念，可以直觀感受到比內邊距小即可為止，不能過小。

一般來說，視覺上的間距大概是內邊距（同模塊中的大間距）的一半，就會表現的不錯。

案例中設置的是一個柵格單位6px，再加上文字的行間隙，視覺上大概就是15px的間距，就是內邊距的一半。

接下來，給案例加標簽，標簽與文字不是同類信息，所以要適當與主副標題拉開間距。

通常第一選擇就是，視覺距離與內邊距30px，保證統一。

案例中設置的是24px，再加上文字的行間距，就非常接近30px。

接下來是價格，對于一個商品卡片設計，價格是需要著重突出體現的。

一般設計上要突出一個元素，大概3種方式：一是改變顏色；二是放大；三是加大留白；也就是加大間距。

案例的商品卡片，設計風格價格顏色規范是黑色，所以顏色不能改變。

只能放大或加大留白，放大和留白得在合理的范圍內，不然就會破壞卡片的整體結構性。

間距上與標簽設置30px的間距，加上文字的行高，視覺上的間距，會成為卡片中最大的間距留白，從而起到突出的作用。

這種設計方法，在一個設計組件中，最好只出現一個，不然整體結構就會有一定程度上的破壞。

另外強調一下，統一性固然重要，但設計的核心是為需求目標服務，所以，這時候統一性的優先級是次于需求目標的。

就像淘寶首頁的瓷片區，間距非常緊湊，失去了一定的美感，但這樣做確實展示了更多的內容，滿足了需求目標。

 七、最后 

最后做個總結：

1、關于文字的間距，要考慮文字的行高，盡可能保持視覺統一性；

2、iOS設計稿，設計軟件中默認的文字行高，與開發軟件中的默認行高不一致，最好修復行高，與開發保持一致；

3、文字段落不要用回車鍵去定義，要用段落參數，段落間距通常要大于文字行高1.5倍；

4、多行文字出現這種參差不齊的情況，不要設置為左右水平對齊；

5、一般字號越大，字與其他元素間距也需要越大；

6、UI設計要結合產品定位等，制定最小柵格基數，然后任何間距要以最小柵格基數的倍數呈現；

7、一個產品中，通常設置6個左右的間距數值，能滿足大多數設計的場景；

8、善于使用親密關系、留白理念、統一性等設計原則，設計前理解需求目標。

作者：吳星辰

轉載請注明：學UI網》一文搞定UI設計間距那點事！【進階篇】

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

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

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

排版的目的是幫助用戶整理信息，提升閱讀效率，所以我們需要給文字分組、劃分層級關系。

文字最重要的屬性是可讀性，且不管排版形式如何，首先要讓用戶看清、看懂，然后才要談排版形式、美觀、協調、設計感等等。

現在的電商詳情頁，用戶使用場景幾乎都來自于手機端，文字小了會看不清，文字大了又會過于粗暴、缺少精致感，所以主副標題文字的大小應該在什么范圍，才能兼顧可讀性和設計美感呢？

我以6.5英寸屏幕的P50 pro手機為例，經過多次對比實驗得出一個可以參考的字號范圍：主標題：50-80px、副標題：26-36px。

當文字大小控制在上述范圍內，更利于詳情頁的文字信息表達，當然這組數據并非絕對，有一定的局限性，所以僅供大家參考。

同時為了嚴謹，我又結合眾多案例進行驗證，得出的結論也是基本都符合。

字號規范之后，接下來再來說說排版結構。

詳情頁的文字排版結構相對來說并不復雜，常見的對齊方式就三種，即居中對齊、左對齊、右對齊。

這也是最基礎的文字對齊方式，但在實際工作中，我們一般還會用到線條、英文、圖案等裝飾元素，對整體排版豐富美化，平衡、增加其節奏感和設計感。

比如像下面這樣：

你會發現不管怎么美化豐富，其基礎排版結構、對齊方式還是沒有變化。所以我們能在這三種基礎的排版結構上，變化出很多種不同的視覺呈現形式。

那么接下來具體說說如何做好排版。

設計中的每個元素在視覺上都具有一定的“分量感”，所以當需要文字排版時，我們可以根據畫面重心來選擇排版形式，這也是工作中很常用的文字排版思路。

1、居中對齊排版

正如上面所說的那樣，居中對齊的排版重心更穩，自然也更適合用在相對平穩的構圖，比如：

如上圖所示，不管產品如何擺放，只要畫面重心始終相對平穩，居中對齊的排版就很好用，也是最不容易犯錯的，看幾組案例：

做個案例，下面這張圖本身構圖就相對穩定，又沒有其他元素干擾文字排版。

那么只需要加上文案，做好對齊，一張詳情頁海報就做好了。

說完居中對齊排版，再來說說左右對齊排版，居左和居右本質上沒太大區別，無非就是我們習慣的閱讀方式是從左往右，出于用戶習慣的原則，左對齊相對而言用到的會多一些。

2、居左、居右對齊排版

一般情況下，當畫面重心不平穩時，我們會考慮通過文字排版、裝飾元素等來平衡，所以這時候就會用到居左、居右對齊排版。

如上圖所示，當畫面重心偏向一側時，根據情況選擇居左或居右對齊排版就變得順理成章，比如下面幾個案例：

在設計工作中，僅依據重心排版雖然很常用也好用，但如果都按照重心原則排版，那么形式上難免過于單一，而且也有些許局限性。

比如你也能看到一些案例，即便文字排版前的畫面重心相對穩定時，并沒有按照上述所說的重心原則，一定要用居中排版的形式。

那么我們還可以依據什么來做好詳情頁的文字排版呢？

因為電商詳情頁的使用場景更偏向手機端，而且現在都是按照手機一屏的尺寸為單位劃分模塊，所以圖文的形式大多數情況下都是上下結構。

因此受其結構的特質影響，詳情頁排版相對而言并不復雜，不像首頁、海報、平面類設計那樣，需要太多的板式結構，所以很少會出現故意營造畫面重心不穩，用作突出強調的。

這也是我在翻閱大量優秀的詳情頁案例中驗證后得到的結論。

在詳情頁文字排版的過程中，畫面重心并不是影響排版結構的唯一因素，還會受畫面結構、每一屏尺寸、文字可閱讀性、整體布局等等的影響。

比如用下面這張圖，雖然圖中兩個產品的長短不同，但兩個產品所占的直覺比重是差不多的，所以整體的視覺重心是相對平穩的。

可如果將這張場景圖做詳情頁首圖，即便是重心相對平穩，文案也不再合適用居中排版的形式做，因為受到了圖片本身結構的影響。

下面我簡單的排了一下：

最終是這樣的：

所以就出現了相對平穩原則。

理解起來很簡單，就是利用英文、線條、圖標、數字等裝飾元素或必要排版元素平衡畫面，營造視覺上的相對平穩即可。

原則上來說，相對平穩原則適用于絕大部分詳情頁的文字排版工作。

這就能解釋為什么重心明明很平穩，有很多詳情頁案例中的文案不用居中對齊也能做的很出彩的原因：“他們做到了視覺上的相對平穩。”

如下圖所示：

視覺相對平穩是允許存在偏差的，并不是像對稱式構圖那樣要求那么絕對，設計有很強的主觀性，也不像數學那么嚴謹，看起來差不多就行。

當然，你也能看到一些豎向排版，或不規則的排版，但核心思想是共通的，就是視覺上的相對平穩。

設計的魅力在于不確定性，沒有一成不變的解決方案，詳情頁排版同樣如此，不管是依據重心原則還是相對平穩原則做排版，都只是為大家提供設計理論依據。

比如下面這個案例：如下圖將產品簡單的擺放好。

初步的詳情頁海報構圖就出來了，很多人的第一直覺就是居中排版，因為畢竟這么構圖整體重心是穩的，比如像下面這樣：

一個簡單的海報雛形就有了，可能你會感覺有點太平了、還有點空，那么我們可以加點光影元素豐富一下畫面，再稍微調下整體的顏色，如下圖：

這個海報的確很簡單，但感覺還不錯，如果按照相對平穩原則，換個排版形式是不是也可以：

不同的排版結構給人的感受也不一樣，兩者沒有對錯，至于你會選擇用哪一種，這就取決于你對整體規劃和自己的主觀感受了。

設計理論固然重要，但設計師的主觀感受也很重要，所以我們除了要學好理論知識外，還要提升自己的審美。

補充：本文以詳情頁首圖排版為切入點，詳情頁中其他模塊同理。

好了，就寫這么多吧，下次再見！

作者：老張

轉載請注明：學UI網》深度剖析：如何做好詳情頁文字排版？

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

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

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