對(duì)于設(shè)計(jì)師來說作品是最有效的話語權(quán)，不局限于工作項(xiàng)目的輸出才能沉淀更多作品，日常的磨練對(duì)于專業(yè)提升來說也是至關(guān)重要的。從 0-1 去梳理全案設(shè)計(jì)，是對(duì)自己專業(yè)基礎(chǔ)進(jìn)行體檢的有效方式，通過查漏補(bǔ)缺去不斷地完善自己的專業(yè)技能。

關(guān)于時(shí)間戳

時(shí)間是最會(huì)騙人的，總是無私的贈(zèng)送給你，不提醒剩余庫(kù)存，消磨殆盡之時(shí)也不會(huì)給個(gè)提示。

上學(xué)的時(shí)候我們希望趕緊放學(xué)，進(jìn)入大學(xué)我們希望早點(diǎn)畢業(yè)，邁入職場(chǎng)我們希望多幾年工作經(jīng)驗(yàn)。一晃十年職場(chǎng)經(jīng)歷時(shí)，又在嘆息時(shí)間過得真快，還是剛?cè)胄械臅r(shí)候輕松呀！我們總是這么自相矛盾。我們需要的是成長(zhǎng)的過程，不是一步到位的終點(diǎn)，沒有過程中的積累和反思，是無法達(dá)到專業(yè)的頂端的。

時(shí)間戳便是以時(shí)間為引導(dǎo)線，為大家抓住時(shí)間、管理時(shí)間和更好地駕馭時(shí)間，讓你的時(shí)間有跡可循。在這里你可以更好的記錄自己的思考和尋求幫助，也可以管理自己的資源形成時(shí)間軌跡，還可以創(chuàng)建私有化的靈感資源庫(kù)。只有不負(fù)光陰，光陰才不會(huì)辜負(fù)你我。

以下作品單個(gè)界面設(shè)計(jì)和最終的作品包裝使用軟件 Sketch，作品僅展示了部分功能和業(yè)務(wù)，不代表全部業(yè)務(wù)邏輯。

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》時(shí)間戳 【APP UI/UX 設(shè)計(jì)總結(jié)】

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

據(jù)埃森哲2021年中國(guó)“獨(dú)角獸”研究顯示，45%的獨(dú)角獸企業(yè)認(rèn)為海外拓展至關(guān)重要，其中82%的企業(yè)計(jì)劃24個(gè)月內(nèi)進(jìn)軍海外市場(chǎng)，從游戲、開發(fā)者服務(wù)和SaaS（軟件即服務(wù)），到硬件設(shè)備、電商等行業(yè)，越來越多的初創(chuàng)企業(yè)從萌芽期就瞄準(zhǔn)了全球化；網(wǎng)經(jīng)社電子商務(wù)研究中心發(fā)布的《2021年度中國(guó)跨境電商市場(chǎng)數(shù)據(jù)報(bào)告》指出，2021年全年中國(guó)跨境電商市場(chǎng)規(guī)模達(dá)14.2萬億元，相比2020年增長(zhǎng)了13.6%，其中出口占比達(dá)77.46%。除此之外，IT桔子《2022年中國(guó)資本海外投資并購(gòu)報(bào)告》統(tǒng)計(jì)，2021年由中國(guó)資本參與的海外投資事件數(shù)達(dá)454起，創(chuàng)下自2004年以來的新高，而2022年僅前2個(gè)月，中國(guó)資本對(duì)海外已有40多起、約50億元規(guī)模的投資。中國(guó)貿(mào)促會(huì)研究院今年3月的報(bào)告顯示，中國(guó)對(duì)外直接投資流量和存量連續(xù)四年穩(wěn)居全球前三，近八成中國(guó)企業(yè)將維持和擴(kuò)大對(duì)外投資意向，看好對(duì)外投資前景。
中國(guó)經(jīng)營(yíng)報(bào) 2022.5

不難看出，即時(shí)是在疫情肆虐全球的今天，“出?！比允鞘侵袊?guó)企業(yè)發(fā)展的重要方向，包括京東在內(nèi)，越來越多的中國(guó)企業(yè)開始重視海外市場(chǎng)，在跨境電商、游戲及其他獨(dú)立應(yīng)用開發(fā)、投資等方面全面開花，從出海扎營(yíng)，逐漸成長(zhǎng)為全球化企業(yè)。

中國(guó)出海領(lǐng)先品牌50強(qiáng)

中國(guó)企業(yè)出海成功與否，離不開一個(gè)關(guān)鍵點(diǎn)——本土化設(shè)計(jì)。作為設(shè)計(jì)師，面對(duì)新鮮未知的市場(chǎng)，如何找到適合海外產(chǎn)品的設(shè)計(jì)方向？ 在服務(wù)京東東南亞業(yè)務(wù)的這幾年中，我們也逐步累積了一些本土化設(shè)計(jì)的方法，這里就給大家分享幾個(gè)小心得。

京東的國(guó)際化布局也已歷時(shí)多年，2015年開始正式進(jìn)軍海外電商市場(chǎng)，上線了多個(gè)國(guó)家館，并同時(shí)開始在海外成立獨(dú)立站點(diǎn)。2015年底，京東成立了印尼站 JD.ID，后又于2018年成立了泰國(guó)站 JD CENTRAL，兩大站點(diǎn)立足東南亞市場(chǎng)，逐步形成了全球化的布局，也繼續(xù)擴(kuò)張到荷蘭等歐美國(guó)家。國(guó)際化已經(jīng)成為了京東一個(gè)重要的戰(zhàn)場(chǎng)。

當(dāng)一個(gè)產(chǎn)品需要進(jìn)入一個(gè)新的國(guó)家市場(chǎng)，在初創(chuàng)和快速發(fā)展的時(shí)期，作為設(shè)計(jì)師，首先要對(duì)這個(gè)國(guó)家有一些基本認(rèn)知和了解。

一千個(gè)讀者眼中就會(huì)有一千個(gè)哈姆雷特，人和人的差異尚且如此，國(guó)家之間的差異就更大了。由于文化背景、歷史淵源、自然條件等多方面的影響，來自不同國(guó)家的人會(huì)對(duì)同一個(gè)事物產(chǎn)生不同的感受和反應(yīng)。面對(duì)一個(gè)陌生的國(guó)家，我們需要打破固有印象，拋棄對(duì)用戶的先天認(rèn)知，盡量用客觀的眼光去看待他們。

我們可以通過一些通用性的行研，來認(rèn)識(shí)市場(chǎng)，從而規(guī)避風(fēng)險(xiǎn)，并得到體驗(yàn)設(shè)計(jì)的大方向。這里可以引用一些經(jīng)典的分析模型，來協(xié)助我們做全方位的行研分析。

PEST是一個(gè)非常常用的分析模型，一個(gè)行業(yè)或者公司能夠發(fā)展得如何，靠的不僅僅是自身實(shí)力，外部環(huán)境也很重要，PEST是一個(gè)有效判斷行業(yè)或者公司發(fā)展前景的方法。我們可以通過搜集公開資料，來明確目標(biāo)市場(chǎng)的政治、經(jīng)濟(jì)、技術(shù)和社會(huì)環(huán)境。但是這些對(duì)設(shè)計(jì)來說還不夠，另一個(gè)模型NESC則在這個(gè)基礎(chǔ)上增加了自然環(huán)境和人文環(huán)境的研究?jī)?nèi)容，其中包含了對(duì)于東南亞國(guó)家很重要的宗教習(xí)俗等基礎(chǔ)信息。

這兩個(gè)模型里其實(shí)包含了一個(gè)以國(guó)家為單位的群體大部分的特征，可以極大限度的勾勒出一個(gè)國(guó)家的基本情況，通過這兩個(gè)維度的分析，我們可以初步推導(dǎo)出一些本土化基本原則。

舉個(gè)例子，京東的吉祥物JOY原本是一只小狗，但在伊斯蘭教中不允許狗與人有密切接觸，為了規(guī)避宗教習(xí)俗的禁忌，所以印尼站使用了小馬的形象作為吉祥物。在很多重視宗教的國(guó)家，充分表達(dá)對(duì)當(dāng)?shù)匚幕淖鹬?，是非常重要的?

這里介紹一個(gè)人文研究的理論工具，霍夫斯泰德（Hofstede）文化維度理論，這套理論問世距今已經(jīng)有40多年歷史了，它把文化特征分為6個(gè)維度，在研究跨文化差異時(shí)被廣為引用。

荷蘭學(xué)者Hofstede（1997）的研究認(rèn)為，文化對(duì)于人就如同計(jì)算機(jī)程序?qū)τ谟?jì)算機(jī)一樣；程序限制了我們的思維方式，我們的感知，我們的行動(dòng)等等，他試圖利用主要來自跨國(guó)公司IBM的數(shù)據(jù)來建立各種民族文化的特征類型，這些數(shù)據(jù)來自對(duì)50多個(gè)國(guó)家的10萬人所進(jìn)行的調(diào)查。后續(xù)，這套理論被后來者不斷完善改進(jìn)，并逐漸擴(kuò)張為在全球各個(gè)國(guó)家定期做大規(guī)模調(diào)研和信息收集，匯總成國(guó)家維度的數(shù)值，為文化分析提供了理論支撐。理論中的六個(gè)文化維度如下圖：

有了這些數(shù)據(jù)，我們可以更直觀的看到各個(gè)國(guó)家的文化特征和差異點(diǎn)，也可以推導(dǎo)出很多有價(jià)值的結(jié)論。下圖是中國(guó)文化和印尼、泰國(guó)文化在各個(gè)維度的對(duì)比：

關(guān)于霍夫斯泰德理論的分析和應(yīng)用，我的另一篇文章里有更詳細(xì)的解析，感興趣的同學(xué)可以移步觀看：跨國(guó)文化的設(shè)計(jì)研究方法

第二個(gè)部分就是用戶研究。

騰訊有一門經(jīng)典的課程《像蘑菇一樣思考》，其中描述了一個(gè)小故事：

有一個(gè)精神病人，他每天什么事都不做，打著一把傘躲在角落里，所有醫(yī)生都覺得這個(gè)病人沒救了。有一天，一個(gè)心理專家站在他的身邊，什么都不說，拿著一把傘跟他一樣蹲在那里。就這樣堅(jiān)持了一個(gè)星期后，他終于向?qū)＜疑磉厹惲藴悾f了句：“難道你也是蘑菇？”

這個(gè)故事告訴我們，用用戶的方式去思考，才能發(fā)現(xiàn)問題的根源所在。需求來源于對(duì)用戶的了解——對(duì)用戶的了解，需要感同身受，變成用戶，“我，就是用戶”。洞察人性，以己推人，并不是一件容易的事。我們需要了解用戶，了解市場(chǎng)，從而尋找機(jī)會(huì)點(diǎn)，那就需要和用戶“對(duì)話”。

用研是一個(gè)很大的課題，去了解用戶，光靠空想是不行的，得真刀真槍的去接近他們，深度訪談、問卷調(diào)研、意見反饋、走進(jìn)場(chǎng)景、觀察用戶行為等。我們和海外用戶的距離很遠(yuǎn)，但也要了解用戶的想法，明白他們的關(guān)注點(diǎn)、購(gòu)物傾向、訴求等，當(dāng)我們需要做一個(gè)用戶問卷調(diào)研，或者訪談座談會(huì)，最佳方案就是和海外的本土團(tuán)隊(duì)協(xié)作來完成。

印尼用戶問卷調(diào)研題干 初稿

上圖是我們?cè)谧鲇∧嵴镜挠脩粽{(diào)研時(shí)，和印尼本土的CX團(tuán)隊(duì)共同合作完成的一個(gè)調(diào)研題干。我們把對(duì)用戶的疑問和好奇，落實(shí)在問卷中，通過cx團(tuán)隊(duì)的發(fā)放、收集和分析，反饋回來，從而獲得用戶的真實(shí)想法。

除了定向調(diào)研，周期性的用戶反饋跟蹤也很重要。

常用的兩個(gè)指標(biāo)就是客戶滿意度和凈推薦值，客戶滿意度更重視用戶的主管感受和態(tài)度，凈推薦值則傾向于忠誠(chéng)度和推薦意愿，兩個(gè)指標(biāo)通常會(huì)用在不同的場(chǎng)景中，我們定期追蹤的指標(biāo)是以NPS為主，隨時(shí)跟蹤用戶的反饋和數(shù)據(jù)變化，并定期匯總落實(shí)在優(yōu)化中。

此外，調(diào)研一定是顆粒度可細(xì)化的，當(dāng)我們對(duì)于一些關(guān)鍵流程節(jié)點(diǎn)，已經(jīng)有了非常明確的調(diào)研目的，可以在系統(tǒng)流程中設(shè)定一些觸發(fā)條件，去觸發(fā)用戶對(duì)當(dāng)前操作的反饋，真實(shí)的環(huán)境場(chǎng)景可以幫助調(diào)研者更貼近用戶，理解各種用戶群的使用場(chǎng)景和需求。

比如搜索列表也的點(diǎn)擊低于預(yù)期，較多用戶長(zhǎng)時(shí)間瀏覽搜索列表，翻了幾屏的商品，卻遲遲沒有進(jìn)入商詳頁(yè)，這是就可以觸發(fā)對(duì)應(yīng)的問卷提示，詢問客戶，是否遇到了問題，從而去更精準(zhǔn)的找到用戶痛點(diǎn)。

搜索列表頁(yè)瀏覽到一定深度時(shí)，觸發(fā)的反饋問卷

新業(yè)務(wù)、新產(chǎn)品的開拓，離不開宏觀層面的競(jìng)品分析，簡(jiǎn)單來說就是：知己知彼，百戰(zhàn)不殆。

當(dāng)我們進(jìn)入一個(gè)海外市場(chǎng)的時(shí)候，當(dāng)?shù)赝呀?jīng)有了一些成熟的本土同行業(yè)產(chǎn)品，或其他國(guó)際化公司的本土產(chǎn)品，它們很可能已經(jīng)給本土用戶培養(yǎng)了一定的認(rèn)知基礎(chǔ)和使用習(xí)慣。我們對(duì)當(dāng)?shù)厥袌?chǎng)的理解或許還不那么深入，這時(shí)我們?nèi)绻柚愃频母?jìng)品，通過橫向?qū)Ρ冗@些競(jìng)品以及它們的上下游，可以觸類旁通，可以從更宏觀的層面來理解這個(gè)市場(chǎng)。通過競(jìng)品分析，我們可以更好的了解市場(chǎng)和用戶，明確我們與競(jìng)品的差異點(diǎn)、優(yōu)劣勢(shì)，從而達(dá)到知己知彼，并可以進(jìn)一步尋找創(chuàng)新機(jī)會(huì)。

舉個(gè)例子，我們?cè)谧鎏﹪?guó)站的O2O項(xiàng)目時(shí)，通過對(duì)直接和間接競(jìng)品的比較分析，可以明確我們自身產(chǎn)品的能力優(yōu)勢(shì)和市場(chǎng)定位。也了解了用戶對(duì)于這種商業(yè)模式的基礎(chǔ)認(rèn)知。

我們提取用戶已經(jīng)形成良性認(rèn)知的元素和色彩，適度與競(jìng)品做差異化，進(jìn)一步推導(dǎo)得出了instant joy的品牌logo、品牌色和吉祥物。

雖然我們的O2O業(yè)務(wù)在泰國(guó)市場(chǎng)還是一個(gè)新模式，但是對(duì)打車、便利店、外賣等間接競(jìng)品的分析，我們還是可以獲得很多有價(jià)值的信息，也可以勾勒出用戶對(duì)于不同業(yè)務(wù)模式、設(shè)計(jì)風(fēng)格、元素的接受程度。

所以，做分析不要拘泥于本行業(yè)的直接競(jìng)品，從其他行業(yè)中選擇和我們的產(chǎn)品有類似、相通點(diǎn)的產(chǎn)品，更能帶來突破性的啟發(fā)。我們或許都曾遇到過這樣的困境，我們?cè)谒伎家粋€(gè)新業(yè)務(wù)如何去突破，或者思考某一個(gè)功能如何設(shè)計(jì)的時(shí)候，想遍了各種思路、翻遍了已知的競(jìng)品，卻仍然想不到突破的方式，也就是遇到了瓶頸。這時(shí)候就應(yīng)該去看一些不同行業(yè)的競(jìng)品，獲取更多的思路。

在做產(chǎn)品的過程中，當(dāng)我們有明確的目標(biāo)時(shí)，比如需要對(duì)一個(gè)關(guān)鍵模塊做分析推導(dǎo)，就可以通過數(shù)據(jù)分析去推導(dǎo)策略。

成熟的設(shè)計(jì)師往往會(huì)把自己的設(shè)計(jì)經(jīng)驗(yàn)逐漸內(nèi)化為一種設(shè)計(jì)直覺，用直覺去做設(shè)計(jì)，有利有弊，這里不多評(píng)判，但是對(duì)于一個(gè)未知的海外市場(chǎng)來說，直覺就不一定可靠了。

我們來看一組數(shù)

這是泰國(guó)站單日UV的來源占比，其實(shí)和我們直覺的認(rèn)知是很不一樣的，國(guó)內(nèi)的APP流量是絕對(duì)王者，PC和M端可能非常少，但在泰國(guó)，M端的流量是最高的。很多人會(huì)疑惑，為什么？我們接著看數(shù)據(jù)：

進(jìn)一步提取各端的數(shù)據(jù)來源，可以看到APP端的UV來源最多的是高清屏手機(jī)，也就是蘋果的PLUS和安卓的1080屏幕（進(jìn)一步看數(shù)據(jù)就會(huì)發(fā)現(xiàn)，大部分是安卓手機(jī)）。

為什么小屏手機(jī)占比這么少？看一下M端流量占比，我們的疑惑就解開了。訪問M端的流量占比最高的是小屏和超小屏手機(jī)，這部分手機(jī)，可能是比較老的機(jī)型，或者中國(guó)已經(jīng)淘汰的型號(hào)，他們的系統(tǒng)可能不支持安裝APP，所以只能訪問M端頁(yè)面。

我們?cè)龠M(jìn)一步看PC端，很意外的是，小型平板和超小屏設(shè)備占比達(dá)到了35%。我們把pc和M做一個(gè)縱向?qū)Ρ?，可以看到，有一部分小屏設(shè)備的分辨率是重合的，其實(shí)很多山寨平板電腦，因?yàn)樵O(shè)備識(shí)別的問題，只能瀏覽PC版頁(yè)面，體驗(yàn)是很差的。

不同分析方法是有相互呼應(yīng)的，我們?cè)偃タ粗靶醒械姆治鼍蜁?huì)更有體會(huì)。泰國(guó)用戶的手機(jī)占有率極高，移動(dòng)互聯(lián)網(wǎng)接受率很強(qiáng)，但他們平均收入并不高，很多人使用的就是小牌低價(jià)手機(jī)，甚至中國(guó)出口的二手手機(jī)。

這部分占比極高的用戶，他們使用互聯(lián)網(wǎng)的訴求很強(qiáng)烈，但礙于設(shè)備的限制，只能享受縮水版、閹割版的產(chǎn)品。了解了這一客觀情況，產(chǎn)品和設(shè)計(jì)的迭代策略也需要做相應(yīng)的調(diào)整，比如說對(duì)于泰國(guó)站，我們需要進(jìn)一步優(yōu)化小屏的體驗(yàn)，推進(jìn)響應(yīng)式頁(yè)面的落地，以及優(yōu)化技術(shù)層面對(duì)端的識(shí)別等。

數(shù)據(jù)從用戶中來，通過一系列的數(shù)據(jù)沉淀、處理和分析找出機(jī)會(huì)點(diǎn)做決策再回到用戶中去，提升用戶體驗(yàn)，帶動(dòng)業(yè)務(wù)增長(zhǎng)，驅(qū)動(dòng)業(yè)務(wù)。

這里分享幾個(gè)數(shù)據(jù)分析的常用概念和方法：

這五個(gè)概念，串聯(lián)起了一個(gè)數(shù)據(jù)分析思維的基礎(chǔ)框架，也為業(yè)務(wù)和產(chǎn)品搭建了一個(gè)全面的分析體系。

數(shù)據(jù)分析能力的核心不在方法理論和工具模型，更多的是建立一種數(shù)據(jù)意識(shí)，要能夠敏銳的發(fā)現(xiàn)應(yīng)該去關(guān)注的數(shù)據(jù)、并且能夠從這些數(shù)據(jù)中找出潛在的規(guī)律，推理出數(shù)據(jù)背后的導(dǎo)致原因。

最后一部分更偏向于表現(xiàn)層的沉淀，通過設(shè)計(jì)資產(chǎn)和經(jīng)驗(yàn)的積累和匯總，優(yōu)化統(tǒng)一產(chǎn)品前臺(tái)的設(shè)計(jì)表現(xiàn)。

設(shè)計(jì)原則就像英語中的語法，只要遵循語法的框架，隨意的搭配都可以組成準(zhǔn)確的語言。統(tǒng)一的設(shè)計(jì)語言能夠保證平臺(tái)的一致性，減少溝通的成本，效率也會(huì)得到提升，能夠使設(shè)計(jì)師將更多的時(shí)間專注于項(xiàng)目上。

京東的東南亞站點(diǎn)從2015年開始布局，目前有印尼和泰國(guó)兩個(gè)站點(diǎn)，接下來可能還會(huì)拓展更多國(guó)家，國(guó)家之間的差異也會(huì)越來越復(fù)雜。舉個(gè)例子，不同國(guó)家的文字文本長(zhǎng)度差異是很大的，中文排版中比較容易的左右對(duì)齊，對(duì)于西文就不太適合，所以西文排版更適合上下排列，需要更靈活，并且預(yù)留更多的文本空間。

文字本身的結(jié)構(gòu)，也會(huì)導(dǎo)致行高的差異，也會(huì)一定程度影響排版。

對(duì)于圖標(biāo)的設(shè)計(jì)，國(guó)內(nèi)產(chǎn)品（例如京東主站）使用的圖標(biāo)，相對(duì)比較精簡(jiǎn)，對(duì)于國(guó)內(nèi)用戶來說可以理解，但對(duì)于海外用戶，這種設(shè)計(jì)語義是不夠明確的，考慮到多國(guó)家理解的通用性，我們還是需要采用更明確語義的設(shè)計(jì)。

結(jié)合各國(guó)設(shè)計(jì)的差異性和統(tǒng)一性，求同存異，我們也在逐步沉淀東南亞站的設(shè)計(jì)資產(chǎn)庫(kù)，幫助視覺設(shè)計(jì)師建立清晰的設(shè)計(jì)理念認(rèn)知，在整體的產(chǎn)品設(shè)計(jì)風(fēng)格上保持產(chǎn)品線的一致性。資產(chǎn)庫(kù)不僅用于優(yōu)化現(xiàn)有站點(diǎn)的體驗(yàn)，也可以助力未來的新站點(diǎn)快速搭建。

因?yàn)槠年P(guān)系，本文重點(diǎn)介紹了本土化設(shè)計(jì)的五個(gè)方向，其實(shí)每個(gè)方向每個(gè)章節(jié)都是可以進(jìn)一步去研究和分析的。

本文中的工具和方法不單適用于海外市場(chǎng)的本土化設(shè)計(jì)，對(duì)于其他業(yè)務(wù)模式也是很有價(jià)值的。很多內(nèi)容都來自日常的工作總結(jié)，也許會(huì)有謬誤，歡迎大家指正和補(bǔ)充，希望后續(xù)繼續(xù)和大家一起交流學(xué)習(xí)。謝謝大家～

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》乘風(fēng)出?！虻刂埔说脑O(shè)計(jì)心得

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，標(biāo)簽雖然不是很起眼，但是絕對(duì)不能忽視它，只要使用得當(dāng)，尤其是在電商類產(chǎn)品中堪稱神助攻的存在，其功能的強(qiáng)大不是筆者幾段文字能介紹清楚的，了解過產(chǎn)品運(yùn)營(yíng)、用戶行為及心理學(xué)的設(shè)計(jì)師就知道為什么會(huì)“愛”上標(biāo)簽了。很多時(shí)候，看似簡(jiǎn)單的組件/元素，背后都蘊(yùn)藏著不簡(jiǎn)單的運(yùn)作方式，其方式的不同，給產(chǎn)品帶來的結(jié)果也截然不同。

UI設(shè)計(jì)中的標(biāo)簽可用于傳達(dá)信息、建立可預(yù)知操作等，能幫助或促進(jìn)用戶更快速完成任務(wù)、協(xié)助產(chǎn)品達(dá)成業(yè)務(wù)目標(biāo)，深受產(chǎn)品經(jīng)理、運(yùn)營(yíng)者的喜愛，但作為設(shè)計(jì)師的我們真的能聽之任之嗎？標(biāo)簽該不該用、怎么用、如何更好的使用都有一定的原則，即便同一個(gè)產(chǎn)品，被不同的設(shè)計(jì)師設(shè)計(jì)出來也可能是千變?nèi)f化。本文筆者將根據(jù)標(biāo)簽的定義、屬性特征及使用場(chǎng)景作出一些思考和探索，幫助大家對(duì)標(biāo)簽有一個(gè)更清晰的認(rèn)識(shí)。

分享目錄

一、標(biāo)簽基本介紹

二、標(biāo)簽在設(shè)計(jì)中的作用

三、不同場(chǎng)景下的使用方式

四、標(biāo)簽的設(shè)計(jì)（主產(chǎn)品列表）

五、結(jié)語

一、標(biāo)簽基本介紹

1、什么是標(biāo)簽

標(biāo)簽是結(jié)合產(chǎn)品內(nèi)容及屬性特征經(jīng)提煉后產(chǎn)出的關(guān)鍵詞，是信息的一種集合方式，便于用戶查找、定位以及系統(tǒng)識(shí)別。好的標(biāo)簽設(shè)計(jì)會(huì)根據(jù)業(yè)務(wù)需求場(chǎng)景、服務(wù)理念形成獨(dú)特的視覺標(biāo)記，依托產(chǎn)品、用戶目標(biāo)需求，引導(dǎo)或促進(jìn)用戶進(jìn)入下一步操作，用以提高商品、信息的轉(zhuǎn)化。

2、標(biāo)簽色彩

標(biāo)簽主要幫助用戶快速識(shí)別信息、提升信息轉(zhuǎn)化效率，色彩是一個(gè)很重要的因素，好的配色能高效、精準(zhǔn)的傳達(dá)信息。在標(biāo)簽的配色中，主要針對(duì)以下兩種場(chǎng)景：

一種是白色背景，這種沒有任何沖突的背景給標(biāo)簽配色創(chuàng)造了極佳的條件，主體色、輔助色、點(diǎn)綴色均可使用，在面對(duì)同一組信息多標(biāo)簽的情況下，還能多種色彩混合，以便對(duì)標(biāo)簽更好的分類；另一種是圖片背景，更多用在封面、頭圖、商品詳情等位置，相比白色背景會(huì)受到很多局限，一般使用白色/黑色+不透明度、或者主體色作為標(biāo)簽容器，文字使用黑色或反白處理。

3、標(biāo)簽形狀

形狀是標(biāo)簽信息傳遞中的視覺輪廓表現(xiàn)，它是用于承載信息的容器，對(duì)文字元素的包容性極強(qiáng)，能使標(biāo)簽信息更加聚焦，讓用戶在獲取內(nèi)容、信息歸類時(shí)更加專注。常用的標(biāo)簽形狀有圓形、矩形（半圓角、全圓角）、三角形（角標(biāo)）、氣泡或異形，真實(shí)情況還得受界面使用場(chǎng)景、品牌調(diào)性以及設(shè)計(jì)規(guī)范等因素的控制。

二、標(biāo)簽在設(shè)計(jì)中的作用

為了對(duì)信息進(jìn)行歸類，標(biāo)簽可能出現(xiàn)在任何一個(gè)頁(yè)面，通過精、簡(jiǎn)的表達(dá)方式，希望能引起用戶的關(guān)注以及激發(fā)用戶想要進(jìn)一步了解的欲望。例如雙11快到了，手機(jī)里的各大應(yīng)用圖標(biāo)都貼上了雙11標(biāo)簽，預(yù)示優(yōu)惠活動(dòng)已經(jīng)啟動(dòng)，以激發(fā)用戶點(diǎn)擊的欲望；打開外賣應(yīng)用，看到琳瑯滿目的滿減、特色標(biāo)簽，也能讓我們快速的擇優(yōu)處理。總之，在什么時(shí)間、需要使用什么樣的標(biāo)簽，主要看產(chǎn)品想達(dá)到一個(gè)什么樣的目的。

1、突出產(chǎn)品特色（營(yíng)銷）

標(biāo)簽的首要任務(wù)就是為滿足用戶的隱性需求而傳達(dá)特色信息，通過讓用戶對(duì)產(chǎn)品產(chǎn)生聯(lián)想并增加需求欲望，促進(jìn)用戶完成下一步操作。對(duì)于產(chǎn)品而言，標(biāo)簽?zāi)軅鬟f出折扣、優(yōu)惠、賣點(diǎn)、特色等與用戶利益相關(guān)的各種信息，而對(duì)于用戶來說又能讓其快速獲取關(guān)鍵信息，降低內(nèi)容的理解難度等。

例如：美團(tuán)、餓了么店鋪的優(yōu)惠，如滿x減x、免費(fèi)配送、店鋪紅包、首次優(yōu)惠…等標(biāo)簽讓用戶潛意識(shí)的認(rèn)為能降低經(jīng)濟(jì)成本，即便事實(shí)并非如此；通過產(chǎn)品特色信息，如品牌、服務(wù)、復(fù)購(gòu)率、售出累計(jì)、排名…等標(biāo)簽體現(xiàn)出專業(yè)、高質(zhì)量以及熱情的服務(wù)態(tài)度，無時(shí)不刻都在擊潰用戶最后的心理防線，以提高產(chǎn)品的轉(zhuǎn)化率。

2.建立用戶操作預(yù)知

通過建立用戶操作預(yù)知，讓其在操作之前就能清楚點(diǎn)擊后會(huì)發(fā)生什么。例如：登錄騰訊動(dòng)漫時(shí)，會(huì)用小標(biāo)簽提示上次的的登錄方式，降低多賬號(hào)的記憶成本；騰訊視頻的封面會(huì)有VIP（需開通會(huì)員）、付費(fèi)（需額外付費(fèi)）、等標(biāo)簽，讓用戶在操作之前就能根據(jù)當(dāng)前賬號(hào)情況來判斷操作之后可能會(huì)發(fā)生的事情，提前有一定的心理預(yù)期。

3、個(gè)性化內(nèi)容推薦

用戶在接觸一個(gè)新產(chǎn)品或新功能時(shí)，一開始總會(huì)有些不知所措，這時(shí)系統(tǒng)會(huì)提供一些用戶可能感興趣的、產(chǎn)品希望用戶選擇的標(biāo)簽，并引導(dǎo)用戶操作來獲取想要的內(nèi)容，以滿足用戶的潛在需求。

4.操作前/后的內(nèi)容引流

標(biāo)簽既能突出產(chǎn)品特色信息、又不會(huì)占用太多空間，所以通過對(duì)用戶建立好感、吸引其注意力進(jìn)行引流也是一個(gè)很不錯(cuò)的方式。

常見的有兩種引流方式，一種是在用戶操作之前沒有目標(biāo)，系統(tǒng)通過標(biāo)簽對(duì)用戶進(jìn)行方向性的指引，例如淘寶搜索中的歷史、熱搜、興趣推薦等。另一種則是用戶在完成某個(gè)任務(wù)之后，產(chǎn)品通過相似或相關(guān)聯(lián)的標(biāo)簽吸引用戶繼續(xù)瀏覽其他相關(guān)內(nèi)容的潛在需求，以增加用戶在應(yīng)用中的停留時(shí)長(zhǎng)，例如小紅書文章詳情頁(yè)的結(jié)尾，會(huì)提供與當(dāng)前內(nèi)容相關(guān)的標(biāo)簽，點(diǎn)擊之后可快速查看其他相似的內(nèi)容。

5、信息分類

通過標(biāo)簽建立有效的信息分類，能幫助用戶快速篩選出自己想要的內(nèi)容，避免用戶因浪費(fèi)大量時(shí)間瀏覽了非需求內(nèi)的信息而失去耐心。例如淘票票電影評(píng)論區(qū)，用戶可選擇自己感興趣的標(biāo)簽去查找自己想要的信息，提高瀏覽效率，節(jié)約時(shí)間成本。

6、從眾心理推動(dòng)轉(zhuǎn)化

當(dāng)用戶對(duì)某個(gè)商品猶豫不決、無法快速做出決定時(shí)，正處在轉(zhuǎn)化的邊緣，這時(shí)只需要一個(gè)“催化劑”，可利用從眾心理推動(dòng)用戶轉(zhuǎn)化。例如商品的銷售量、收藏量、有多少用戶正在下單…等，都會(huì)對(duì)當(dāng)前用戶的心理產(chǎn)生極大影響，很多時(shí)候，用戶的想法和行為受到周圍人的影響程度，往往超過理性的認(rèn)知。

三、不同場(chǎng)景下的使用方式

在用戶層面，標(biāo)簽提供的是內(nèi)容的核心或特色關(guān)鍵詞，能提升用戶瀏覽效率，幫助其快速做出決策。站在設(shè)計(jì)角度，標(biāo)簽不僅能多樣化的展示各種關(guān)鍵信息、提高視覺表現(xiàn)力，最主要的是能通過設(shè)計(jì)手段為業(yè)務(wù)賦能，促進(jìn)產(chǎn)品、信息的轉(zhuǎn)化。

直白一點(diǎn)，產(chǎn)品經(jīng)理說“需要重點(diǎn)突出功能的特色、賣點(diǎn)”、運(yùn)營(yíng)說“目前我們?cè)谧龌顒?dòng)，要特別突出折扣優(yōu)惠”、業(yè)務(wù)說“有很多用戶不知道xxx，需要設(shè)計(jì)的最明顯”……最后一致決定都很重要。相信絕大多數(shù)設(shè)計(jì)師都遇到過這種問題，怎么辦？是直接拒絕還是等著各部門撕逼后給出一個(gè)確定的結(jié)果？

其實(shí)面對(duì)上述情況，設(shè)計(jì)師的角色不要只停留在畫界面上，應(yīng)該站在用戶的角度去分析，提這些需求的人到底想表達(dá)什么（表面上用視覺突出），能給用戶帶來什么，需要經(jīng)過討論，深度分析產(chǎn)品的真實(shí)需求、用戶的痛點(diǎn)及訴求，從中找到一個(gè)最佳的平衡點(diǎn)，然后通過結(jié)論來確定設(shè)計(jì)的可行性、易用性以及視覺表現(xiàn)方式，不要忘了，設(shè)計(jì)的本質(zhì)就是解決問題。

最后你會(huì)發(fā)現(xiàn)，如有必要，將眾多信息同時(shí)展示出來、而且還不可以影響其他信息的傳達(dá)并非不可能，使用標(biāo)簽就是一個(gè)很不錯(cuò)的解決方式，下面讓我們來一起來看看，不同類型的類產(chǎn)品標(biāo)簽在不同的場(chǎng)景下都有什么關(guān)聯(lián)以及不同的使用特點(diǎn)。

1、超鏈接標(biāo)簽

這種類型的標(biāo)簽以#+文字形式的超鏈接為主，大多出現(xiàn)在文字內(nèi)容較多的列表頁(yè)面、詳情頁(yè)的開頭或結(jié)尾，也可以理解大家常說的話題，它能讓用戶通過標(biāo)簽就能了解到這些內(nèi)容的主題及核心，幫用戶快速鏈接到與該內(nèi)容相關(guān)聯(lián)的信息。

相信有一些設(shè)計(jì)師應(yīng)該經(jīng)歷過這種情況，看新聞越看越感興趣、刷抖音刷到停不下來、看旅游攻略根本不想睡覺…等，這都是源于系統(tǒng)背后的算法與自動(dòng)推薦機(jī)制，產(chǎn)品的背后總有一雙無形的大手在幫我們自動(dòng)匹配。而＃+文字標(biāo)簽的出現(xiàn)只不過是將關(guān)聯(lián)、或想推薦給我們的內(nèi)容擺在的明面上（系統(tǒng)、用戶推薦均可），把選擇權(quán)交給了用戶，即便用戶沒有點(diǎn)擊標(biāo)簽，劃走后或許還是逃不脫系統(tǒng)的算法推薦，可用戶一旦主動(dòng)點(diǎn)擊，產(chǎn)品內(nèi)容會(huì)更加匹配，用戶的滿意度就會(huì)更高。這樣通過明（用戶主動(dòng)點(diǎn)擊標(biāo)簽）、暗（系統(tǒng)算法推薦機(jī)制）的雙刃劍，不僅能滿足用戶想瀏覽其他內(nèi)容的潛在需求，也達(dá)到了產(chǎn)品相關(guān)聯(lián)屬性內(nèi)容的引流。

例如抖音將標(biāo)簽放在了標(biāo)題后面，用戶隨時(shí)能知曉當(dāng)前短視頻的類型、屬性等信息；小紅書的文章詳情頁(yè)結(jié)尾也會(huì)有相關(guān)聯(lián)的標(biāo)簽，用戶可通過該標(biāo)簽快速跳到其他相似的內(nèi)容列表，以便獲取更多對(duì)自己有價(jià)值的信息。

2、圖片封面標(biāo)簽

常用在帶有封面圖片的內(nèi)容列表中，例如視頻、音樂、電商類型的應(yīng)用，在產(chǎn)品封面配上圖標(biāo)或文字小標(biāo)簽后，不僅讓用戶對(duì)信息有更快速的理解，還能豐富圖片內(nèi)容、讓視覺表現(xiàn)更加生動(dòng)。需要說明的是，因圖片本身的色彩比較復(fù)雜，一定要注意標(biāo)簽的配色，標(biāo)簽既然作為輔助說明來傳遞信息，就需要有一定程度的突出，不然，一旦與圖片該區(qū)域的色彩融合或嚴(yán)重沖突，就會(huì)給整個(gè)界面的美觀度帶來負(fù)面效果。這種類型的標(biāo)簽大多數(shù)只用于信息傳遞，并無對(duì)應(yīng)的交互操作，分為動(dòng)態(tài)和靜態(tài)兩種類型。

騰訊視頻列表封面的標(biāo)簽屬于動(dòng)態(tài)，也就是通過后臺(tái)管理系統(tǒng)隨時(shí)對(duì)內(nèi)容進(jìn)行調(diào)整，可能今天是A標(biāo)簽、明天就變成了B標(biāo)簽、或者什么都沒有，標(biāo)簽的類型數(shù)量及樣式會(huì)有一定的控制，針對(duì)分類、功能、權(quán)限類的標(biāo)記非常實(shí)用。

京東的商品封面則是靜態(tài)標(biāo)簽，為了體現(xiàn)出其質(zhì)量、折扣、品牌等信息，在處理圖片之初就將標(biāo)簽融合，讓其成為圖片本身的一部分，不過會(huì)增加相應(yīng)的制作成本。相比前者，靜態(tài)標(biāo)簽的使用方式非常靈活且不受系統(tǒng)的控制，對(duì)用戶的吸引力更強(qiáng)，對(duì)產(chǎn)品促銷、提高轉(zhuǎn)化率能起到很大的作用。

3、商品列表標(biāo)簽（多元化）

電商應(yīng)用的產(chǎn)品列表主要為突出特色、賣點(diǎn)來進(jìn)行促銷，類型及樣式比較多元化，且單個(gè)產(chǎn)品可能多達(dá)4~5個(gè)標(biāo)簽，以此來吸引用戶購(gòu)買。

以下圖淘寶、美團(tuán)外賣列表為例，使用了線框、淺色底、深色底容器標(biāo)簽以及銷量、費(fèi)用類型的純文字標(biāo)簽，樣式可單用、可混搭，形形色色的展示出了商品的各標(biāo)簽信息層級(jí)，無時(shí)不刻都在吸引著用戶的注意力。

四、標(biāo)簽的設(shè)計(jì)（主產(chǎn)品列表）

1、精煉

標(biāo)簽作為輔助補(bǔ)充信息的存在，不宜展示大段的內(nèi)容，所以大家看到過的標(biāo)簽基本都很短。簡(jiǎn)短的標(biāo)簽是在信息表達(dá)清晰、用戶能足夠理解的前提下提煉出來的，我們這里所說的精煉并非一味的求短，雖然“短”是標(biāo)簽必備的因素，但有時(shí)候，過于簡(jiǎn)短的標(biāo)簽根本沒辦法給用戶傳達(dá)足夠的信息，甚至?xí)?dǎo)致用戶更加疑惑，這也失去了添加標(biāo)簽的初衷。

例如美團(tuán)外賣列表，標(biāo)簽都很簡(jiǎn)短，但在用一句話形容、或用戶高質(zhì)量的評(píng)價(jià)來表達(dá)店鋪特色時(shí)，這個(gè)標(biāo)簽占了整整一行的位置，并沒有進(jìn)行特別的簡(jiǎn)化。

下面是某購(gòu)票平臺(tái)，標(biāo)簽也很簡(jiǎn)短，大部分能一看就懂，但有幾個(gè)就不一定了，“兌”是什么意思？可兌換火車票、還是購(gòu)票后可以兌換其他禮品呢；“靜”又是代表什么呢？乘車環(huán)境安靜、人員相對(duì)安靜還是需要乘客制造安靜？雖然我們花點(diǎn)時(shí)間也能猜出個(gè)七七八八，但這無疑增加了用戶的理解難度和時(shí)間成本。

2、視覺突出

因?yàn)闃?biāo)簽本身比較小的原因，一般我們會(huì)通過配色來吸引用戶的注意，但面對(duì)不同的產(chǎn)品屬性，其色彩的表現(xiàn)形式也有很大的區(qū)別。

在騰訊視頻中，采用的固定底色的容器標(biāo)簽，旨在強(qiáng)調(diào)產(chǎn)品的特權(quán)屬性，視覺非常突出；而酷狗音樂采用的是黑色帶透明底、文字反白的標(biāo)簽，僅僅作為輔助提示，對(duì)封面的干擾比較小、但依然能保持信息的有效傳遞。

3、一致性

同類型、同視覺權(quán)重的標(biāo)簽應(yīng)盡量保持一致，即便應(yīng)對(duì)多元化，盡量只在色彩上作出調(diào)整，其容器的外觀形狀、字體字號(hào)仍需保持相同的屬性特征，要讓用戶一看就知道這幾個(gè)標(biāo)簽屬于同一種類別。

4、差異性

上面說到了一致性，現(xiàn)在又說差異性，乍一看似乎是有沖突，其實(shí)不然。這里的差異性是針對(duì)不同類型、不同視覺權(quán)重的標(biāo)簽，需要通過不同的視覺樣式及色彩體現(xiàn)出信息的層級(jí)關(guān)系。

例如：用戶在購(gòu)買這個(gè)商品之前最想知道、且對(duì)用戶最有吸引力的標(biāo)簽一定是最突出的，用戶掃一眼就能看到，根據(jù)視覺權(quán)重依次類推，最后是對(duì)用戶來說不是很重要、甚至沒有看到也不會(huì)有什么影響的這類標(biāo)簽弱化顯示。

結(jié)語

文中主要總結(jié)了標(biāo)簽的作用、不同場(chǎng)景下的使用方式以及設(shè)計(jì)中的注意事項(xiàng)，不難看出，UI設(shè)計(jì)中的標(biāo)簽跟我們?nèi)粘Ｉ钪械臉?biāo)簽很相似，它不僅能對(duì)產(chǎn)品作分類、特色標(biāo)記，還能在用戶猶豫不決的時(shí)候起到一定的推動(dòng)作用，是平臺(tái)內(nèi)部信息導(dǎo)流和滿足用戶潛在需求過程中至關(guān)重要的一環(huán)。

標(biāo)簽設(shè)計(jì)不應(yīng)該是簡(jiǎn)單的色塊+文字的堆疊，它應(yīng)該與產(chǎn)品之間存在著某種潛在的關(guān)聯(lián)，需要針對(duì)不同的使用場(chǎng)景為產(chǎn)品量身定做，形成一套具備專業(yè)化的標(biāo)簽體系。好的標(biāo)簽不僅能滿足上述提到的基本需求，還能在無形之中給予用戶經(jīng)驗(yàn)的感覺，一度超出用戶的預(yù)期，最終滿足產(chǎn)品的商業(yè)價(jià)值。

作者：大漠飛鷹CYSJ

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》標(biāo)簽篇 | 打造獨(dú)特視覺標(biāo)記、精準(zhǔn)傳達(dá)信息

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》【UI設(shè)計(jì)作品總結(jié)】DJI 農(nóng)業(yè)無人機(jī) APP 頁(yè)面重構(gòu)

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

作為舊友，當(dāng)然不能錯(cuò)過近水樓臺(tái)的學(xué)習(xí)機(jī)會(huì)。一方面我在學(xué)習(xí)和鍛煉自己的烘焙技巧，但更多的是，我想從蛋糕創(chuàng)意的過程中，提煉和提升自己的設(shè)計(jì)能力。下面就和大家在“主題創(chuàng)意”、“設(shè)計(jì)重點(diǎn)”、“色彩搭配 ”， 三個(gè)方面分享蛋糕設(shè)計(jì)心得。

首先是確定主題，就像我們?cè)谧鲆粋€(gè)設(shè)計(jì)的時(shí)候往往先要找到設(shè)計(jì)方向和主題，蛋糕設(shè)計(jì)同樣如此，我們要根據(jù)客戶表達(dá)的內(nèi)容進(jìn)行發(fā)散再聚焦。

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

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

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

再如下圖中兩款男孩的世界為主題的蛋糕，設(shè)計(jì)的重點(diǎn)則是迎合小男孩的各類興趣愛好，以玩具元素為基礎(chǔ)，構(gòu)建立體的場(chǎng)景或悅動(dòng)的圖形肌理，以活潑和玩耍作為設(shè)計(jì)重點(diǎn)。

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

最后是配色，西點(diǎn)蛋糕的美麗一半是靠味道，另一半則是靠調(diào)色。我們常常看到很多文章中使用“秀色可餐”來形容美食，其實(shí)這個(gè)用法是錯(cuò)誤的，秀色可餐只能用來形容人的美貌和景色的秀麗。但我們從中不難看出人們對(duì)美食的理解之中，“顏色”是吸引人的第一要素。如果生活失去色彩，將變得毫無生命力。如果蛋糕沒有色彩，它將失去靈魂！所以，顏色搭配在蛋糕制作中則更為重要，它就是美觀與創(chuàng)意在蛋糕上的最高表現(xiàn)，那么如何進(jìn)行蛋糕調(diào)色呢？

想要把奶油或翻糖調(diào)出滿意的顏色，首先需要了解色彩的基本常識(shí)，雖然對(duì)于身為設(shè)計(jì)師的我們來說，這是再熟悉不過的基礎(chǔ)知識(shí)，但也不妨讓我們一起復(fù)習(xí)和加強(qiáng)一遍。

1、色彩基本知識(shí)

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

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

復(fù)色：是由原色與間色兩兩疊加得到的顏色，分別是橙紅、橙黃、黃綠、藍(lán)綠、藍(lán)紫、紫紅。

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

冷色：綠、藍(lán)、藍(lán)綠、藍(lán)紫、紫，讓人聯(lián)想起天空、大海，給人平靜、堅(jiān)實(shí)、有力的感覺。

2、色彩寓意

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

3、色彩搭配建議

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

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

– 如果送老師、同事或朋友，可以選擇冷色系，因?yàn)槔渖禃?huì)令人產(chǎn)生沉穩(wěn)、正式、高雅的感覺，能夠表達(dá)尊敬和真誠(chéng)的情意。

– 如果送長(zhǎng)輩、愛人或小孩，可以選擇暖色系，因?yàn)榕禃?huì)產(chǎn)生熱情、明亮、活潑、溫暖的感覺，能夠表達(dá)祝福。

4、調(diào)色技巧提示

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

顏色調(diào)制盡量由深到淺：蛋糕制作中白色的顏料一般都是奶油，建議一開始調(diào)色時(shí)盡量用少量的奶油霜，從而避免浪費(fèi)食材。因?yàn)槿绻婚_始用很少量的奶油霜，不小心把顏色調(diào)深了的話也是很容易補(bǔ)救，只需要加入一些白色奶油霜進(jìn)行稀釋就可以了。

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

– 五彩繽紛的甜點(diǎn)系列：

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

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

作者：環(huán)鐵藝術(shù)家

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》好吃也要好看——烘焙與設(shè)計(jì)密不可分

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

海報(bào)視覺如何做的有創(chuàng)意？有哪些方法呢？

比如從構(gòu)圖、擬物、光影、嫁接、對(duì)比、或者反差？等等等等

每一種又都可以拆分成很多細(xì)類。

比如對(duì)比在視覺海報(bào)中的運(yùn)用，又有明暗對(duì)比、顏色對(duì)比、大小對(duì)比、虛實(shí)對(duì)比等等、太多了！

首先我們來分析一下大小對(duì)比是如何應(yīng)用的。

一、大小對(duì)比

1、大小對(duì)比的作用

我們先看下這張圖：

兩個(gè)元素， 如果一樣大，平鋪在畫面中，就會(huì)顯得普普通通的，沒有任何亮點(diǎn)。

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

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

所以對(duì)比就是讓畫面的兩個(gè)組成部分/元素，以夸張的手法，布局構(gòu)圖，以讓畫面產(chǎn)生強(qiáng)烈的反差。以提升畫面沖擊力，畫面縱深，內(nèi)容豐富度。是非常有效提升畫面品質(zhì)的方法之一。

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

01 人物與人物

⑴ 全身與半身對(duì)比

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

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

這種對(duì)比有強(qiáng)烈的大小反差，并且可以很大程度地拉伸畫面縱深，表現(xiàn)出很強(qiáng)的空間感！
并且還有一個(gè)細(xì)節(jié)：這兩張都是三角形構(gòu)圖，非常穩(wěn)定。

所以我們?cè)谠O(shè)計(jì)的時(shí)候要也要注意畫面的構(gòu)圖方式，夸張對(duì)比同時(shí)，要保證畫面的穩(wěn)定和飽滿！

⑶ 全身與全身對(duì)比

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

02 人物與場(chǎng)景

⑴ 小場(chǎng)景與大人物

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

一般需要很高的設(shè)計(jì)成本，工時(shí)不小。簡(jiǎn)單點(diǎn)的做法我們可以直接在人物下面拼接一些小場(chǎng)景，比如這樣：

一些日常小需求中，沒有那么多的時(shí)間去打磨細(xì)節(jié)，就可以這樣做，既能保證按時(shí)完成需求，也能有一定的創(chuàng)意性。

⑵ 小人物與大場(chǎng)景對(duì)比

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

小節(jié)

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

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

二、光影對(duì)比

1、光影的作用

我們?yōu)榱酥庇^一些，直接用幾個(gè)圖片說明。
現(xiàn)在這張圖，這是一個(gè)瓶子的圖形：

我們給瓶子加入光影：

瓶子就變得立體了！

我們給背景加入光影

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

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

那我們應(yīng)該如何利用光影，去做更有創(chuàng)意性的設(shè)計(jì)呢？

光影、光影，先有光后有影。那我們就先來說說主要表現(xiàn)光的幾個(gè)玩法：

2、光

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

它的特點(diǎn)是光源與主體重合，形成很強(qiáng)的對(duì)比，在畫面可以可以非常好地聚焦視線，強(qiáng)化主體。

⑵側(cè)光
側(cè)光是光從主體側(cè)面打過來的光，一般不會(huì)太強(qiáng)：

主要是起到一個(gè)豐富畫面層次，營(yíng)造氛圍的作用。

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

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

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

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

⑸造型
給光賦予一個(gè)造型，可以達(dá)到一種形式創(chuàng)意上的突破，
比如這種：

把光塑造成一個(gè)人物的造型，下面放置對(duì)應(yīng)的人物垂喪的狀態(tài)，形成很強(qiáng)的人物情緒反差，可以說是非常有創(chuàng)意了。

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

把偷過來的光塑造成與主體相關(guān)的某個(gè)物品造型，中間放置一個(gè)小的人物，同樣也是一種很棒的創(chuàng)意方式。

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

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

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

3、影

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

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

⑵造型
影子也是可以改變?cè)煨偷模?

本來是應(yīng)該與人物動(dòng)作一致的影子，被改變?cè)煨团c人物產(chǎn)生互動(dòng)或?qū)Ρ?，映射出了非常?qiáng)的故事性，和內(nèi)容深度，非常具有創(chuàng)意性了。

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

內(nèi)容深度和想象空間直接拉滿！

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

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

應(yīng)用在一些游戲中，強(qiáng)烈的明暗對(duì)比配合富有氣勢(shì)的人物造型，也可以打造出一些很有視覺沖擊力的海報(bào)視覺！

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

海報(bào)視覺如何做的有創(chuàng)意？有哪些方法呢？

比如從構(gòu)圖、擬物、光影、嫁接、對(duì)比、或者反差？等等等等
每一種又都可以拆分成很多細(xì)類。
比如對(duì)比在視覺海報(bào)中的運(yùn)用，又有明暗對(duì)比、顏色對(duì)比、大小對(duì)比、虛實(shí)對(duì)比等等、太多了！

今天就先分析一下大小對(duì)比是如何應(yīng)用的。

其他對(duì)比

1、陣營(yíng)對(duì)比

陣營(yíng)對(duì)比的特點(diǎn)是5:5分畫面，以對(duì)比色鋪墊畫面，形成強(qiáng)烈的視覺對(duì)比，和陣營(yíng)感。常用于表現(xiàn)兩個(gè)不同的陣營(yíng)，或者正反派的視覺表現(xiàn)中。

除了影視海報(bào)、游戲，競(jìng)技類體育類也常常使用這種對(duì)比方法：

主要表現(xiàn)：對(duì)抗、競(jìng)爭(zhēng)、陣營(yíng)

2、狀態(tài)對(duì)比

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

比如用畫面拼接的方式：

或者是同一主體，把兩種狀態(tài)表現(xiàn)到一起的方式：

主要表現(xiàn)：人或物的的兩種不同的狀態(tài)，冰對(duì)火、明對(duì)暗、正常對(duì)黑化等等。

3、時(shí)空對(duì)比

讓兩個(gè)不同的時(shí)空聯(lián)系到一起，形成時(shí)間地點(diǎn)上的反差對(duì)比。

⑴兩個(gè)不同空間的對(duì)比

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

⑵兩個(gè)不同時(shí)段的對(duì)比：

同一人物不同時(shí)期通過倒影等巧妙的表現(xiàn)方式，與主體形成時(shí)間上的對(duì)比。具有延續(xù)時(shí)間長(zhǎng)河的感覺，為觀者提供非常大的想象空間，是一種很有創(chuàng)意性的的方法。

主要表現(xiàn)：空間穿越、時(shí)間變化的對(duì)比。

4、情緒對(duì)比

這種創(chuàng)意方式更多是傳遞人物的情緒，安靜的狀態(tài)
對(duì)比憤怒的狀態(tài)，快樂的狀態(tài)對(duì)比悲傷的狀態(tài)，

也可以表現(xiàn)人物的兩面性，正常狀態(tài)和陰暗面等等:

會(huì)讓觀者感受到強(qiáng)烈的情緒傳遞，視覺表現(xiàn)上反而不會(huì)那么注重。

主要表現(xiàn)：重視情緒的傳遞

5、虛實(shí)對(duì)比

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

用線條或者影子打造一些和實(shí)體區(qū)別開的虛構(gòu)元素，和實(shí)體的元素形成對(duì)比，會(huì)有一種很虛幻浪漫文藝的感覺，可以用于表現(xiàn)一些幻想，不切實(shí)際的愛戀類似的主題中，能達(dá)到很少見的一些視覺效果。情感和創(chuàng)意都能得到很充分的傳遞。

總結(jié) 

以上就是我今天想和大家分享的內(nèi)容，依舊是一些視覺層面的知識(shí)點(diǎn)，希望對(duì)大家所有幫助和啟發(fā)！

作者：慢熱

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》第一次寫3000字的干貨，獻(xiàn)丑了！

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

共識(shí)目標(biāo)大致分為兩方面，拉齊理解和對(duì)齊標(biāo)準(zhǔn)。

拉齊理解，減小彼此間的認(rèn)知差距?？傮w上，我們需要拉齊彼此對(duì)度量長(zhǎng)短期價(jià)值和目標(biāo)的理解；到各執(zhí)行階段，則需要拉齊對(duì)所需資源和預(yù)期輸出的理解。

對(duì)齊標(biāo)準(zhǔn)，選擇團(tuán)隊(duì)認(rèn)同的維度指標(biāo)與監(jiān)測(cè)方式。個(gè)體對(duì)體驗(yàn)優(yōu)劣的主觀感受和不同崗位職責(zé)的關(guān)注視角不盡相同?？傮w上，我們需要以產(chǎn)品定位規(guī)劃為指導(dǎo)，結(jié)合客觀資源情況選擇適合的衡量標(biāo)準(zhǔn)。

如上圖舉例，一個(gè)對(duì)內(nèi)的商戶操作系統(tǒng)與其他競(jìng)對(duì)在系統(tǒng)操作層面的比較意義不大，度量模型中用于和同類產(chǎn)品對(duì)標(biāo)的功能完整性的參考價(jià)值降低，則可以考慮暫不納入監(jiān)測(cè)維度。

確定維度后的下探監(jiān)測(cè)指標(biāo)是共識(shí)最主要的內(nèi)容。如上舉例，當(dāng)前業(yè)務(wù)首要關(guān)心產(chǎn)品SOP（Standard Operating Procedure 標(biāo)準(zhǔn)操作程序）“使用率”，而這項(xiàng)指標(biāo)與已確認(rèn)的參與度指標(biāo)定義極為貼合，那我們就不妨直接將該項(xiàng)做為參與度內(nèi)衡量指標(biāo)優(yōu)先接入。

二、共識(shí)內(nèi)容

到了具體的共識(shí)內(nèi)容，我們?cè)侔戳㈨?xiàng)之前、項(xiàng)目執(zhí)行，項(xiàng)目復(fù)盤的階段順序聊聊。

1、立項(xiàng)之前

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

02.首期度量的范圍和預(yù)期？

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

如上說到，度量需要一個(gè)漸進(jìn)的過程。我們可以選擇由局部擴(kuò)充至整體，也可以由整體完善至局部。首期度量就面臨著這樣的選擇，當(dāng)然選擇的范圍也對(duì)應(yīng)著不同的預(yù)期。

由局部擴(kuò)充至整體，圍繞業(yè)務(wù)當(dāng)前需求，圈定最小度量范圍。這樣選擇，一方面可以適度減低試跑數(shù)據(jù)的成本；另一方面，首期度量結(jié)果還不便向前比對(duì)應(yīng)用分析，但這不妨礙調(diào)研監(jiān)測(cè)到的信息為業(yè)務(wù)當(dāng)前需求提供輔助價(jià)值。需要注意的是，雖然選擇了由局部開始，但要始終遵循度量模型既定的統(tǒng)一框架，不能過分定制化。

由整體完善至局部，先監(jiān)測(cè)宏觀指標(biāo)再逐步完善下探。這樣選擇，一般可以快速選定已處于長(zhǎng)期監(jiān)測(cè)的指標(biāo)接入系統(tǒng)，但也因指標(biāo)較為宏觀，初期不免暫時(shí)無法解釋數(shù)據(jù)現(xiàn)象，就需要多期的下探追蹤來定位原因。

2、項(xiàng)目執(zhí)行

01.指標(biāo)統(tǒng)計(jì)

這部分是共識(shí)內(nèi)容的主體，具體指標(biāo)選取與統(tǒng)計(jì)方式我們?cè)凇扼w驗(yàn)度量經(jīng)驗(yàn)分享：如何搭建體驗(yàn)指標(biāo)模型?》中進(jìn)行了梳理介紹。這里補(bǔ)充兩個(gè)共識(shí)小方法，準(zhǔn)備詳細(xì)參考資料和選取整合已有資源。

對(duì)應(yīng)每次共識(shí)的內(nèi)容，參考資料可以有效提高溝通效率?！罢驹谇叭说募绨蛏稀痹诰唧w可感的案例指標(biāo)基礎(chǔ)上調(diào)整，遠(yuǎn)比憑空討論有效。

選取整合已有資源，“避免重復(fù)造輪子”。舉例滿意度維度，如此前已建立了相似的NPS調(diào)研制度，那便不必費(fèi)時(shí)費(fèi)力重新發(fā)調(diào)研問卷或是開發(fā)線上場(chǎng)景化調(diào)研能力。接入現(xiàn)有調(diào)研數(shù)據(jù)，選擇符合模型需要的數(shù)據(jù)接入或許更經(jīng)濟(jì)適用。然后，在此基礎(chǔ)上再去優(yōu)化指標(biāo)細(xì)項(xiàng)與收集方式。

02.分析提煉

指標(biāo)選取和統(tǒng)計(jì)僅僅是準(zhǔn)備，怎么應(yīng)用現(xiàn)有食材炒出好吃的“菜”，目前依舊需要人工分析提煉。

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

3、項(xiàng)目復(fù)盤

01.如何評(píng)定度量的投入產(chǎn)出？

每期度量復(fù)盤，除共識(shí)達(dá)成情況和后期調(diào)整外，團(tuán)隊(duì)內(nèi)對(duì)度量本身的投入產(chǎn)出評(píng)定常常有被忽略。

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

三、共識(shí)方式

最后，簡(jiǎn)要聊聊共識(shí)的態(tài)度與形式。

中立的態(tài)度是溝通的基礎(chǔ)。每個(gè)環(huán)節(jié)共識(shí)前，可以先單獨(dú)收集團(tuán)隊(duì)成員的思路想法，引導(dǎo)大家放心分享自己的見解，提高收集效率，而不需當(dāng)即討論合適與否。

內(nèi)部訪談，基于團(tuán)隊(duì)成員職責(zé)差異，制定訪談大綱與溝通順序，為方便更高效的溝通與記錄。內(nèi)部溝通在達(dá)成指標(biāo)統(tǒng)計(jì)共識(shí)的基礎(chǔ)上，更可以幫我們對(duì)產(chǎn)品表象之下的業(yè)務(wù)邏輯有更加深入的理解。

穩(wěn)定的節(jié)奏，明確每一階段的待辦與負(fù)責(zé)人，定期組會(huì)對(duì)齊進(jìn)度，定期匯總小結(jié)，逐層匯報(bào)共識(shí)，得到更廣泛團(tuán)隊(duì)成員的認(rèn)可。

以上，便是對(duì)往期度量共識(shí)中非理論方法部分的梳理。如何溝通沒有標(biāo)準(zhǔn)，共識(shí)程度也難以衡量。期待大家提出寶貴意見，共同討論如何將度量的理論方法更好地應(yīng)用于業(yè)務(wù)實(shí)踐。

作者：李明玥、賀紫蒙

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》體驗(yàn)度量經(jīng)驗(yàn)分享：如何溝通共識(shí)?

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

文字是UI設(shè)計(jì)中最重要的信息傳遞元素，文字的排版看似容易其實(shí)并不簡(jiǎn)單，因?yàn)槲淖值膶傩员姸啵热缱痔?hào)、字間距、行高、段落等等。

很多設(shè)計(jì)師對(duì)文字屬性很了解，也能夠合理運(yùn)用，但總會(huì)卡在開發(fā)環(huán)節(jié)，花費(fèi)很長(zhǎng)時(shí)間驗(yàn)收，最終還是得不到理想效果。

下面我們從根上去認(rèn)識(shí)文字，對(duì)文字中能夠影響排版間距的屬性，一一解析，并且了解開發(fā)邏輯，正確與他們對(duì)接。

二、文字-行高

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

行高就是在設(shè)計(jì)軟件中選中文字后，上下外邊框高度，字體的行高沒有標(biāo)準(zhǔn)，不同的字體一般默認(rèn)行高也不一樣。

也就是因?yàn)樽煮w的行高，讓UI設(shè)計(jì)師對(duì)文字與其他元素的間距設(shè)定，有不同的見解。

上圖都是30px的間距，但因?yàn)樽煮w行高不同，A、B兩個(gè)方案的實(shí)際視覺間距不同。

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

認(rèn)同B方案的設(shè)計(jì)師，理由是UI設(shè)計(jì)本身對(duì)幾個(gè)像素的差距就很敏感，視覺上做不到統(tǒng)一，就是不合理。

兩者的表述都對(duì)，但也確實(shí)都有一定的弊端，下面給大家介紹兩個(gè)解決方案。

可以確定的是，為了滿足文字折行后的閱讀性體驗(yàn)，最好帶有一定的行高，這樣也會(huì)利于與開發(fā)對(duì)接。

1、第一種：

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

然后頁(yè)面中，接下來所有的間距設(shè)定，都得是這個(gè)數(shù)值的倍數(shù)。（這點(diǎn)后面會(huì)詳細(xì)講解）

?在一個(gè)帶有文字的設(shè)計(jì)組件中，若設(shè)計(jì)思路上要呈現(xiàn)視覺統(tǒng)一的間距，那可以算出字號(hào)與行高的間隙，然后減去相對(duì)應(yīng)的柵格數(shù)值，使其視覺上接近統(tǒng)一的間距。

下圖所示，設(shè)計(jì)思路上想呈現(xiàn)一個(gè)30px的統(tǒng)一間距，那就可以減去一個(gè)最小柵格數(shù)值。

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

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

設(shè)計(jì)的間距與開發(fā)看到的間距，都是有規(guī)律的柵格系統(tǒng)間距。

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

2、第二種：

第二種方式就是精益求精，不考慮間距的柵格系統(tǒng)原則，算出字號(hào)與行高的間隙，間距上準(zhǔn)確減去，保證沒有一丁點(diǎn)的誤差。

我找了一下這樣的產(chǎn)品，發(fā)現(xiàn)iOS端的滴滴APP中，有個(gè)模塊是這樣的設(shè)計(jì)理念。

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

所以設(shè)置距離26px，加上行高間隙正好是30px，得到統(tǒng)一的間距效果。

這種方式有一個(gè)小小的弊端，就是開發(fā)感受不到間距的規(guī)則，最終設(shè)計(jì)驗(yàn)收時(shí)可能會(huì)耗費(fèi)更多的時(shí)間。

特殊情況：

另外有一種情況，就不能刻意去追求文字的視覺對(duì)齊，除非是平面設(shè)計(jì)，因?yàn)殚_發(fā)的邏輯也不會(huì)去支持這樣做。

上圖中錯(cuò)誤的方式是因?yàn)椋_發(fā)寫這個(gè)卡片，會(huì)寫成一個(gè)容積俗稱盒子，內(nèi)容都會(huì)放在盒子里面，就算內(nèi)容過多，也是向下進(jìn)行擴(kuò)展適配。

三、開發(fā)對(duì)接-關(guān)于行高（重點(diǎn)內(nèi)容）

字體行高的間隙有了解決方法，接下來是與開發(fā)的對(duì)接，這也是最關(guān)鍵的一個(gè)環(huán)節(jié)，設(shè)計(jì)的再好，最終不能很好的落地，也是白搭。

UI設(shè)計(jì)師在設(shè)計(jì)驗(yàn)收iOS端時(shí)，可能會(huì)遇到這樣的問題，設(shè)計(jì)與開發(fā)都用了同樣的間距參數(shù)，但最終呈現(xiàn)的間距還是不一樣。

原因就是，同樣的蘋方字體，iOS端開發(fā)的默認(rèn)字體行高，與設(shè)計(jì)軟件中的字體默認(rèn)行高不一樣。

比如在Sketch軟件中42號(hào)字的蘋方字體默認(rèn)行高是59，但是iOS開發(fā)軟件中默認(rèn)是52。

如果開發(fā)不手動(dòng)調(diào)整字的行高，就會(huì)出現(xiàn)與設(shè)計(jì)的偏差。

根據(jù)我的調(diào)研，iOS開發(fā)工程師，若不是特殊情況，基本不會(huì)去改默認(rèn)行高參數(shù)。

下面我們列舉一下，設(shè)計(jì)常用蘋方字號(hào)的默認(rèn)行高，與iOS開發(fā)默認(rèn)行高的數(shù)值對(duì)比，從中找一下規(guī)律。

上圖中可以得出，字號(hào)越大，設(shè)計(jì)默認(rèn)行高與iOS開發(fā)默認(rèn)行高差距越大。

所以設(shè)計(jì)上最好把默認(rèn)行高改成與開發(fā)一樣的默認(rèn)行高，這樣才能保障，開發(fā)不手動(dòng)調(diào)整行高下，是一致的。

iOS開發(fā)字號(hào)默認(rèn)行高有一定的規(guī)律，隨著字號(hào)的增加，行高會(huì)在字號(hào)基礎(chǔ)上+4、+6、+8、+10以偶數(shù)遞增。

雖有規(guī)律但也不容易形成記憶，推薦一個(gè)公式。

用字號(hào)除10后乘以2，再加上字號(hào)，就是iOS開發(fā)的默認(rèn)行高，公式如下：

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

這款插件是專門針對(duì)iOS字體行高修復(fù)，使其與開發(fā)默認(rèn)行高保持一致。（公眾號(hào)后臺(tái)回復(fù)666可獲?。?

1、關(guān)于安卓

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

因?yàn)榘沧肯到y(tǒng)開源，不同的安卓手機(jī)廠商大多會(huì)更換字體。

比如小米手機(jī)MIUI系統(tǒng)中英文都使用Misans字體，所以安卓文字行高沒有一個(gè)標(biāo)準(zhǔn)。

安卓開發(fā)與iOS開發(fā)還有個(gè)不同點(diǎn)是，安卓開發(fā)使用什么字體，行高就是字體本身的默認(rèn)行高。

思源黑體行高默認(rèn)和字號(hào)大小一樣，Roboto行高接近蘋方字體行高。

如果設(shè)計(jì)稿按安卓規(guī)范設(shè)計(jì)，那思源黑體最好設(shè)置成與蘋方字體一樣的行高，然后安卓工程師手動(dòng)去調(diào)整，iOS開發(fā)工程師所見即所得。

2、字體修復(fù)后使用經(jīng)驗(yàn)

關(guān)于修復(fù)后字體的使用方式，分享一些經(jīng)驗(yàn)，UI設(shè)計(jì)中使用文字的頻率很高，有標(biāo)題、副標(biāo)題、正文、輔助文字等，字號(hào)都有所不同。

當(dāng)在設(shè)計(jì)中，確定這些文字字號(hào)后，做一次行高的修復(fù)，然后把這些文字創(chuàng)建成字符樣式，每次用時(shí)從字符樣式庫(kù)里面選擇即可。

最后說一下，特殊情況結(jié)合自身產(chǎn)品風(fēng)格，去定義文字行高是完全沒有問題的，開發(fā)可以根據(jù)設(shè)計(jì)的定義的行高進(jìn)行調(diào)整。

四、文字-段落

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

一個(gè)回車鍵的間距，就是一行字的行高，通常這個(gè)間距都比較大，就算設(shè)計(jì)風(fēng)格需要這么大的間距，那一定也要手動(dòng)去設(shè)置段落。

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

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

五、文字-字間距

字間距是字與字之間的間距，默認(rèn)一般為0不做設(shè)定，特殊設(shè)計(jì)風(fēng)格以外。

有一種情況，當(dāng)一段左對(duì)齊文字中存在標(biāo)點(diǎn)或數(shù)字英文字母時(shí)，那末尾可能不夠一個(gè)字符的空間，就會(huì)出現(xiàn)末尾留白的情況。

出現(xiàn)這種參差不齊的情況，確實(shí)不那么美觀，但在UI設(shè)計(jì)中實(shí)屬正常。

不用刻意去設(shè)置成左右水平對(duì)齊，這樣雖整齊，但因?yàn)椴煌淖珠g距會(huì)影響閱讀體驗(yàn)。

六、文字-字號(hào)

不同字號(hào)間距設(shè)定有一個(gè)原則，當(dāng)字號(hào)越大時(shí)，字與其他元素間距也就需要相對(duì)越大。

字號(hào)越大說明級(jí)別越高，級(jí)別越高從信息層級(jí)上來講，就需要較大的間距來呈現(xiàn)。

這是客觀上的一個(gè)原則，文字越大，就需要更多的留白去承托，就像文字的行高，字號(hào)越大文字的行高增加的倍數(shù)也就越大。

 1、如何定義間距？ 

間距是UI設(shè)計(jì)中建立信息層級(jí)、提升閱讀體驗(yàn)、表達(dá)元素之間的關(guān)系、表現(xiàn)重要信息的重要方式。

定義合理的間距其實(shí)非常有學(xué)問，打開京東、淘寶你會(huì)發(fā)現(xiàn)元素之間的間距非常緊湊，打開愛彼迎、蔚來又會(huì)發(fā)現(xiàn)元素之間較為寬松，這是為什么？

其實(shí)就是他們的設(shè)計(jì)語言不同，致使展示出的形態(tài)也就各異，而間距就是表現(xiàn)設(shè)計(jì)語言的其中一種方式。

在UI設(shè)計(jì)中，間距的設(shè)定一般會(huì)選擇一個(gè)最小柵格基數(shù)，如4、5、6、8等數(shù)值，之后頁(yè)面中，所有的間距都要以，最小柵格基數(shù)的倍數(shù)呈現(xiàn)。

谷歌推出的設(shè)計(jì)語言 Material Design 推薦柵格系統(tǒng)的最小基數(shù)是8dp，一切間距、尺寸都應(yīng)該是8dp的倍數(shù)。

淘寶的設(shè)計(jì)，據(jù)我所知用的是5的基數(shù)，愛彼迎用的是8的基數(shù)，從這點(diǎn)來看，基本可以得出一個(gè)結(jié)論，使用越小的數(shù)值基數(shù)，設(shè)計(jì)呈現(xiàn)通常就會(huì)越緊湊。

一個(gè)最小柵格基數(shù)的倍數(shù)值有很多，但其實(shí)通常有6個(gè)左右常用間距，就能滿足絕大多數(shù)的場(chǎng)景。

我目前負(fù)責(zé)的產(chǎn)品最小柵格基數(shù)是6，設(shè)計(jì)上常用間距大概有6個(gè)，完全能夠滿足大多數(shù)設(shè)計(jì)場(chǎng)景所需。

這些間距其實(shí)并不用刻意去選擇，當(dāng)你使用最小柵格倍數(shù)值時(shí)間長(zhǎng)了，就能自然得出幾個(gè)常用的間距，字號(hào)的選擇使用基本也適用這個(gè)邏輯。

另外，一個(gè)產(chǎn)品中模塊眾多，難免會(huì)出現(xiàn)一些特殊情況，所以肯定不能限定死只可以用那幾個(gè)間距。

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

2、案例解析

接下來，根據(jù)最小柵格基數(shù)為6的設(shè)計(jì)規(guī)范，通過一個(gè)商品卡片案例，分析一下間距設(shè)定的幾個(gè)原則。

上圖中，首先要給各個(gè)元素分類，比如主標(biāo)題和副標(biāo)題是一類內(nèi)容；標(biāo)簽是一類內(nèi)容；價(jià)格是一類內(nèi)容；“找相似”按鈕又是一類內(nèi)容。

根據(jù)親密關(guān)系原則，同類內(nèi)容的間距應(yīng)該更近，這樣有利于建立信息層級(jí)關(guān)系，提升用戶的可讀性。

具體多近呢？可以根據(jù)商品卡片在頁(yè)面中的外邊距，來進(jìn)行分析定義。

看一個(gè)產(chǎn)品的外邊距基本能判斷，是寬松型排版，還是緊湊型排版。

產(chǎn)品的外邊距是根據(jù)設(shè)計(jì)語言，產(chǎn)品定位，產(chǎn)品內(nèi)容多少等來定義，常見的邊距有20、24、30、36、48、60等。（大概就是這個(gè)范圍內(nèi)）

使用較大外邊距，內(nèi)容區(qū)域的間距要小于外邊距，小到可以直觀分辨即可，這樣可以體現(xiàn)出頁(yè)面中，內(nèi)容的親密關(guān)系。

使用常規(guī)外邊距，比如我們的案例中，使用30px就是常規(guī)外邊距，內(nèi)容區(qū)域要適當(dāng)小于或等于外邊距，這樣視覺上體現(xiàn)的是統(tǒng)一性。

主標(biāo)題與副標(biāo)題屬于同類項(xiàng)，它們之間的間距一定要小于，卡片的內(nèi)邊距，這樣整體看上去才能體現(xiàn)信息層級(jí)。

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

一般來說，視覺上的間距大概是內(nèi)邊距（同模塊中的大間距）的一半，就會(huì)表現(xiàn)的不錯(cuò)。

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

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

通常第一選擇就是，視覺距離與內(nèi)邊距30px，保證統(tǒng)一。

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

接下來是價(jià)格，對(duì)于一個(gè)商品卡片設(shè)計(jì)，價(jià)格是需要著重突出體現(xiàn)的。

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

案例的商品卡片，設(shè)計(jì)風(fēng)格價(jià)格顏色規(guī)范是黑色，所以顏色不能改變。

只能放大或加大留白，放大和留白得在合理的范圍內(nèi)，不然就會(huì)破壞卡片的整體結(jié)構(gòu)性。

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

這種設(shè)計(jì)方法，在一個(gè)設(shè)計(jì)組件中，最好只出現(xiàn)一個(gè)，不然整體結(jié)構(gòu)就會(huì)有一定程度上的破壞。

另外強(qiáng)調(diào)一下，統(tǒng)一性固然重要，但設(shè)計(jì)的核心是為需求目標(biāo)服務(wù)，所以，這時(shí)候統(tǒng)一性的優(yōu)先級(jí)是次于需求目標(biāo)的。

就像淘寶首頁(yè)的瓷片區(qū)，間距非常緊湊，失去了一定的美感，但這樣做確實(shí)展示了更多的內(nèi)容，滿足了需求目標(biāo)。

 七、最后 

最后做個(gè)總結(jié)：

1、關(guān)于文字的間距，要考慮文字的行高，盡可能保持視覺統(tǒng)一性；

2、iOS設(shè)計(jì)稿，設(shè)計(jì)軟件中默認(rèn)的文字行高，與開發(fā)軟件中的默認(rèn)行高不一致，最好修復(fù)行高，與開發(fā)保持一致；

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

4、多行文字出現(xiàn)這種參差不齊的情況，不要設(shè)置為左右水平對(duì)齊；

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

6、UI設(shè)計(jì)要結(jié)合產(chǎn)品定位等，制定最小柵格基數(shù)，然后任何間距要以最小柵格基數(shù)的倍數(shù)呈現(xiàn)；

7、一個(gè)產(chǎn)品中，通常設(shè)置6個(gè)左右的間距數(shù)值，能滿足大多數(shù)設(shè)計(jì)的場(chǎng)景；

8、善于使用親密關(guān)系、留白理念、統(tǒng)一性等設(shè)計(jì)原則，設(shè)計(jì)前理解需求目標(biāo)。

作者：吳星辰

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》一文搞定UI設(shè)計(jì)間距那點(diǎn)事！【進(jìn)階篇】

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

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

文字最重要的屬性是可讀性，且不管排版形式如何，首先要讓用戶看清、看懂，然后才要談排版形式、美觀、協(xié)調(diào)、設(shè)計(jì)感等等。

現(xiàn)在的電商詳情頁(yè)，用戶使用場(chǎng)景幾乎都來自于手機(jī)端，文字小了會(huì)看不清，文字大了又會(huì)過于粗暴、缺少精致感，所以主副標(biāo)題文字的大小應(yīng)該在什么范圍，才能兼顧可讀性和設(shè)計(jì)美感呢？

我以6.5英寸屏幕的P50 pro手機(jī)為例，經(jīng)過多次對(duì)比實(shí)驗(yàn)得出一個(gè)可以參考的字號(hào)范圍：主標(biāo)題：50-80px、副標(biāo)題：26-36px。

當(dāng)文字大小控制在上述范圍內(nèi)，更利于詳情頁(yè)的文字信息表達(dá)，當(dāng)然這組數(shù)據(jù)并非絕對(duì)，有一定的局限性，所以僅供大家參考。

同時(shí)為了嚴(yán)謹(jǐn)，我又結(jié)合眾多案例進(jìn)行驗(yàn)證，得出的結(jié)論也是基本都符合。

字號(hào)規(guī)范之后，接下來再來說說排版結(jié)構(gòu)。

詳情頁(yè)的文字排版結(jié)構(gòu)相對(duì)來說并不復(fù)雜，常見的對(duì)齊方式就三種，即居中對(duì)齊、左對(duì)齊、右對(duì)齊。

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

比如像下面這樣：

你會(huì)發(fā)現(xiàn)不管怎么美化豐富，其基礎(chǔ)排版結(jié)構(gòu)、對(duì)齊方式還是沒有變化。所以我們能在這三種基礎(chǔ)的排版結(jié)構(gòu)上，變化出很多種不同的視覺呈現(xiàn)形式。

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

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

1、居中對(duì)齊排版

正如上面所說的那樣，居中對(duì)齊的排版重心更穩(wěn)，自然也更適合用在相對(duì)平穩(wěn)的構(gòu)圖，比如：

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

做個(gè)案例，下面這張圖本身構(gòu)圖就相對(duì)穩(wěn)定，又沒有其他元素干擾文字排版。

那么只需要加上文案，做好對(duì)齊，一張?jiān)斍轫?yè)海報(bào)就做好了。

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

2、居左、居右對(duì)齊排版

一般情況下，當(dāng)畫面重心不平穩(wěn)時(shí)，我們會(huì)考慮通過文字排版、裝飾元素等來平衡，所以這時(shí)候就會(huì)用到居左、居右對(duì)齊排版。

如上圖所示，當(dāng)畫面重心偏向一側(cè)時(shí)，根據(jù)情況選擇居左或居右對(duì)齊排版就變得順理成章，比如下面幾個(gè)案例：

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

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

那么我們還可以依據(jù)什么來做好詳情頁(yè)的文字排版呢？

因?yàn)殡娚淘斍轫?yè)的使用場(chǎng)景更偏向手機(jī)端，而且現(xiàn)在都是按照手機(jī)一屏的尺寸為單位劃分模塊，所以圖文的形式大多數(shù)情況下都是上下結(jié)構(gòu)。

因此受其結(jié)構(gòu)的特質(zhì)影響，詳情頁(yè)排版相對(duì)而言并不復(fù)雜，不像首頁(yè)、海報(bào)、平面類設(shè)計(jì)那樣，需要太多的板式結(jié)構(gòu)，所以很少會(huì)出現(xiàn)故意營(yíng)造畫面重心不穩(wěn)，用作突出強(qiáng)調(diào)的。

這也是我在翻閱大量?jī)?yōu)秀的詳情頁(yè)案例中驗(yàn)證后得到的結(jié)論。

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

比如用下面這張圖，雖然圖中兩個(gè)產(chǎn)品的長(zhǎng)短不同，但兩個(gè)產(chǎn)品所占的直覺比重是差不多的，所以整體的視覺重心是相對(duì)平穩(wěn)的。

可如果將這張場(chǎng)景圖做詳情頁(yè)首圖，即便是重心相對(duì)平穩(wěn)，文案也不再合適用居中排版的形式做，因?yàn)槭艿搅藞D片本身結(jié)構(gòu)的影響。

下面我簡(jiǎn)單的排了一下：

最終是這樣的：

所以就出現(xiàn)了相對(duì)平穩(wěn)原則。

理解起來很簡(jiǎn)單，就是利用英文、線條、圖標(biāo)、數(shù)字等裝飾元素或必要排版元素平衡畫面，營(yíng)造視覺上的相對(duì)平穩(wěn)即可。

原則上來說，相對(duì)平穩(wěn)原則適用于絕大部分詳情頁(yè)的文字排版工作。

這就能解釋為什么重心明明很平穩(wěn)，有很多詳情頁(yè)案例中的文案不用居中對(duì)齊也能做的很出彩的原因：“他們做到了視覺上的相對(duì)平穩(wěn)?！?

如下圖所示：

視覺相對(duì)平穩(wěn)是允許存在偏差的，并不是像對(duì)稱式構(gòu)圖那樣要求那么絕對(duì)，設(shè)計(jì)有很強(qiáng)的主觀性，也不像數(shù)學(xué)那么嚴(yán)謹(jǐn)，看起來差不多就行。

當(dāng)然，你也能看到一些豎向排版，或不規(guī)則的排版，但核心思想是共通的，就是視覺上的相對(duì)平穩(wěn)。

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

比如下面這個(gè)案例：如下圖將產(chǎn)品簡(jiǎn)單的擺放好。

初步的詳情頁(yè)海報(bào)構(gòu)圖就出來了，很多人的第一直覺就是居中排版，因?yàn)楫吘惯@么構(gòu)圖整體重心是穩(wěn)的，比如像下面這樣：

一個(gè)簡(jiǎn)單的海報(bào)雛形就有了，可能你會(huì)感覺有點(diǎn)太平了、還有點(diǎn)空，那么我們可以加點(diǎn)光影元素豐富一下畫面，再稍微調(diào)下整體的顏色，如下圖：

這個(gè)海報(bào)的確很簡(jiǎn)單，但感覺還不錯(cuò)，如果按照相對(duì)平穩(wěn)原則，換個(gè)排版形式是不是也可以：

不同的排版結(jié)構(gòu)給人的感受也不一樣，兩者沒有對(duì)錯(cuò)，至于你會(huì)選擇用哪一種，這就取決于你對(duì)整體規(guī)劃和自己的主觀感受了。

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

補(bǔ)充：本文以詳情頁(yè)首圖排版為切入點(diǎn)，詳情頁(yè)中其他模塊同理。

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

作者：老張

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》深度剖析：如何做好詳情頁(yè)文字排版？

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

作者：百度MEUX

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》對(duì)話河南衛(wèi)視-年輕化趨勢(shì)下的傳統(tǒng)文化新表現(xiàn)形式

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司