超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

如何拆解UI界面設(shè)計(jì)?試試這個(gè)三維分析法?。本┧{(lán)藍(lán)UI設(shè)計(jì)公司

2023-12-26    周周

 

一、概念分析

界面設(shè)計(jì)就是將一堆分散的元素、內(nèi)容或者組件,通過正確使用可視層次結(jié)構(gòu),進(jìn)行合理的規(guī)劃和重組,有目的地呈現(xiàn)在用戶的面前,這樣有助于內(nèi)容傳達(dá)和提升用戶使用效率,幫助用戶快速解決問題。

可視層次結(jié)構(gòu)(Visual Hierarchy)是指在視覺設(shè)計(jì)中,通過排列、大小、顏色、對(duì)比度等方法使設(shè)計(jì)元素在視覺上形成層次感,以引導(dǎo)用戶的注意力,幫助他們更好地獲取信息。在用戶界面設(shè)計(jì)、平面設(shè)計(jì)等領(lǐng)域,可視層次結(jié)構(gòu)起著非常重要的作用。

今天我們主要講 UI/UX 界面設(shè)計(jì)對(duì)可視層次結(jié)構(gòu)的應(yīng)用,美學(xué)的鑒定沒有統(tǒng)一的標(biāo)準(zhǔn),而視覺層次無疑是指導(dǎo)用戶體驗(yàn)、推動(dòng)設(shè)計(jì)標(biāo)準(zhǔn)以及設(shè)計(jì)落地的有效方法之一。

更多分析方法:

視覺層次主要是指表現(xiàn)層(視覺設(shè)計(jì))和框架層(界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、信息設(shè)計(jì))的內(nèi)容層次結(jié)構(gòu)。

 

而表現(xiàn)層和框架層的內(nèi)容具體如何設(shè)計(jì),就需要用到 UI 界面三維分析法。手機(jī)界面作為一個(gè)二維平面空間,在原有 X 軸、Y 軸的二維空間之外,設(shè)計(jì)師需要具備 Z 軸三維空間立體分布的設(shè)計(jì)思維。三維空間的概念可以幫助我們擴(kuò)展內(nèi)容的層級(jí)結(jié)構(gòu),也更有助于用戶對(duì)于信息的獲取。

 

這一設(shè)計(jì)思維的推進(jìn)和應(yīng)用,能夠使公司內(nèi)部復(fù)雜的、各個(gè)不同產(chǎn)品的設(shè)計(jì)做到百花齊放而又萬變不離其宗。能夠促進(jìn)公司級(jí)設(shè)計(jì)規(guī)范的統(tǒng)一。

二、概念拆解

界面好比是一個(gè)巨大的容器,巨大的容器中又會(huì)包含多個(gè)小容器,小容器中會(huì)包含顏色、圖片、文字、圖標(biāo)、按鈕、標(biāo)簽等等設(shè)計(jì)元素。每個(gè)小容器好比是一個(gè)功能,功能不同,設(shè)計(jì)元素在容器中的存在方式也會(huì)有所差異。因?yàn)椴町惖拇嬖?,就形成了不同行業(yè)以及同行業(yè)下不同產(chǎn)品的存在。核心業(yè)務(wù)不同,功能設(shè)計(jì)也不同,但是底層核心的設(shè)計(jì)邏輯相通。

三、三維設(shè)計(jì)方式具體分析

Z 軸內(nèi)容的設(shè)計(jì)主要包括以下三種方式,難度依次遞增:

  1. 通過文字、圖片和顏色的差異將要突出的內(nèi)容進(jìn)行重點(diǎn)設(shè)計(jì);
  2. 利用卡片、投影效果
  3. 通過層疊、3D touch 的方式擴(kuò)展頁面在 Z 軸的高度,增加 Z 軸高度的利用率;

1. 文字、圖片和顏色的設(shè)計(jì)

①文字的設(shè)計(jì)包括字號(hào)大小、字重、文字顏色,通常情況下三者會(huì)結(jié)合使用

②圖片設(shè)計(jì)包括 icon、產(chǎn)品圖片

利用圖標(biāo)大小不同形成在 Z 軸方向的設(shè)計(jì)比重差異,常用功能重點(diǎn)突出,方便用戶快速找到所需的功能入口。

③顏色設(shè)計(jì)包括顏色對(duì)比、漸變、主題色應(yīng)用等

利用顏色不同形成視覺設(shè)計(jì)在 Z 軸方向的設(shè)計(jì)比重差異,加強(qiáng)引導(dǎo),方便用戶快速做出決策。

 

2. 卡片、投影效果

①卡片

大卡片設(shè)計(jì)是近幾年最主流的設(shè)計(jì)方式之一。它能夠更好的聚合各類信息,有利于不同內(nèi)容的清晰展現(xiàn),用戶使用產(chǎn)品時(shí)注意力也會(huì)更加集中,受到了設(shè)計(jì)師廣泛的喜愛和追捧。

 

網(wǎng)易云音樂和高德地圖的 UI 界面在設(shè)計(jì)時(shí)均融入了大卡片。

②投影

投影是指圖形的影子投到一個(gè)面或一條線上。是最簡單、最直觀的在 Z 軸上設(shè)計(jì)的方式。

 

UC 網(wǎng)盤,為了引導(dǎo)用戶將圖片、文件、視頻等資料備份到 UC 網(wǎng)盤,提升用戶的粘性,“+”按鈕利用陰影效果,提升在 Z 軸方向的高度,吸引用戶的點(diǎn)擊。

3. 層疊、3D touch 設(shè)計(jì)

①層疊

層疊,意思是層層重疊。在 UI 界面中,即多個(gè)界面同時(shí)重疊在一起來解決用戶的某個(gè)需求。iPhone 手機(jī)中地圖新指南添加,QQ 音樂中播放器常駐在頁面底部均是利用層疊的設(shè)計(jì)思路對(duì)功能做出設(shè)計(jì),避免操作層級(jí)太深,提升用戶的使用體驗(yàn)。

 

②3D touch 設(shè)計(jì)

3D Touch 是一種立體觸控技術(shù),用力按一個(gè)圖標(biāo),或者一行內(nèi)容,會(huì)彈出一層半透明菜單,里面包含了該應(yīng)用下的一些快捷操作。同樣也是對(duì) Z 軸空間的近一步應(yīng)用,對(duì)復(fù)雜系統(tǒng)下效率的提升有明顯的改善。

 

到這里,我們就介紹完界面在 Z 軸層級(jí)上的設(shè)計(jì),做設(shè)計(jì)時(shí)要從全局出發(fā),綜合考慮頁面整體的功能。清楚底層的空間布局、適應(yīng)方式、擴(kuò)展手段和疊加邏輯,再復(fù)雜的界面無非就是規(guī)則的嵌套和內(nèi)容的排布,希望這篇文章能對(duì)大家有所幫助。

 

文章來源:優(yōu)設(shè)網(wǎng)    作者:西城門設(shè)計(jì)

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)(m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔