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

01 當(dāng)前背景

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

02 什么是品質(zhì)感？

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

例如：無(wú)印良品和愛(ài)馬仕，兩者都會(huì)傳達(dá)給用戶(hù)一種“品質(zhì)感”，雖設(shè)計(jì)方向不同，但他們有一個(gè)共同的特性-對(duì)細(xì)節(jié)的深度打磨。其實(shí)品質(zhì)感，就是來(lái)源于產(chǎn)品對(duì)細(xì)節(jié)的深度考究與打磨。

一款有品質(zhì)感的設(shè)計(jì)，隨之帶來(lái)的是用戶(hù)使用中的舒適度、好感度、信賴(lài)感。

03 界面中的品質(zhì)感

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

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

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

界面的結(jié)構(gòu)在用戶(hù)體驗(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í)、分割等。

（1）組合

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

1）輔助信息服務(wù)于主體信息

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

2）關(guān)系越緊密的內(nèi)容距離應(yīng)越近

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

（2）層級(jí)

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

1）主次分明、避免層級(jí)混亂

清晰的層級(jí)結(jié)構(gòu)，能讓用戶(hù)更快的獲取重要內(nèi)容，同一組合下其信息一定有主要展示和次要展示。可以通過(guò)位置、面積、顏色三個(gè)維度建立主次層級(jí)的對(duì)比度。

a. 位置

在中國(guó)，用戶(hù)的閱讀習(xí)慣為從左上至右下，所以用戶(hù)對(duì)左上區(qū)域的觀察最優(yōu)，依次為右上、左下，而右下最差。因此，左上部和上中部被稱(chēng)為“最佳視域”。

b. 面積

信息內(nèi)容在界面內(nèi)的占比面積越大，信息越是突出。

c. 顏色

白色背景下，明度越低/飽和度越高，信息越是突出。