一、當(dāng)前背景

今天聊些設(shè)計(jì)基礎(chǔ)部分。

設(shè)計(jì)工作中，我們總會(huì)接到不同場(chǎng)景、不同目標(biāo)用戶的業(yè)務(wù)需求，需要不同風(fēng)格的設(shè)計(jì)方案支持，但無論是什么風(fēng)格的設(shè)計(jì)，用戶都會(huì)有一個(gè)共同訴求——「品質(zhì)感」。

二、什么是品質(zhì)感？

所謂品質(zhì)感其實(shí)就是產(chǎn)品給人的一種嚴(yán)謹(jǐn)、專心對(duì)待的態(tài)度。同樣一本書的封面，粗糙紙的封面和細(xì)心打磨的小羊皮封面就是不同的概念。

三、界面中的品質(zhì)感

界面設(shè)計(jì)也是一樣，也會(huì)帶給用戶一種品質(zhì)感，其同樣是源于設(shè)計(jì)師對(duì)界面的每處細(xì)節(jié)的深度考究。

界面的品質(zhì)感主要來源于界面四個(gè)維度、界面中的結(jié)構(gòu)、界面中的圖形、界面中的顏色和界面中的動(dòng)態(tài)，今天說如何通過結(jié)構(gòu)提升界面品質(zhì)感。

四、界面中的結(jié)構(gòu)

界面的結(jié)構(gòu)在用戶體驗(yàn)中起著重要作用，其相當(dāng)于界面設(shè)計(jì)中的「骨」，界面結(jié)構(gòu)中的細(xì)節(jié)更是會(huì)直接影響到整體設(shè)計(jì)的品質(zhì)感。那么具體結(jié)構(gòu)中的細(xì)節(jié)體現(xiàn)在哪里？

1. 關(guān)系

信息關(guān)系包含界面中的組合、層級(jí)、分割等。

組合

「物以類聚」，界面內(nèi)需明確傳達(dá)各元素間的關(guān)系。

輔助信息服務(wù)于主體信息：輔助信息為主體內(nèi)容的延續(xù)說明或補(bǔ)充操作，作用為服務(wù)于主體內(nèi)容。同一組合內(nèi)，信息間需有明確的關(guān)系與合理的順序，且輔助信息不能搶鏡。例如朋友圈，清晰傳達(dá)關(guān)系的同時(shí)，以內(nèi)容為主的閱讀方式不會(huì)被頭像內(nèi)容干擾。

關(guān)系越緊密的內(nèi)容距離應(yīng)越近：形式不變的基礎(chǔ)上，元素之間的距離越近，越易被視為同一組合。距離相同時(shí)，橫向排列的內(nèi)容接近度相對(duì)更高。

層級(jí)

界面的層級(jí)關(guān)系主要體現(xiàn)在主次、優(yōu)先級(jí)、層數(shù)。

主次分明、避免層級(jí)混亂：清晰的層級(jí)結(jié)構(gòu)，能讓用戶更快的獲取重要內(nèi)容，同一組合下其信息一定有主要展示和次要展示?？梢酝ㄟ^位置、面積、顏色三個(gè)維度建立主次層級(jí)的對(duì)比度。

位置。在中國(guó)，用戶的閱讀習(xí)慣為從左上至右下，所以用戶對(duì)左上區(qū)域的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為「最佳視域」。
面積。信息內(nèi)容在界面內(nèi)的占比面積越大，信息越是突出。
顏色。白色背景下，明度越低/飽和度越高，信息越是突出。

分割

分割是用于區(qū)分不同信息的方法，大概可以分為距離分割、線性分割、面性分割（背景色分割）、顏色分割。

距離分割：增大兩模塊的距離達(dá)到內(nèi)容分割內(nèi)容作用，元素間的距離越遠(yuǎn)，越不易被視為同一組合。其好處是可以省去分割元素，減少視覺層級(jí)，讓界面更干凈、明快。

線性分割：線性分割是目前界面中最常用的分割方式，其優(yōu)勢(shì)是線自身「較輕」，不易干擾用戶。值得注意的是線本身不重要，不宜過度強(qiáng)調(diào)，應(yīng)點(diǎn)到為止，所以線的顏色不宜過重。

面性分割/背景色分割：當(dāng)處理多層級(jí)、信息復(fù)雜的場(chǎng)景，在單個(gè)模塊里已經(jīng)用了線性分割的情況下?？赡苄枰鼜?qiáng)一點(diǎn)的分割方式來表明模塊與模塊間的關(guān)系，這時(shí)我們可能需要面性分割方式。這種方式像是灰色的背景上，羅列著多張卡片，能更明確的表達(dá)兩組內(nèi)容的分割感，但其缺點(diǎn)是會(huì)較明顯的增多界面層級(jí)。

能起到分割作用的前提下，分割方式越輕，越不會(huì)干擾閱讀、界面越干凈。

以上可以總結(jié)為

界面中的組合能讓信息關(guān)系更縝密。
層級(jí)能讓用戶更快的獲取重要內(nèi)容。
分割能讓用戶更清晰的區(qū)分不同模塊間關(guān)系。

2. 字體

文字字體是界面結(jié)構(gòu)中重要組成部分，文字也是多數(shù)場(chǎng)景下信息傳達(dá)最為準(zhǔn)確的方法。合理的字體能夠增加用戶的閱讀體驗(yàn)，提升用戶在產(chǎn)品使用中的舒適度。合理的字體包含字體的可讀性、對(duì)比度、間距。

可讀性：可讀性是字體在界面中需考慮的基礎(chǔ)因素，也是首要因素。字體的信息傳達(dá)需精準(zhǔn)、明確。字形選擇包括其場(chǎng)景適應(yīng)和字形的適度性。

字形的場(chǎng)景適應(yīng)：由于不同的字形會(huì)帶給用戶不同的感覺。由于場(chǎng)景需要，我們一定情況下會(huì)選擇自定義字體。當(dāng)我們選擇不同的字體時(shí)，需要考慮字體在產(chǎn)品內(nèi)不同模塊下是否易于閱讀。

字形的適度性：字體本身不宜搶鏡。隨意的、搶眼的字體一定場(chǎng)景下上能夠帶來足夠的氛圍感，但是長(zhǎng)期使用會(huì)出現(xiàn)「視覺疲勞」，其原因是字體本身的設(shè)計(jì)搶走了用戶正常在該場(chǎng)景下閱讀或使用的內(nèi)容和信息。

對(duì)比度

字號(hào)：用于區(qū)分不同層級(jí)的信息內(nèi)容，為保證信息的快速傳達(dá)，不同層級(jí)的字體需有一定的優(yōu)先級(jí)順序。

界面內(nèi)的主文案/一級(jí)文案應(yīng)精簡(jiǎn)明確。假設(shè)用戶只會(huì)在這個(gè)界面停留3、4秒，能夠吸引用戶繼續(xù)瀏覽界面的就是一級(jí)信息。當(dāng)一級(jí)信息文案字?jǐn)?shù)過多，會(huì)增加用戶剛進(jìn)入頁面時(shí)的閱讀成本，進(jìn)而降低閱讀體驗(yàn)。

另外，移動(dòng)端小于24px的字號(hào)應(yīng)慎重使用，雖然小的字號(hào)會(huì)讓版式更加的精致，但當(dāng)同一場(chǎng)景下，小于24px的文案字?jǐn)?shù)偏多時(shí)，會(huì)影響用戶的正常閱讀。但可用于弱化的文字鏈、標(biāo)簽等字?jǐn)?shù)少的場(chǎng)景。

加粗：字號(hào)相同，字體加粗也是區(qū)分不同層級(jí)信息的一種方法，當(dāng)兩信息區(qū)分度不大、界面層級(jí)過多需要減少層級(jí)的場(chǎng)景下，可以選擇加粗部分內(nèi)容建立輕度對(duì)比。

字色：我們畫畫的時(shí)候，時(shí)常會(huì)聽到老師說「要注意畫面的黑白灰」。在界面設(shè)計(jì)中，也是一樣，我們需注意各層級(jí)字體間的黑白灰關(guān)系。明確的畫面黑白灰關(guān)系會(huì)讓界面變得更干凈清晰。另外，當(dāng)不同明度切換時(shí)應(yīng)保持色相/飽和度不變。

間距：在界面設(shè)計(jì)中，字間距和行間距會(huì)直接影響用戶閱讀效率。過于緊密的間距會(huì)讓字體間失去「透氣性」，根據(jù)我們正常的閱讀順序來講，字間距要小于行間距以便于每一行更易被視為一組，進(jìn)而給用戶帶來更好的閱讀體驗(yàn)。我們可根據(jù)文案長(zhǎng)短，字號(hào)大小制定更適合閱讀的間距。

字體的可讀性是字體的基礎(chǔ)，明確的字體對(duì)比度能夠讓信息層級(jí)更加清晰干凈，而合理的字間距能夠無形的提升用戶的閱讀體驗(yàn)。

3. 信息對(duì)齊

對(duì)齊是界面結(jié)構(gòu)中的一部分，合理的對(duì)齊方式能夠使界面內(nèi)的信息變得更規(guī)整，內(nèi)容傳達(dá)更明確。讓元素間的關(guān)系更具節(jié)奏感。

聯(lián)系性

同一組合內(nèi)的不同元素間需有明確的對(duì)齊關(guān)系，其關(guān)系能夠清晰表達(dá)不同元素間的親密性。

元素間的居左對(duì)齊：當(dāng)文案的字?jǐn)?shù)偏多一些的場(chǎng)景下，居左對(duì)齊更符合用戶的閱讀習(xí)慣。

元素間的居中對(duì)齊：當(dāng)內(nèi)容信息較少、或由于對(duì)齊元素形狀等因素，居中對(duì)齊可能會(huì)帶來意外的收獲與效果。

元素間的居右對(duì)齊：界面內(nèi)一般不會(huì)用居右對(duì)齊的方式來建立兩元素間的關(guān)系，但是界面內(nèi)會(huì)存在和屏幕建立右對(duì)齊關(guān)系的元素，與屏幕右對(duì)齊的元素一般為主體的解釋說明以及輔助操作等。一般情境下，當(dāng)用戶閱讀完主要內(nèi)容信息后才會(huì)對(duì)操作類的功能有需求，如查看購(gòu)買、關(guān)注、查看更多、進(jìn)入下一頁面等。

統(tǒng)一性

另外，不同組件間也需要合理的建立對(duì)齊關(guān)系，同時(shí)為保持界面的簡(jiǎn)潔性，同一界面內(nèi)建立的對(duì)齊模式不要過多。

總結(jié)

界面的結(jié)構(gòu)是提升界面品質(zhì)感的關(guān)鍵，而合理的信息關(guān)系、字體、對(duì)齊方式能夠讓界面的結(jié)構(gòu)更加完整，精致。也希望每個(gè)設(shè)計(jì)師的作品都更加的美而精致。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站標(biāo)題：教你如何提升界面品質(zhì)感！
標(biāo)題來源：http://www.rwnh.cn/news46/318096.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站導(dǎo)航、小程序開發(fā)、商城網(wǎng)站、定制開發(fā)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)