引言

如今人們出行都離不開手機(jī)，都通過手機(jī)接觸過互聯(lián)網(wǎng)地圖，手機(jī)地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實(shí)時(shí)更新的優(yōu)勢，形成了成熟的地圖交互體驗(yàn)。在解析手機(jī)地圖的體驗(yàn)設(shè)計(jì)前，讓我們先看看地圖的發(fā)展歷程。

一、地圖的發(fā)展

地圖擁有著古老的歷史，記錄了人類對(duì)世界認(rèn)知的演進(jìn)過程，經(jīng)歷過泥板、壁畫、羊皮、紙張等載體，依據(jù)使用和文化需要擁有著豐富多樣的美術(shù)形式。不同時(shí)期、材質(zhì)、美術(shù)形式的地圖見證人們認(rèn)識(shí)世界的過程。

隨著照相機(jī)和飛機(jī)的發(fā)展，出現(xiàn)了航空攝影測量技術(shù)，讓地圖的測繪精準(zhǔn)度達(dá)到頂峰。交通、旅游、印刷業(yè)的發(fā)展，讓紙媒地圖開始融入人們的生活，地圖的平面設(shè)計(jì)更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。

再隨著衛(wèi)星影像、瓦片地圖技術(shù)和互聯(lián)網(wǎng)的發(fā)展，人們可以日常地使用電子地圖。受限于網(wǎng)絡(luò)速度的限制，矢量地圖應(yīng)運(yùn)而生，在特定范圍顯示相應(yīng)的矢量瓦片信息，讓互聯(lián)網(wǎng)地圖的形狀趨向統(tǒng)一化。

iPhone革命性的觸屏體驗(yàn)，通過手勢與地圖進(jìn)行直觀自然的交互體驗(yàn)，結(jié)合內(nèi)置GPS、陀螺儀傳感器，小藍(lán)點(diǎn)成為地圖定位的通用標(biāo)志，激發(fā)更多地圖的功能和創(chuàng)意。

二、手機(jī)地圖的創(chuàng)新體驗(yàn)

手機(jī)地圖繼承了互聯(lián)網(wǎng)電子地圖的可快速迭代、信息可實(shí)時(shí)更新的優(yōu)勢，結(jié)合觸屏手勢操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務(wù)和社交娛樂中，這些場景也不斷豐富和完善著地圖的信息。

手勢交互讓地圖從移動(dòng)到縮放都高效地動(dòng)起來，激勵(lì)人們探索更廣的區(qū)域。更革命性的是讓地圖從平面到立體之間的順滑轉(zhuǎn)換，幫助人們更好的映射到真實(shí)世界。 

可視化信息是互聯(lián)網(wǎng)地圖的主要優(yōu)勢之一，將數(shù)據(jù)轉(zhuǎn)化為可視化圖形，歸類在不同的數(shù)據(jù)層，可以單個(gè)或多個(gè)層級(jí)疊加在地圖上展示，傳達(dá)位置上的數(shù)據(jù)。 

底圖是手機(jī)地圖的基礎(chǔ)，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內(nèi)容不斷細(xì)化和歸類，在不同的縮放層級(jí)下，展示符合用戶查看場景的核心內(nèi)容。

三、手勢交互：全方位呈現(xiàn)地圖立面

觸屏手勢交互有別于搖桿、鼠標(biāo)、觸控筆等物理外設(shè)的控制方式，讓用戶在小小的屏幕對(duì)大范圍的地圖有更隨心所欲的操作，讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現(xiàn)方式。

單指拖動(dòng)

拖動(dòng)是地圖最基本的閱讀操作，一般以用戶的定位為初始中心點(diǎn)，用戶可以有目的有方向地查看附近的地點(diǎn)。

單指劃動(dòng)

當(dāng)用戶想快速翻閱時(shí)會(huì)撥走要略過的內(nèi)容，劃動(dòng)模擬了這一行為。地圖被劃動(dòng)后也會(huì)模擬物理世界以一定的摩擦力停下，向用戶展示地圖的新區(qū)域，是比拖動(dòng)要快速的瀏覽方式。

雙指拖動(dòng)縮放

物理控件只能讓地圖根據(jù)屏幕中心進(jìn)行縮放，而觸屏縮放能讓地圖根據(jù)兩個(gè)指尖的中心點(diǎn)縮放，并同時(shí)位移，符合用戶空間操控認(rèn)知。

雙指劃動(dòng)縮放

劃動(dòng)縮放和劃動(dòng)一樣，讓用戶以更輕量的手勢加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶快速找到目標(biāo)位置。

單指快捷縮放

為了讓用戶能單手并可控地縮放地圖，不少地圖都設(shè)計(jì)了自己獨(dú)有的縮放方式。 zenly，通過屏幕兩側(cè)的邊緣，直接完成地圖的最大和最小縮放跨度。

snapchat拖動(dòng)右側(cè)邊可緣喚起縮放滑塊，并使用emoji來表達(dá)距離，充滿幽默感。

騰訊地圖，通過劃動(dòng)右側(cè)的滑塊，實(shí)現(xiàn)單手順滑地縮放，滑塊也支持劃動(dòng)手勢。

百度地圖，通過點(diǎn)擊一個(gè)縮放控件，讓地圖以當(dāng)前中心點(diǎn)進(jìn)行分段縮放。

無限循環(huán)的地圖

地球是圓的，可以無限巡航，一些應(yīng)用將縮到最小的世界地圖做循環(huán)處理，以呼應(yīng)地球的循環(huán)轉(zhuǎn)動(dòng)體驗(yàn)。

方向視角切換

在陌生的環(huán)境用戶未必能分得清楚南北方向，利用手機(jī)的陀螺儀，可以告知用戶正在面向的方向。定位按鈕的二次點(diǎn)擊，將地圖從南北向轉(zhuǎn)到用戶面向的方向，有助于用戶二次確認(rèn)自己的定位。

更多地圖使用了2D/3D視角的切換方式，2D是南北向的標(biāo)準(zhǔn)地圖，3D是用戶面向方向的地圖，幫助用戶更直觀地對(duì)應(yīng)物理空間。

旋轉(zhuǎn)方向

可通過雙指或陀螺儀旋轉(zhuǎn)地圖，地圖上的文字也做出相應(yīng)調(diào)整，保持水平、沿道路方向調(diào)整，以保證可讀性。

3D的旋轉(zhuǎn)也一樣，在保持水平和沿道路方向的同時(shí)，文字保持垂直。

當(dāng)縮小到足夠遠(yuǎn)時(shí)，用戶面向的方向意義就不大了，蘋果在縮小到一定范圍時(shí)，將地圖回彈保持南北向。

雙指拖動(dòng)調(diào)整視角

地圖3D視角也支持自由調(diào)節(jié)，通過雙指平行的上下滑動(dòng)，可以平順調(diào)整3D視圖鳥瞰的角度。

在地圖的最低視角做回彈處理，生動(dòng)不呆板。

遠(yuǎn)近也能影響鳥瞰的視角變化，視角越低越接近平視，拉進(jìn)時(shí)有俯沖的感覺。

四、可視化信息：生動(dòng)呈現(xiàn)地圖動(dòng)態(tài)數(shù)據(jù)

從古代開始，人們就已經(jīng)懂得通過繪制山脈、河流、海洋、建筑等對(duì)重要位置信息進(jìn)行標(biāo)記，地圖本身就是一個(gè)信息可視化工具。 互聯(lián)網(wǎng)地圖最大的優(yōu)勢，就是能提供實(shí)時(shí)的信息數(shù)據(jù)。將數(shù)據(jù)標(biāo)記在相應(yīng)位置的坐標(biāo)上，并分別歸類在不同的層級(jí)，疊加在地圖上查看。

地圖的常用數(shù)據(jù)形式可大致分為：點(diǎn)、線、面、熱力圖等，一個(gè)地圖可同時(shí)喚起多種類型、多個(gè)圖層的信息內(nèi)容。

點(diǎn)數(shù)據(jù)

點(diǎn)數(shù)據(jù)是單個(gè)地理坐標(biāo)上的標(biāo)記，代表該位置上的信息，是地圖上最常用的數(shù)據(jù)信息。地圖通過不同的小圖標(biāo)來區(qū)分位置類型，使用頻率越高的樣式越簡潔，地標(biāo)建筑做形象化圖形標(biāo)識(shí)。

聚合圖在地圖上呈現(xiàn)也是點(diǎn)數(shù)據(jù)，它實(shí)質(zhì)是顯示一定區(qū)域內(nèi)的信息聚合，但不強(qiáng)調(diào)具體的區(qū)域。聚合圖可以避免因?yàn)樵搮^(qū)域的點(diǎn)數(shù)據(jù)過多，在地圖上信息過于密集。

百度的充電樁地圖就是以區(qū)域聚合充電樁數(shù)量，根據(jù)縮放調(diào)整數(shù)據(jù)的聚合。

騰訊地圖的文博地圖也是聚合圖，并根據(jù)文物的類型做了快速篩選。

線數(shù)據(jù)

線數(shù)據(jù)在地圖上呈現(xiàn)為線性，一般都沿著可行道路展示信息。導(dǎo)航路線是最常用的線數(shù)據(jù)，它提供具體行駛路線方案，并實(shí)時(shí)展示線路行駛的進(jìn)度與方向。

也有粗略表示進(jìn)度的線路數(shù)據(jù)，如快遞的物流進(jìn)度路線就不需要具體的實(shí)際線路，只需要示意大致進(jìn)程。

街景地圖則僅展示有全景圖的道路范圍，不提供進(jìn)度與方向。

面數(shù)據(jù)

面數(shù)據(jù)要展示地圖上的具體區(qū)域，疫情環(huán)境下出現(xiàn)了區(qū)域風(fēng)控需求，需通過了面數(shù)據(jù)畫出區(qū)域范圍。疫情地圖采用了聚合圖、面區(qū)塊兩種數(shù)據(jù)形式。

zenly使用了反向的面數(shù)據(jù)，根據(jù)用戶的行走記錄，將用戶走過的范圍擦亮，用戶未走過的地方是一塊彩色的平面，充滿娛樂感。

熱力圖

熱力圖以特殊的高亮梯度顯示地圖上區(qū)域的熱度，熱力圖的數(shù)據(jù)不會(huì)指向地圖上具體的位置，它能呈現(xiàn)熱度變化的趨勢。百度地圖用熱力圖直觀展示地區(qū)上的擁擠程度。

高德地圖的空氣質(zhì)量地圖，使用聚合圖作為空氣質(zhì)量評(píng)分，熱力圖作為空氣質(zhì)量范圍。

snapchat使用熱力圖來表現(xiàn)該區(qū)域用戶發(fā)布動(dòng)態(tài)的熱度，引導(dǎo)用戶發(fā)現(xiàn)內(nèi)容，由于熱力圖不指向具體位置，能更好的保護(hù)用戶隱私。

熱力圖并不局限于面，路線也可以反映道路的熱度。Strava利用用戶的騎行數(shù)據(jù)，生成光點(diǎn)線路的熱力圖，可以看出哪些是熱門的騎行線路和必經(jīng)地點(diǎn)。

路況也是一種線性的熱力圖，路況使用按段測量的方式，熱力值的梯度相對(duì)跳躍。

讓數(shù)據(jù)動(dòng)起來

地圖是安靜的，但真實(shí)世界是忙碌的，讓數(shù)據(jù)動(dòng)起來，給地圖增添更多情感化設(shè)計(jì)，緩解用戶的等待壓力。

忙碌的商家

外賣小哥端午節(jié)雨中送餐

公交努力奔來

五、底圖：為更好呈現(xiàn)信息的色彩系統(tǒng)

手機(jī)地圖的底圖最常使用矢量瓦片地圖，因?yàn)閿?shù)據(jù)體積小，在互聯(lián)網(wǎng)環(huán)境下讀取速度快。矢量地圖用幾何圖形來表達(dá)區(qū)域，不展示具體細(xì)節(jié)，因此需要通過顏色去傳達(dá)不同區(qū)域的屬性或功能。 

人們對(duì)于顏色和環(huán)境是能建立一定的聯(lián)想的，如綠色想到大自然，藍(lán)色想到水，紅色想到警示。根據(jù)人們對(duì)色彩的聯(lián)想，給矢量地圖中不同屬性的區(qū)域進(jìn)行配色，幫助用戶理解地圖。谷歌地圖就曾經(jīng)為不同類型的信息標(biāo)記出700多種顏色，最后簡化為25個(gè)顏色，形成了地圖的色彩系統(tǒng)。

工具類地圖應(yīng)用以地圖為核心基礎(chǔ)，對(duì)矢量圖形有最全面的歸類，因而擁有最豐富的配色系統(tǒng)。由于人們對(duì)區(qū)域功能的顏色聯(lián)想是相似的，各地圖廠商的標(biāo)準(zhǔn)地圖的配色都很接近。地圖用色素雅，才能讓多個(gè)顏色能和諧的同時(shí)存在，降低用戶的視覺疲勞，并能突出地圖上的信息圖層，讓用戶聚焦所關(guān)心的數(shù)據(jù)。

而一些垂直場景的應(yīng)用，地圖區(qū)域功能的描述相對(duì)次要，通常會(huì)對(duì)地圖的用色進(jìn)行大幅度精簡。以打車應(yīng)用為例，地圖用色少且色調(diào)相近，突出核心的打車狀態(tài)信息顏色，同時(shí)體現(xiàn)應(yīng)用的品牌特色。

不少運(yùn)用地圖的概念設(shè)計(jì)中，會(huì)更極致的使用單色系地圖，僅突出數(shù)據(jù)信息的顏色，充滿未來感。

六、未來的地圖

隨著網(wǎng)絡(luò)速度的提升，手機(jī)硬件的升級(jí)，順應(yīng)AR/VR技術(shù)的發(fā)展，地圖逐步進(jìn)入3D和全真時(shí)代。蘋果地圖在現(xiàn)有的地圖的3D視圖下，已對(duì)地標(biāo)建筑賦予更多細(xì)節(jié)，并在夜間模式模擬了燈光效果。

3D地圖就像是虛擬世界中的基礎(chǔ)建設(shè)一樣，蘋果地圖添加精細(xì)地標(biāo)模型后，同時(shí)應(yīng)用到Carplay的導(dǎo)航中，在駕駛時(shí)可直觀看到與現(xiàn)實(shí)世界對(duì)應(yīng)的3D地標(biāo)。

谷歌更是提出“沉浸式視圖”的高保真3D地圖，使用圖像還原一座城市的面貌，為瀏覽一座城市提供了幾乎真實(shí)的鳥瞰視角。

同時(shí)全真模擬日照和天氣系統(tǒng)，和現(xiàn)實(shí)一樣模擬東升西落的光線方向，模擬晚上和雨天下的城市面貌。

隨著地圖的立體全真化，地圖的數(shù)據(jù)也將向空間延伸。相對(duì)全真地圖而言，人們本身就身置真實(shí)的地圖場景中，未來借助AR設(shè)備，人們無需對(duì)照地圖即可完成導(dǎo)航。

結(jié)語

地圖歷來是人們借助藝術(shù)的手法，以極具想象力的方式對(duì)世界進(jìn)行再現(xiàn)，它遵循科學(xué)測量的法則，使用幾何的線條和形狀對(duì)地球的進(jìn)行抽象化。地圖反映了制作者對(duì)世界的認(rèn)知，而現(xiàn)代的科學(xué)技術(shù)讓地圖呈現(xiàn)盡可能客觀。但地圖并非單純地呈現(xiàn)地球，而是呈現(xiàn)人們眼中的世界，它寄托著人們對(duì)美好生活的想象，更好的認(rèn)識(shí)、探索和規(guī)劃世界。

其實(shí)用戶故事還是由人物故事演化而來。

傳統(tǒng)的人物故事主人公一定是一個(gè)響當(dāng)當(dāng)?shù)拿?，至少是做出了某種貢獻(xiàn)的，并且這類的內(nèi)容傳播目的并不在于轉(zhuǎn)化或“帶貨”，而是為了傳遞某種價(jià)值觀。

或許我們可以把傳統(tǒng)的人物故事稱為“名人傳記”。

到現(xiàn)在，越來越多的企業(yè)、品牌，甚至是個(gè)人IP都在做用戶案例故事，而這類內(nèi)容與傳統(tǒng)人物故事恰恰相反：

1. 主人公可能是個(gè)名不經(jīng)傳的小人物
2. 除了體現(xiàn)正向價(jià)值觀，還另有目的
3. 內(nèi)容調(diào)性更接地氣

那么，如何讓用戶幫你的產(chǎn)品講好故事，賣得更好？接下來從三點(diǎn)展開說說。

一、明確做用戶案例故事的目的

以目的為導(dǎo)向，在決定做用戶故事/用戶案例分享前，首先要明確：

• 為什么要做用戶案例故事的項(xiàng)目？
• 希望通過用戶故事達(dá)到什么目的/效果？

一般做用戶故事，我們所期望達(dá)到的效果不外乎是以下三種：

1）品牌宣傳

通過用戶故事達(dá)到品牌曝光和宣傳的效果，讓用戶知道我們的品牌、知道有這么一個(gè)產(chǎn)品。

B端產(chǎn)品，且對(duì)接客戶是比較有名的公司，會(huì)比較適合使用客戶故事來進(jìn)行品牌宣傳。

比如：影刀RPA、三維家。

內(nèi)容結(jié)構(gòu)一般是某大公司使用了我們的產(chǎn)品，解決了什么問題，達(dá)到了一個(gè)怎樣的驚人效果。

2）產(chǎn)品介紹

這類產(chǎn)品的功能或許比較多，借助用戶故事來介紹產(chǎn)品及其功能的使用場景，并根據(jù)不同的用戶使用場景來給出具體的解決方案。

比如：印象筆記、訊飛智能錄音筆。

一般內(nèi)容結(jié)構(gòu)是用戶在某類場景下遇到什么難點(diǎn)，如何使用產(chǎn)品，達(dá)到了什么目的/收獲了什么。

3）種草營銷

如果是為了營銷，讓用戶種草某類產(chǎn)品而輸出用戶故事，那么此類故事要深究用戶的痛點(diǎn)和爽點(diǎn)，這樣才能精準(zhǔn)打動(dòng)用戶，促使用戶進(jìn)行下一步的使用、購買等轉(zhuǎn)化動(dòng)作。

比如：微眾銀行（理財(cái)產(chǎn)品）、人人都是產(chǎn)品經(jīng)歷（付費(fèi)課程）。

值得一提的是，像小紅書的種草筆記也是很不錯(cuò)的素材，但對(duì)于種草軟文來說篇幅略短，需要擴(kuò)寫。

一般內(nèi)容結(jié)構(gòu)是用戶使用產(chǎn)品前后的對(duì)比、反轉(zhuǎn)，給人一種出其不意的效果，讀者看了后會(huì)覺得很爽，也想達(dá)到一樣的效果。

二、如何收集用戶素材并策劃用戶故事？

用戶故事的素材來源一般有以下幾個(gè)方式：

1）用戶投稿

最簡單快捷的方式就是由用戶自行撰寫，當(dāng)然如果能提前跟用戶溝通好主題、確認(rèn)好內(nèi)容框架，并且用戶文筆還不錯(cuò)，那自然是最好的。但這個(gè)方式對(duì)用戶的門檻還是比較高的。

如果用戶故事想要追求真實(shí)性、接地氣，這類素材是最合適的。要是真能遇到一個(gè)很不錯(cuò)的故事，還可以由官方再次編輯再進(jìn)行傳播。

素材收集渠道：官方自有投稿渠道、用戶外部平臺(tái)分享（如小紅書、微博、豆瓣等）。

2）征稿活動(dòng)

策劃征稿活動(dòng)，明確內(nèi)容主題、內(nèi)容要求，由用戶輸出，再由官方進(jìn)行二次創(chuàng)作。

二次創(chuàng)作的方式一般有2種：

①一篇長文

長文形式一般是在用戶原創(chuàng)的基礎(chǔ)上（此類用戶的創(chuàng)作水平一般，文案多以流水文形式呈現(xiàn)），對(duì)排版、邏輯、結(jié)構(gòu)進(jìn)行打亂重建，讓文章結(jié)構(gòu)整體更具邏輯性及可讀性，并突出產(chǎn)品優(yōu)勢，必要時(shí)可能需要加上一些“夸張手法”。

②一個(gè)專題

從大量稿件中篩選一批有相同點(diǎn)的精彩內(nèi)容，由官方匯總成專題，并加上官方導(dǎo)語、前言或結(jié)語等。這種形式的工作量會(huì)輕松很多，并且豐富性更強(qiáng)。

征稿方式：公眾號(hào)、官方社區(qū)、核心用戶群等官方自有陣地發(fā)布征稿活動(dòng)。

3）征集話題

以話題形式征集用戶案例素材，官方借用相關(guān)案例進(jìn)行原創(chuàng)輸出。

手段跟征稿活動(dòng)的方式差不多，但活動(dòng)形式較后者更輕。話題討論對(duì)用戶和運(yùn)營方的壓力都不大，并且對(duì)運(yùn)營方來說可創(chuàng)作的自由性更大。

形式同樣可以長文或?qū)ｎ}的結(jié)構(gòu)來呈現(xiàn)，如果是專題，只需要把比較精彩的內(nèi)容呈現(xiàn)出來即可；如果是長文，需要提煉主觀點(diǎn)，再結(jié)合產(chǎn)品進(jìn)行小觀點(diǎn)的闡述。

征集方式：公眾號(hào)、官方社區(qū)、核心用戶群等官方自有陣地發(fā)布話題征集活動(dòng)。

4）核心用戶采訪

這類素材是最真實(shí)、最有說服力的，但同時(shí)操作難度也是比較大的，并且還有一個(gè)隱形問題，就是你辛辛苦苦做了人物采訪，好不容易輸出了一篇自認(rèn)為很優(yōu)秀的用戶故事，但讀者卻不這樣認(rèn)為，各項(xiàng)數(shù)據(jù)可能都不會(huì)太好看。

但這類用戶故事是最適合做品牌宣傳的。因?yàn)槟阕隽艘粋€(gè)很高大上的東西出來，無論是掛在公司網(wǎng)站首頁，還是用來推廣產(chǎn)品，這都可以作為一個(gè)品牌的門面。

在方式上來說，可以采用問卷的形式，最終文稿還是由官方撰寫。問卷的形式最簡單便捷也是使用互聯(lián)網(wǎng)工作風(fēng)格的。

對(duì)于使用產(chǎn)品的核心用戶，他們既不會(huì)自行撰寫，也不會(huì)參與任何的話題討論，但是典型的使用用戶，那么可以根據(jù)他們對(duì)產(chǎn)品的使用習(xí)慣，提出相關(guān)的問題，以問卷或邀約訪談的方式進(jìn)行了解他們對(duì)產(chǎn)品的使用感受。

三、我們能給到用戶什么？

對(duì)于提供案例故事的用戶，最好能由官方給與一定的獎(jiǎng)勵(lì)，哪怕是由用戶自發(fā)輸出的內(nèi)容，也應(yīng)當(dāng)給與一定的回應(yīng)，會(huì)顯得品牌方更有人情味。

當(dāng)然獎(jiǎng)勵(lì)不一定非要實(shí)物獎(jiǎng)勵(lì)或金錢獎(jiǎng)勵(lì)，有時(shí)候一個(gè)肯定或感謝也能讓用戶感到很暖心。

一般回饋用戶不過就是“老四樣”：

1）金錢獎(jiǎng)勵(lì)

根據(jù)用戶參與的程度、提供素材的豐富度、故事的完整度等設(shè)定不同等級(jí)的金錢獎(jiǎng)勵(lì)標(biāo)準(zhǔn)。

2）物質(zhì)獎(jiǎng)勵(lì)

對(duì)于參與的用戶，可以獎(jiǎng)勵(lì)一些產(chǎn)品周邊、紀(jì)念品等實(shí)物。

3）榮譽(yù)獎(jiǎng)勵(lì)

設(shè)置一些徽章、頭銜名稱給到用戶，比如xx代言人，xx宣傳官等。

4）流量獎(jiǎng)勵(lì)

給與一些運(yùn)營位、廣告位宣傳參與的用戶或其公司，類似異業(yè)合作，此類獎(jiǎng)勵(lì)適用于小有名氣的kol或商家用戶；

如果是B端產(chǎn)品的用戶，還可以有“人脈獎(jiǎng)勵(lì)”，即搭建核心用戶社群或舉辦線下交流會(huì)，定期舉辦一些課程、培訓(xùn)等，不僅能幫助用戶搭建人脈橋梁，還能讓用戶有收獲知識(shí)的快感。

“三角測量”在用戶體驗(yàn)研究領(lǐng)域正在變成一個(gè)時(shí)髦用語。它究竟是什么？它可以如何幫助你提高用戶洞察的質(zhì)量呢？

一、什么是“三角測量”？

1. 定義

“三角測量”這一術(shù)語源自幾何學(xué)，它指的是根據(jù)已知的點(diǎn)向未知的點(diǎn)構(gòu)建三角形的方式來確定該點(diǎn)的位置。

在社會(huì)科學(xué)領(lǐng)域，三角測量指采用多種調(diào)查方法來研究同一種現(xiàn)象（例如訪談或定量調(diào)查等）。這一概念跟法醫(yī)學(xué)中的“交叉詰問”（cross- examination）接近，通過詢問多位目擊者的證詞更易接近事實(shí)真相。這是通過發(fā)現(xiàn)數(shù)據(jù)的一致性和不一致性來實(shí)現(xiàn)的。

根據(jù)《研究設(shè)計(jì)百科全書》（Encyclopedia of Research Design）的定義：

三角測量是指使用多種來源的數(shù)據(jù)進(jìn)行研究，或使用多種方法分析數(shù)據(jù)，以提升調(diào)查研究的可信度。

研究的可信度通常包含：

• 內(nèi)部有效性（或定性研究的可信度）：我們在測量自己想要測量的東西嗎？
• 外部有效性（或定性研究的可轉(zhuǎn)移性）：我們正在測量的東西可以運(yùn)用到現(xiàn)實(shí)世界嗎？
• 可靠性（或定性研究的可靠性）：如果我們再做一次研究，是否會(huì)得出同樣的結(jié)果？

2. 類型

Denzin [1] 認(rèn)為，沒有哪一種的方法、理論或觀察員可以捕獲一項(xiàng)研究中所有相關(guān)或者重要事物。而三角測量法正是被提出來解決這一問題的。Denzin 在 20 世紀(jì) 70 年代確定了四種主要類型的三角測量法，如今仍舊被研究學(xué)界廣泛地認(rèn)可。

（[1]諾曼·K.鄧津，伊利諾伊大學(xué)香檳分校社會(huì)學(xué)系榮譽(yù)教授，質(zhì)性研究法終身成就獎(jiǎng)獲得者之一）

1）數(shù)據(jù)三角測量（多數(shù)據(jù)集）

指在一項(xiàng)研究中使用不同的數(shù)據(jù)源。尤其是，通過不同的樣本策略收集數(shù)據(jù)，例如收集不同時(shí)間、不同環(huán)境或不同的研究對(duì)象的數(shù)據(jù)。這種方法可以用其他數(shù)據(jù)的優(yōu)點(diǎn)來彌補(bǔ)當(dāng)前數(shù)據(jù)存在的不足，這樣可以提升結(jié)果的有效性和可靠性。

2）研究員三角測量（多研究員）

該方法指在同一調(diào)查中采用多個(gè)調(diào)查人員 / 評(píng)估人員。為了做好三角測量，每一位評(píng)估者都會(huì)使用相同方法（例如訪談、觀察）進(jìn)行相同的實(shí)驗(yàn)，之后將所有評(píng)估者的發(fā)現(xiàn)進(jìn)行比較。如果所有研究人員都得出了一樣的結(jié)論，那么其有效性就成立。

在用戶體驗(yàn)研究中，同樣可以通過讓多個(gè)研究人員分析同一組定性數(shù)據(jù)來實(shí)現(xiàn)。使用不同種族、年齡、性別和階級(jí)群體的研究人員可以糾正諸如觀察者或訪談?wù)咂姷膯栴}。

3）理論三角測量（多理論）

該方法只涉及一組數(shù)據(jù)，但研究人員會(huì)采用不同的理論或替代的理論進(jìn)行詮釋。人們甚至通過一些相互矛盾的理論視角來看待數(shù)據(jù)。

4）方法三角測量（多方法）

指在使用不同的方法來研究一種情景或現(xiàn)象。其目的是用其他方法的優(yōu)點(diǎn)補(bǔ)足某一種方法的不足和偏差。該類型的三角測量與在社會(huì)科學(xué)研究中所使用的“混合研究方法”（mixed-method approaches）類似，用一種方法得出的結(jié)果來提升、增強(qiáng)和闡述另一種方法的結(jié)果。

二、用戶研究中的“三角測量”

不同的方法可以解答不同的問題，但同樣也有一定的局限性。在用戶研究（或者說任何一種社會(huì)研究）中沒有哪種方法是完美的。

利益相關(guān)者或初級(jí)研究員們會(huì)經(jīng)常來問我，究竟該如何解決各種研究方法的局限性，我的解答通常就是“三角測量”。即使是計(jì)劃周密、控制得當(dāng)?shù)难芯咳耘f會(huì)存在局限。但針對(duì)特定的問題采用 多個(gè)視角（方法、數(shù)據(jù)點(diǎn)、研究人員以及理論），可以提升我們的信心，幫助我們獲得可信度。

在用戶體驗(yàn)研究中，最常用的三角測量類型就是“方法三角測量”（例如通過調(diào)查和訪談來研究同樣的問題）和“研究員三角測量”（例如多個(gè)研究員分析同一組數(shù)據(jù)）。三角測量使我們對(duì)研究數(shù)據(jù)更有信心，揭示意想不到的發(fā)現(xiàn)，對(duì)現(xiàn)象有更清晰的認(rèn)識(shí)。

用戶研究中應(yīng)用三角測量的例子

針對(duì)一個(gè)問題使用多種方法進(jìn)行研究以理解用戶的行為及其原因。例如，我們可以調(diào)查用戶如何使用一個(gè)特定的功能，然后通過深度訪談來探究為什么用戶會(huì)這樣用。使用混合方法常常可以讓我們用更清晰的視角看問題。

通常來說，研究會(huì)從定性的方法開始，以確定和縮小問題。例如，在做發(fā)現(xiàn)研究時(shí)，我們可以從訪談開始，一旦我們確定了一些主題，就可以用定量的方法來驗(yàn)證我們的見解。當(dāng)然過程也可以反過來，這取決于我們正在研究的問題。

三、“三角測量”的局限性

無論是哪種類型的三角測量都是基于這樣一個(gè)假設(shè)：使用不同的數(shù)據(jù)來源、方法或者研究員可以減少數(shù)據(jù)集或方法論的偏差。

這意味著，使用三角測量可以增加我們對(duì)自己的見解的信心。

然而使用這一方法的同時(shí)，需要警告的是，它也可能導(dǎo)致“證實(shí)偏差”。可能你不太熟悉這一含義，“證實(shí)偏差”就是描述我們潛在的傾向，即注意、聚焦且更相信那些符合我們現(xiàn)有信念的證據(jù)。

如果你之前并未使用過三角測量，請記住它有時(shí)會(huì)得出矛盾和不一致的結(jié)果。在這些情況下，要由研究者來理解數(shù)據(jù)和不一致的來源。這對(duì)于經(jīng)驗(yàn)較少的研究者來說尤其有挑戰(zhàn)性。

三角測量有助于我們對(duì)正在研究的現(xiàn)象有更寬泛的視野但仍舊不是全貌。不用說，合適的設(shè)計(jì)研究仍舊對(duì)保證可信度至關(guān)重要。如果你的設(shè)計(jì)研究較差，那么三角測量將對(duì)你幫助不大 —— 輸出的質(zhì)量往往取決于輸入的質(zhì)量。

四、何時(shí)使用“三角測量”

理想情況下，我們希望有數(shù)月的時(shí)間以及無限的預(yù)算來進(jìn)行研究。但是事實(shí)是，我們通常會(huì)發(fā)現(xiàn)我們幾乎沒有足夠時(shí)間來嚴(yán)格執(zhí)行某一種方法，且資源有限。這就使得應(yīng)用三角測量具有相當(dāng)大的挑戰(zhàn)性，它無法應(yīng)用在我們所做的每個(gè)研究中。

所以我們應(yīng)該如何決定什么時(shí)候使用三角測量呢？

• 做高度重要工作時(shí)：我們無法每次做三角測量，但是當(dāng)需要做一些可能會(huì)影響業(yè)務(wù)和用戶的重要的決策（例如重大的重新設(shè)計(jì)），我們需要優(yōu)先考慮它。
• 你的團(tuán)隊(duì)中擁有多位研究員時(shí)：組成一個(gè)小組，讓至少 2 名研究員參與數(shù)據(jù)收集和分析的工作。這可以有效幫助你控制一些偏差（例如訪談?wù)咂姡?
• 與其他團(tuán)隊(duì)合作：當(dāng)開始一個(gè)新的項(xiàng)目時(shí)，你可以從查看現(xiàn)有數(shù)據(jù)和產(chǎn)品分析開始。讓數(shù)據(jù)分析師和產(chǎn)品經(jīng)理參與進(jìn)來。

前言

文字是設(shè)計(jì)中的重要組成部分，就像我們平時(shí)看到的海報(bào)，里面各種被精心設(shè)計(jì)過的字體經(jīng)常會(huì)成為視覺焦點(diǎn)，以醒目且個(gè)性化方式傳達(dá)出內(nèi)容的精髓，最后達(dá)到的效果事半功倍。
雖然在UI設(shè)計(jì)中不需要對(duì)文字過分設(shè)計(jì)，但圖文作為主要的傳播途徑，字體的使用是否規(guī)范合理將直接影響著信息傳播的優(yōu)先級(jí)、重要程度以及用戶的接收質(zhì)量和效率。所以不管是平面設(shè)計(jì)還是UI設(shè)計(jì)，字體都是不可忽視的核心元素，做好對(duì)文字信息層級(jí)的處理，對(duì)用戶的視覺體驗(yàn)有著至關(guān)重要的作用。
互聯(lián)網(wǎng)經(jīng)過多年的發(fā)展，也積累的很多的專業(yè)字體知識(shí)，設(shè)計(jì)師應(yīng)該去了解字體的性格及特征并將其合理運(yùn)用，才能將信息更清晰的傳達(dá)給用戶。本文將圍繞著字型、字號(hào)、字距、字重等幾個(gè)屬性，針對(duì)各方面深度解析，希望能夠幫到大家。

分享目錄

一、字體的基本特征
二、字體的基本屬性
三、不同場景下的屬性參考
四、字體使用基本原則
五、UI設(shè)計(jì)需注意的問題
六、結(jié)語

一、字體的基本特征

1、使用前的思考

文字是信息內(nèi)容的載體，能最直接的將信息清晰的表達(dá)出來，字體則表現(xiàn)了文字的外在特征，合理的使用這些屬性特征不僅能清晰準(zhǔn)確的傳遞信息、用于特定場景還能賦予情感表達(dá)，展現(xiàn)出獨(dú)特的魅力，例如：健身、器械類的產(chǎn)品使用的字體通常會(huì)給人一種力量、剛硬、壯實(shí)的感覺，而女性專用產(chǎn)品字體則顯的纖細(xì)、苗條。

2.為什么要使用黑體

不同類型的字體傳達(dá)出不同的氣質(zhì)，綜合來講，字體可分為黑體、宋體、圓體、書法體這四類，平時(shí)大家看到的各種形形色色的其他字體，基本是通過這幾類延伸而來。
在UI設(shè)計(jì)中，絕大多數(shù)的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋方（ios）、微軟雅黑（PC web）等都是標(biāo)準(zhǔn)的黑體。另外，特定場景如瓷片區(qū)、卡片、banner、專題頭圖、引導(dǎo)頁、閃屏等，對(duì)于用什么字體不會(huì)有太大的限制，在避免商用侵權(quán)的前提下符合產(chǎn)品氣質(zhì)即可。
黑體字的筆畫橫平豎直、粗細(xì)均勻且字面呈正方形，一般來說，沒有襯線的字體都可以稱作黑體。黑體結(jié)構(gòu)清晰、簡潔有力，能讓界面顯得莊重還附有現(xiàn)代感，雖然氣質(zhì)上沒有太大的個(gè)性化、但可塑性很強(qiáng)，這也是在UI設(shè)計(jì)中、黑體一直很受青睞的原因，無論是標(biāo)題、正文、提示等使用場景都可以作為首選，對(duì)老設(shè)計(jì)師能多一個(gè)選擇、新手設(shè)計(jì)師也不易犯錯(cuò)。

3.iOS與Android的區(qū)別

iOS與Android是移動(dòng)設(shè)備的兩大系統(tǒng)，雖然很多設(shè)計(jì)師用一稿適配兩端、遇到特殊頁面也只是單獨(dú)拎出來微調(diào)即可，但對(duì)于中、大型的互聯(lián)網(wǎng)公司則很難滿足優(yōu)質(zhì)用戶體驗(yàn)中的部分細(xì)微差別，例如：iOS的蘋方字體在Android設(shè)備中無法高度還原、預(yù)留的文字?jǐn)?shù)量上限位置無法顯示完整等，都會(huì)影響用戶體驗(yàn)。
此外，iOS和Android都有自己獨(dú)立的設(shè)計(jì)規(guī)范，大家有時(shí)間的可自行查看，本文只對(duì)字體規(guī)范作基本了解。
iOS使用的是「蘋方」字體，提供了6個(gè)字重，英文字體為「San Francisco」；Android使用的是Google聯(lián)合Adobe發(fā)布的「思源黑體」，為充分滿足設(shè)計(jì)要求，提供了7個(gè)字重，英文字體為「Roboto」。

此外，如果界面中涉及的數(shù)據(jù)較多，數(shù)字使用DIN字體也是不錯(cuò)的選擇，字體外形較長，易用且耐看，很適合數(shù)據(jù)統(tǒng)計(jì)展示，不過這款字體商用的話需要收費(fèi)的。

二、字體的基本屬性

1.字體大小

字號(hào)的大小決定信息的層次和權(quán)重，不規(guī)律的使用字號(hào)會(huì)讓頁面信息雜亂，不利于用戶閱讀。在設(shè)定字號(hào)規(guī)范時(shí)，需特別注意最小值和遞增值。
最小值決定信息的可讀性，以2倍圖為例，iOS11系統(tǒng)將最小字號(hào)規(guī)范為11pt（22px），但很多產(chǎn)品依然將最小字號(hào)設(shè)定為20px，甚至部分產(chǎn)品將18px的數(shù)字加粗運(yùn)用在標(biāo)簽中，所以最小字號(hào)的設(shè)定并沒有固定數(shù)值，原則上不影響用戶的瀏覽就行。筆者建議最小字號(hào)不要低于20px，在設(shè)計(jì)過程中，可以通過設(shè)備實(shí)時(shí)預(yù)覽，因?yàn)橥瑯拥淖痔?hào)在不同的環(huán)境、色值、背景下，其視覺效果都有所區(qū)別。
其次，遞增值決定著信息層級(jí)區(qū)分的明顯程度，遵循字號(hào)越大、遞增值越大的原則，常用字號(hào)數(shù)量控制在6種左右。iOS和Android都是采用的2倍數(shù)柵格系統(tǒng)，為了讓字號(hào)的層級(jí)區(qū)分更明顯，字號(hào)設(shè)定要避開奇數(shù)且最小遞增值不要低于4px，下面舉幾個(gè)常見的例子：
①：20、24、28、32、40、48、64...
②：20、24、30、36、42、48、64...
③：22、26、30、34、40、48、60...
...

規(guī)范好的字號(hào)該如何使用，還得根據(jù)界面中的實(shí)際場景來決定，如下圖：

2.字符間距

字間距是指兩個(gè)字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調(diào)整需求較大外，中文通常只保持默認(rèn)，只有少數(shù)場景才會(huì)手動(dòng)調(diào)整，且沒有固定的規(guī)律，保持視覺舒適狀態(tài)即可。例如：banner、界面大標(biāo)題、重要數(shù)字（取件碼）顯示等。 

3.行高

行高是指包圍在字體之外的隱形邊框，一個(gè)字體元素的的行高等于文字上邊框+下邊框+字號(hào)的高度之和。
西文字體因高度的參差不齊，本身就能制造出視覺上的上下空間，通常行高為字號(hào)的1.2倍，而中文字體沒有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號(hào)較小且折行較多，行高甚至能達(dá)到字號(hào)的2倍。

4.字重

字重指的是字體的粗細(xì)，不同的字重能體現(xiàn)出不同的層級(jí)關(guān)系，給用戶的視覺感受也截然不同。
像蘋方、思源、阿里巴巴普惠這些家族字體一般都會(huì)有極細(xì)體、細(xì)體、常規(guī)體、黑體、粗體等多個(gè)字重，在UI設(shè)計(jì)中，實(shí)用的就常規(guī)體、加粗兩個(gè)字重，再通過色彩、字號(hào)使其成為對(duì)立關(guān)系，明顯的拉開文字內(nèi)容層級(jí)后，方能保持良好的瀏覽體驗(yàn)。

5.全角與半角

這種主要針對(duì)標(biāo)點(diǎn)符號(hào)，以英文字母為標(biāo)準(zhǔn)，半角是指一個(gè)符號(hào)占用一個(gè)標(biāo)準(zhǔn)字符（英文）的位置，全角則是占用兩個(gè)字符位置。
眾所周知，中文使用都是全角、英文使用半角，并且會(huì)隨著中/英文的切換而自動(dòng)改變，但有時(shí)候難免會(huì)操作失誤讓頁面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時(shí)間/日期也大多會(huì)使用半角符號(hào)，所以設(shè)計(jì)師對(duì)此有一定的了解時(shí)候、，在處理這些細(xì)枝末節(jié)就能做到收放自如。

三、不同場景下的屬性參考

在色彩規(guī)范中，除主/輔助色之外，設(shè)計(jì)師還會(huì)提供3~4個(gè)等級(jí)的配色，如通用的#333（標(biāo)題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規(guī)范，不同的字號(hào)需用色規(guī)律。

如果想進(jìn)一步延展，可以增加一點(diǎn)品牌色，也可以使用#000（純黑）調(diào)整不透明度來體現(xiàn)文字色彩層級(jí)，深色模式中很常見，下面我們一起來了解幾個(gè)常見的使用場景。

1.標(biāo)題

標(biāo)題的主要作用是讓用戶以最快的速度了解界面主要信息，需要時(shí)刻吸引用戶的注意力，例如APP中的導(dǎo)航欄、模塊標(biāo)題、內(nèi)容標(biāo)題、數(shù)據(jù)統(tǒng)計(jì)等。需要簡單明了且有沖擊力，字號(hào)一般會(huì)控制在30px以上并加粗顯示，直接使用一級(jí)色值（#333）即可。
在特殊場景下，標(biāo)題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協(xié)調(diào)，不然花里胡哨的還不如用回一級(jí)色值。

2.正文

正文并不需要吸引用戶注意力，它主要是提供標(biāo)題的注釋或內(nèi)容的詳細(xì)說明。
當(dāng)白色背景文本內(nèi)容過多、在需要用戶仔細(xì)閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號(hào)使用二級(jí)文字（#666）色值。

3.提示語

提示類文字使用場景就相對(duì)較多，它除了給用戶展示當(dāng)前狀態(tài)，還能給予合理的引導(dǎo)，促進(jìn)用戶進(jìn)行下一步操作。常見使用色值為三級(jí)（#999）、四級(jí)色值（#ccc），例如界面中的操作注意事項(xiàng)、表單占位符等。字號(hào)一般為24px，因使用場景不同，也會(huì)有特殊的存在，例如表單中占位符的字號(hào)會(huì)跟隨輸入后的字號(hào)統(tǒng)一。

4.超鏈接

超鏈接在字號(hào)、色值上沒有一定的限制，但需要一個(gè)特定的輔助元素/屬性來提示用戶這是可點(diǎn)擊的。
例如APP登錄頁面，找回密碼、注冊、獲取驗(yàn)證碼等，大部分都是用主體色、圖標(biāo)（右箭頭）等方式強(qiáng)化可操作入口，而PC端網(wǎng)頁中超鏈接的表現(xiàn)方式，下劃線、藍(lán)色字體、>>這三種方式幾乎能涵蓋所有。

5.其他

規(guī)范并非不可更改，它只能幫助設(shè)計(jì)師在大部分使用場景中減少設(shè)計(jì)出入并提高產(chǎn)出效率，但總有一些使用場景需特殊對(duì)待，字體也不例外，如以下場景：

◇ APP金剛區(qū)入口字體大多使用24px，一級(jí)色值（#333）；

◇ 底部Tab欄字體未激活使用淺色，激活后切換為一級(jí)色值（#333）或主體色；

◇ 重量級(jí)的提示語用紅色色值；

◇ 按鈕中的文字跟隨按鈕的等級(jí)權(quán)重變化；

◇ 深色容器標(biāo)簽的文字反白；

◇ ......

四、字體使用基本原則

1.符合產(chǎn)品氣質(zhì)

雖說黑體（蘋方、思源、阿里巴巴普惠）是UI設(shè)計(jì)中的首選字體，但這也僅僅只是建立在不出錯(cuò)的的情況下、滿足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類型、情感、氣質(zhì)等品牌屬性，在不影響用戶識(shí)別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗(yàn)，對(duì)于追求完美的APP來時(shí)是一個(gè)不錯(cuò)的解決方案。
例如，部分藝術(shù)、女性類的APP會(huì)選擇使用宋體，整體看起來有一種高端、時(shí)尚且優(yōu)雅的感覺。

整體界面使用特殊字體還是相對(duì)較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場景，會(huì)讓產(chǎn)品更有特色，例如banner、瓷片區(qū)、大標(biāo)題、頭圖等，對(duì)用戶的視覺吸引力能得到很大提升。 

2.使用同一家族字體

在一個(gè)APP中，堅(jiān)持使用同一個(gè)家族的字體，對(duì)標(biāo)題、正文等文字信息有一個(gè)統(tǒng)一的視覺規(guī)劃，這樣有助于建立起體系化的設(shè)計(jì)思路，避免在開發(fā)落地時(shí)存在一致性問題，減少開發(fā)與設(shè)計(jì)的出入。
筆者曾見過這樣的設(shè)計(jì)師，界面中原本用了「蘋方」字體，在一個(gè)特殊場景下，「蘋方」的粗體字重?zé)o法滿足大標(biāo)題的使用需求，于是將大標(biāo)題單獨(dú)改為「阿里巴巴普惠體」的最大字重。
從表面上看，上述的設(shè)計(jì)需求是滿足了，但稍有不慎就會(huì)成為沒有價(jià)值的藝術(shù)品，首先，單獨(dú)一處使用不同家族的字體，會(huì)影響整體視覺的一致性；其次，若程序沒有嵌入另外的字體，產(chǎn)品落地后其視覺效果毫無改觀，且更沒有必要為了某個(gè)場景的使用要單獨(dú)嵌入幾十到幾百兆的家族字體，讓應(yīng)用安裝包無故加大。在設(shè)計(jì)中，有時(shí)候在解決某個(gè)問題時(shí)，解決方案并非無可替代，加粗字體亦是如此。
另外，在可用性、實(shí)用性強(qiáng)且必要的情況下，并非不能再增加一個(gè)家族字體，例如所有標(biāo)題系列使用「阿里巴巴普惠體」、數(shù)字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。

3.明確的信息層級(jí)

在同一個(gè)界面中，字體色值、字號(hào)、字重等，都是用于區(qū)分信息層級(jí)，盡量不要使用過多的層級(jí)，避免層級(jí)混亂影響信息瀏覽。
在信息層級(jí)處理方式的四個(gè)基本原則中，「對(duì)比」就是將復(fù)雜的信息通過元素的各種屬性以不同的視覺效果呈現(xiàn)，來體現(xiàn)信息節(jié)奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。

五、UI設(shè)計(jì)需注意的問題

1.避頭尾的使用

避頭尾使用在文字內(nèi)容較多的折行場景中，主要處理標(biāo)點(diǎn)符號(hào)剛好出現(xiàn)在一行文字的開頭或結(jié)尾時(shí)，通過自動(dòng)調(diào)整單行的字符間距、在視覺上將標(biāo)點(diǎn)符號(hào)前移或后移。
在新聞資訊類應(yīng)用的詳情頁中，避頭尾使用的較多，用以避免頭/尾存在標(biāo)點(diǎn)符號(hào)造成視覺重量不一、信息參差不齊的問題出現(xiàn)。

2.反差體現(xiàn)層級(jí)

很多時(shí)候，為了區(qū)分信息層級(jí)，首先想到的是利用不同的字號(hào)、字重來體現(xiàn)，這當(dāng)然沒有問題，但如果結(jié)合字體的明暗關(guān)系（灰度色值等級(jí)）則效果更佳。
如下圖：標(biāo)題一級(jí)色值（#333）、正文二級(jí)色值（#666）、時(shí)間日期三級(jí)色值（#999）。

3.備用字體

備用字體只會(huì)運(yùn)用在web頁面中，如果網(wǎng)站需要一款特殊的字體才能彰顯其獨(dú)特的氣質(zhì)、同時(shí)又擔(dān)心用戶在某些設(shè)備中因?yàn)闆]有這個(gè)字體而無法瀏覽其效果，則會(huì)另外再選擇一款相近的通用字體作為備選，以彌補(bǔ)視覺體驗(yàn)上的損失。
如果字體包不大，也可以讓開發(fā)將其放在服務(wù)器端，這樣能讓所有用戶都能看到相同的效果，省去了不少麻煩。

4.確保可讀性

可讀性應(yīng)該是選擇字體的首要元素，雖說很多文字我們都可以從前后字義、聯(lián)想詞等角度將自己的理解補(bǔ)充完整，但完全沒有必要。
UI設(shè)計(jì)不像海報(bào)那樣融入較多的藝術(shù)成分，更需要的是內(nèi)容清晰、表意明確、高效率的傳達(dá)，任何增加用戶閱讀、理解成本的做法都應(yīng)該規(guī)避掉，例如過于變形的可愛風(fēng)格、書法手寫體等都盡量少用。

六、結(jié)語

文本內(nèi)容是UI界面中占比較多的元素之一，設(shè)計(jì)師需要對(duì)其基本屬性及使用場景有一個(gè)清晰的了解，使用的是否恰當(dāng)取決于我們對(duì)字體的選擇。雖說在UI領(lǐng)域，字體模塊類的文章比較少（更多是文字、字庫的設(shè)計(jì)），但它在設(shè)計(jì)規(guī)范中的地位是舉足輕重，選好一款字體對(duì)設(shè)計(jì)來說是錦上添花。
關(guān)于UI界面中的字體，其實(shí)沒有太多的講究，也沒必要整得花里胡哨，重點(diǎn)在于排版過重中注意信息層級(jí)的劃分以及有足夠的視覺舒適度即可。

作者：大漠飛鷹CYSJ      來源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



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



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)計(jì)是我們經(jīng)常會(huì)遇到的一個(gè)類型，一個(gè)好的按鈕其最重要的就是激起點(diǎn)擊欲，讓人忍不住去戳戳戳。

我們來看看下面這個(gè)按鈕：

很普通，處處都很常見的一種按鈕，沒有任何點(diǎn)擊欲。

那我們應(yīng)該怎么做出她的點(diǎn)擊欲呢？

其實(shí)就是要讓按鈕更有立體感，話不多說直接上干貨！

1.層次

可以用不同的顏色，放大一圈，形成對(duì)比：

上下錯(cuò)開一些讓按鈕的造型飽滿立體一些，從原來的單一一層變?yōu)閮蓪樱?

2.層次

為了讓按鈕更立體我們可以把這兩層個(gè)復(fù)制一層，往下移動(dòng)幾個(gè)像素：

這樣按鈕是不是就已經(jīng)立體多了？別急，還有呢！

3.光影

這里細(xì)節(jié)就比較多，想把按鈕做到晶瑩剔透可不容易，給大家好好講一下。

先給圖形加上一個(gè)內(nèi)發(fā)光：

使用剪切蒙版，涂顏色或者再來一層內(nèi)發(fā)光，加強(qiáng)這個(gè)效果：

復(fù)制一層，選用更深的顏色，向下移動(dòng)，剪切蒙版到里面去，把按鈕有一個(gè)明顯的明暗分割線，形成這種光的層次和厚度：

沿著造型刻畫高光，和邊緣有些間隔：

在白色的底座上加入按鈕的投影：

這樣一個(gè)剔透，立體感強(qiáng)的按鈕造型就完成啦！

那還能不能讓點(diǎn)擊欲更強(qiáng)一些呢？

4.表像圖形

放上文案看看：

就還是有點(diǎn)單對(duì)吧。

這種時(shí)候我們就可以從按鈕的文案出發(fā)，加入一些圖案，讓它更生動(dòng)！

比如這里的文案是“發(fā)射”，就聯(lián)想到了火箭，我們可以繪制一個(gè)火箭出來。

把它加入到按鈕上：

這樣一個(gè)豐富且有點(diǎn)擊欲的按鈕就完成了！

并可以用同樣的邏輯去延展別的按鈕，讓他們保持統(tǒng)一性：

總結(jié)

增強(qiáng)按鈕的點(diǎn)擊欲的方式，其實(shí)就是讓它變得立體且豐富。

1.層次：單獨(dú)的一個(gè)色塊，會(huì)很單薄，增加層次增加其在造型上的豐富度。

2.厚度：厚度可以讓按鈕變得更立體。

3.光影：讓按鈕富有變化，更立體和吸引人。

4.表像圖形：一個(gè)關(guān)聯(lián)文案信息的點(diǎn)綴圖案，可以讓人更有食欲。

作者：菜心輕量文      來源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



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



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司