山東網站建設

山東網站製作
當前位置: 首 頁 >> 新聞中心 >> 行業新聞

如何提升界麵品質感——界麵中的結構

如何提升界麵品質感——界麵中的結構

發布日期:2018-07-10 作者: 點擊:

品質感其實就是產品給人的一種嚴謹、專心對待的態度,同樣一本書的封麵,粗糙紙的封麵和細心打磨的小羊皮封麵就是不同的概念。那要如何提升界麵品質感呢?


01 當前背景

今天聊些設計基礎部分。設計工作中,AG平台總會接到不同場景、不同目標用戶的業務需求,需要不同風格的設計方案支持,但無論是什麽風格的設計,用戶都會有一個共同訴求——“品質感”。

02 什麽是品質感?

所謂品質感其實就是產品給人的一種嚴謹、專心對待的態度,同樣一本書的封麵,粗糙紙的封麵和細心打磨的小羊皮封麵就是不同的概念。

例如:無印良品和愛馬仕,兩者都會傳達給用戶一種“品質感”,雖設計方向不同,但他們有一個共同的特性-對細節的深度打磨。其實品質感,就是來源於產品對細節的深度考究與打磨。

一款有品質感的設計,隨之帶來的是用戶使用中的舒適度、好感度、信賴感。

03 界麵中的品質感

界麵設計也是一樣,也會帶給用戶一種品質感,其同樣是源於設計師對界麵的每處細節的深度考究。

界麵的品質感主要來源於界麵四個維度、界麵中的結構、界麵中的圖形、界麵中的顏色和界麵中的動態,今天說如何通過結構提升界麵品質感。

04 界麵中的結構

界麵的結構在用戶體驗中起著重要作用,其相當於界麵設計中的“骨”,界麵結構中的細節更是會直接影響到整體設計的品質感,那麽具體結構中的細節體現在哪裏?

1. 關係

信息關係包含界麵中的組合、層級、分割等。

(1)組合

“物以類聚”,界麵內需明確傳達各元素間的關係。

1)輔助信息服務於主體信息

輔助信息為主體內容的延續說明或補充操作,作用為服務於主體內容。同一組合內,信息間需有明確的關係與合理的順序,且輔助信息不能搶鏡。例如:朋友圈,清晰傳達關係的同時,以內容為主的閱讀方式不會被頭像內容幹擾。

2)關係越緊密的內容距離應越近

形式不變的基礎上,元素之間的距離越近,越易被視為同一組合。距離相同時,橫向排列的內容接近度相對更高。

(2)層級

界麵的層級關係主要體現在主次、優先級、層數。

1)主次分明、避免層級混亂

清晰的層級結構,能讓用戶更快的獲取重要內容,同一組合下其信息一定有主要展示和次要展示。可以通過位置、麵積、顏色三個維度建立主次層級的對比度。

a. 位置

在中國,用戶的閱讀習慣為從左上至右下,所以用戶對左上區域的觀察最優,依次為右上、左下,而右下最差。因此,左上部和上中部被稱為“最佳視域”。

b. 麵積

信息內容在界麵內的占比麵積越大,信息越是突出。

c. 顏色

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


2)同一組合下,有且僅能有一個最重要的內容

當所有的內容都重要,也就等於所有內容都不重要,信息的優先級不取決於主要信息是否夠大,而是主要信息和次要信息的對比度。

3)同一頁麵,信息層級不宜過多

過多的信息層級會讓頁麵變得複雜,增加用戶的理解成本。冗餘的信息展示會讓界麵變的淩亂瑣碎,一定程度上幹擾用戶使用體驗,一般情況下界麵應控製在 3 層信息以內。

主次分明、優先級明確、層級適當會讓界麵的信息傳達更清晰明確,進而增加用戶的使用中的舒適度。

(3)分割

分割是用於區分不同信息的方法,大概可以分為距離分割、線性分割、麵性分割(背景色分割)、顏色分割

1)距離分割

增大兩模塊的距離達到內容分割內容作用,元素間的距離越遠,越不易被視為同一組合。其好處是可以省去分割元素,減少視覺層級,讓界麵更幹淨、明快。

2)線性分割

線性分割是目前界麵中最常用的分割方式,其優勢是線自身“較輕”,不易幹擾用戶。值得注意的是線本身不重要,不宜過度強調,應點到為止,所以線的顏色不宜過重。

3)麵性分割/背景色分割

當處理多層級、信息複雜的場景,在單個模塊裏已經用了線性分割的情況下。可能需要更強一點的分割方式來表明模塊與模塊間的關係,這時AG平台可能需要麵性分割方式。

這種方式像是灰色的背景上,羅列著多張卡片,能更明確的表達兩組內容的分割感,但其缺點是會較明顯的增多界麵層級。

4)顏色分割

當信息的表現形式重複性較高,容易被看混的情況下,顏色分割是更為合適的選擇。

能起到分割作用的前提下,分割方式越輕,越不會幹擾閱讀、界麵越幹淨。

以上可以總結為:

  • 界麵中的組合能讓信息關係更縝密;

  • 層級能讓用戶更快的獲取重要內容;

  • 分割能讓用戶更清晰的區分不同模塊間關係。

2. 字體

文字字體是界麵結構中重要組成部分,文字也是多數場景下信息傳達最為準確的方法。合理的字體能夠增加用戶的閱讀體驗,提升用戶在產品使用中的舒適度。合理的字體包含字體的可讀性、對比度、間距。

(1)可讀性

可讀性是字體在界麵中需考慮的基礎因素,也是首要因素。字體的的信息傳達容易需精準、明確。字形選擇包括其場景適應和字形的適度性。

1)字形的場景適應

由於不同的字形會帶給用戶不同的感覺,由於場景需要,AG平台一定情況下會選擇自定義字體。當AG平台選擇不同的字體時,需要考慮字體在產品內不同模塊下是否易於閱讀。

2)字形的適度性

字體本身不宜搶鏡,隨意的、搶眼的字體一定場景下上能夠帶來足夠的氛圍感,但是長期使用會出現“視覺疲勞”,其原因是字體本身的設計,搶走了用戶正常在該場景下閱讀或使用的內容和信息。


(2)對比度

1)字號

用於區分不同層級的信息內容,為保證信息的快速傳達,不同層級的字體需有一定的優先級順序。

a. 界麵內的主文案/一級文案應精簡明確。假設用戶隻會在這個界麵停留3、 4 秒,能夠吸引用戶繼續瀏覽是界麵的就是一級信息。當一級信息文案字數過多,會增加用戶剛進入頁麵時的閱讀成本,進而降低閱讀體驗。

b. 另外,移動端小於24px的字號應慎重使用,雖然小的字號會讓板式更加的精致,但當同一場景下,小於24px的文案字數偏多時,會影響用戶的正常閱讀。但可用於弱化的文字鏈、標簽等字數少的場景。

(2)加粗

字號相同,字體加粗也是區分不同層級信息的一種方法,當兩信息區分度不大、界麵層級過多需要減少層級的場景下,可以選擇加粗部分內容建立輕度對比。

(3)字色

AG平台畫畫的時候,時常會聽到老師說“要注意畫麵的黑白灰”。在界麵設計中,也是一樣,AG平台需注意各層級字體間的黑白灰關係。明確的畫麵黑白灰關係,會讓界麵變得更幹淨清晰。另外,當不同明度切換時應保持色相/飽和度不變。

(3)間距

在界麵設計中,字間距和行間距會直接影響用戶閱讀效率。過於緊密的間距會讓字體間失去“透氣性”,根據AG平台正常的閱讀順序來講,字間距要小於行間距以便於每一行更易被視為一組,進而給用戶帶來更好的閱讀體驗。AG平台可根據文案長短,字號大小製定更適合閱讀的間距。

字體的可讀性是字體的基礎,明確的字體對比度能夠讓信息層級更加清晰幹淨,而合理的字間距能夠無形的提升用戶的閱讀體驗。

3. 信息對齊

對齊是界麵結構中的一部分,合理的對齊方式能夠使界麵內的信息變得更規整,內容傳達更明確。讓元素間的關係更具節奏感。

(1)聯係性

同一組合內的不同元素間需有明確的對齊關係,其關係能夠清晰表達不同元素間的親密性。

1)元素間的居左對齊

當文案的字數偏多一些的場景下,居左對齊更符合用戶的閱讀習慣。

2)元素間的居中對齊

當內容信息較少、或由於對齊元素形狀等因素,居中對齊可能會帶來意外的收獲與效果。

3)界麵內的居右對齊

界麵內一般不會用居右對齊的方式來建立兩元素間的關係,但是界麵內會存在和屏幕建立右對齊關係的元素(稍微有點繞-.-),與屏幕右對齊的元素一般為主體的解釋說明以及輔助操作等。

一般情境下,當用戶閱讀完主要內容信息後,才會對操作類的功能有需求,如查看購買、關注、查看更多、進入下一頁麵等。

(2)統一性

另外,不同組建間也需要合理的建立對齊關係,同時為保持界麵的簡潔性,同一界麵內建立的對齊模式不要過多。

05 總結

界麵的結構是提升界麵品質感的關鍵,而合理的信息關係、字體、對齊方式能夠界麵的結構更加完整,精致。也希望每個設計師的作品都更加的美而精致。


本文網址:http://www.heimayibanjia.com/news/494.html

關鍵詞:山東網站優化,濟南網站優化,山東網站優化公司

最近瀏覽:

  • 在線客服
  • 聯係電話
    18615652552
  • 在線留言
  • 關注AG平台
  • 在線谘詢
    歡迎給AG平台留言
    請在此輸入留言內容,AG平台會盡快與您聯係。
    姓名
    聯係人
    電話
    座機/手機號碼
    郵箱
    郵箱
    地址
    地址