中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

UI設(shè)計(jì)的基本原則

2022-06-17    分類: 網(wǎng)站建設(shè)

設(shè)計(jì)最有趣的地方在于它的通用性,不論是音樂(lè)、建筑還是工業(yè),設(shè)計(jì)的規(guī)則大同小異。

轉(zhuǎn)載一紐約妹子Melissa做的分享:總結(jié)了從建筑到產(chǎn)品UI設(shè)計(jì)的基本原則。

一、軸

軸在UI設(shè)計(jì)中是最基本、最常見的概念,也是用來(lái)組織界面結(jié)構(gòu)的重要核心。簡(jiǎn)單說(shuō)來(lái),軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線,在下面的設(shè)計(jì)圖中,軸以虛線的方式被標(biāo)注出來(lái)。

1、對(duì)齊

軸最常見于對(duì)稱元素的使用,當(dāng)元素被布置成軸對(duì)稱的布局的時(shí)候,會(huì)給人有序感。就像生活中絕大多數(shù)的事情一樣,我們更傾向于享受有序的的東西,它們令人感覺(jué)平穩(wěn)、舒適、平易近人。最簡(jiǎn)單的一個(gè)例子就是iTunes 程序中的專輯列表的設(shè)計(jì),所有的專輯列表在界面的左側(cè)保持對(duì)齊,圍繞虛線軸軸對(duì)稱。

2、強(qiáng)化

雖然軸是一條假想的線,但是如果周圍的元素的邊緣控制得足夠整齊,這跳線會(huì)在視覺(jué)中變得更加“明顯”的。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸,如果一邊有建筑一邊沒(méi)有,那么這種軸線的感覺(jué)不會(huì)那么強(qiáng)烈。

從產(chǎn)品設(shè)計(jì)的角度上來(lái)看,Twitter 的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例,左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺(jué)。

3、運(yùn)動(dòng)

當(dāng)我們碰到某先線條的時(shí)候,視覺(jué)會(huì)很自然地沿著這些方向運(yùn)動(dòng),就如同我們站在街上,會(huì)自覺(jué)地沿著街道的兩頭走動(dòng)。兩個(gè)端點(diǎn)決定了線,界定了開始和結(jié)束的地方,線,或者說(shuō)軸線的存在會(huì)引導(dǎo)和提示運(yùn)動(dòng)的方向。

SoundCloud中,音軌沿著一條既定的水平軸線運(yùn)動(dòng),隨著音樂(lè)的播放,音軌自然地自左向右勻速運(yùn)動(dòng)。

4、連續(xù)性

如果終點(diǎn)是不確定的,那么你通常會(huì)沿著軸線的方向?yàn)g覽/運(yùn)動(dòng),直到你找到感興趣的東西,或者感到厭倦并關(guān)閉應(yīng)用。在建筑學(xué)中,未清楚界定的終點(diǎn)非常少見,因?yàn)榻ㄖ男藿ㄍǔ](méi)法永遠(yuǎn)持續(xù)下去,但是UI設(shè)計(jì)則不一樣,無(wú)限地滾動(dòng)下去是無(wú)比受歡迎的設(shè)計(jì)手法。

Pinterest的APP中就是這樣做的,持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動(dòng)下去,只要你有興趣一直觀看下去。

二、對(duì)稱

當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí),他們構(gòu)成了對(duì)稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí),它們就形成了好對(duì)稱。

1、平衡

對(duì)稱令整個(gè)設(shè)計(jì)更加平衡。當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí),會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。當(dāng)我們?cè)谝?guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候,如果左右兩側(cè)都是5間大小一致的房子,當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會(huì)令人非常舒適,這是平衡給人的感受。

Rdio的APP設(shè)計(jì)就遵循著這樣的設(shè)計(jì)規(guī)則,屏幕兩側(cè)的控件是相同的規(guī)格,這類布局很適宜閱讀,用戶會(huì)自覺(jué)地自上到下,從左向右查看。

2、不對(duì)稱

如果軸線兩側(cè)的控件布置不再是一一對(duì)應(yīng)尺寸相近,那就是不對(duì)稱的設(shè)計(jì)。不對(duì)稱的設(shè)計(jì)會(huì)給人明顯的失衡感,可能會(huì)令人不舒服,但是也能造就殘缺美,當(dāng)然這要看你具體怎么做。

雖然Pinteret 的APP設(shè)計(jì)在整體上是沿著中軸線對(duì)稱的(寬度一致),但是兩邊的界面控件并非是對(duì)稱的,它們的高度并不一致,位置也是錯(cuò)落的。稍微一點(diǎn)的落差都會(huì)被眼睛捕捉到,而這樣的差異讓用戶無(wú)法準(zhǔn)確地左右順序閱讀。不對(duì)稱設(shè)計(jì)打破了設(shè)計(jì)的平衡性和舒適性,但是也可以緩解了規(guī)律性設(shè)計(jì)帶來(lái)的視覺(jué)疲勞。

三、層級(jí)

當(dāng)某個(gè)元素出現(xiàn)在比其他元素更重要的位置的時(shí)候,層級(jí)就出現(xiàn)了。

1、尺寸

如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大,就會(huì)區(qū)分出層級(jí)。毫無(wú)疑問(wèn),我們查看某個(gè)設(shè)計(jì)的時(shí)候,通常會(huì)被大的元素吸引到。如果一個(gè)建筑物有5個(gè)出窗戶,其中一個(gè)是其他四個(gè)的兩倍大,我們的注意力自然而然會(huì)被吸引過(guò)去。

通過(guò)尺寸來(lái)區(qū)分文章列表層級(jí)的典型就是稍后讀應(yīng)用Pocket。頂部的輪播文章?lián)碛懈蟮膱D片,它的位置和尺寸會(huì)令我們一眼注意到。

2、形狀

如果一個(gè)控件在形狀和形態(tài)上同其他的不一樣,也可以讓它獨(dú)立出一個(gè)層級(jí)。不規(guī)則的設(shè)計(jì)同樣會(huì)令人側(cè)目。建筑物的正面擁有五個(gè)相同的窗戶和一閃大門,你會(huì)立刻注意到門的獨(dú)特之處。

在Instagram的個(gè)人信息頁(yè)中,圓形的個(gè)人頭像在方形的圖片中別具一格,非常抓人眼球。它會(huì)讓人意識(shí)到,這個(gè)獨(dú)特的東西,更為重要。

3、位置

位置的存在同樣能彰顯層級(jí)的不一樣。在圓圈之內(nèi),中心位置的東西比邊緣部分的看起來(lái)更重要。位于軸線頂端的控件會(huì)顯得比其他部分的優(yōu)先級(jí)更高。

以設(shè)計(jì)應(yīng)用Path的設(shè)計(jì)為例,時(shí)間軸頂點(diǎn)處的用戶頭像就明顯比時(shí)間軸上的其他部分更重要,而這個(gè)地方正好展示的也是用戶頭像。

四、韻律

UI設(shè)計(jì)和建筑設(shè)計(jì)同樣有著韻律之美,重復(fù)的模式會(huì)營(yíng)造出獨(dú)特的節(jié)奏之美。

1、模式


理解韻律最直接的方式就是聽歌。音樂(lè)擁有節(jié)奏感,絕大多數(shù)的音樂(lè)遵循著相同的節(jié)拍,節(jié)拍就是音樂(lè)模式的一部分。

這方面最典型的APP是Airbnb,APP列表中每一間房子都占據(jù)一個(gè)模塊,模塊中有著大小相同的圖片,價(jià)格、位置和房東信息和圖片的相對(duì)位置一定,且排版勻稱舒服,兩個(gè)模塊之間的間距也相同,當(dāng)你瀏覽的時(shí)候,熟悉的節(jié)奏會(huì)讓你清楚地知道上哪看關(guān)鍵信息。

2、間斷


當(dāng)節(jié)奏被間隔打斷的時(shí)候,會(huì)形成不同的層級(jí)。聽歌的時(shí)候,均勻的節(jié)奏被其他的音樂(lè)元素打斷的時(shí)候,你會(huì)意識(shí)到這是比較特別的部分。

在Twitter的APP中,推文和推文保持著相同的樣式,均勻的節(jié)奏,但是其中的“推薦用戶”一項(xiàng)有著不同的樣式,它插入到推文列表中,打破了整個(gè)信息流的節(jié)奏,凸顯出不同的層級(jí),會(huì)很快抓住你的注意力。

理念上的規(guī)范有

  1. 形式追隨功能—路易斯·沙利文
  2. 這里的功能不僅包括用戶需求,還包括產(chǎn)品需求、業(yè)務(wù)需求。
  3. less is more—米斯·凡·德羅
  4. 把主要精力放到最核心的需求上
  5. 存在即合理—黑格爾
  6. 頁(yè)面上的每一個(gè)元素的存在都可以解釋,不要無(wú)緣無(wú)故增減元素

可用性規(guī)范——尼爾森十大可用性原則

一、狀態(tài)可見原則

用戶在網(wǎng)頁(yè)上的任何操作,不論是單擊、滾動(dòng)還是按下鍵盤,頁(yè)面應(yīng)即時(shí)給出反饋?!凹磿r(shí)”是指,頁(yè)面響應(yīng)時(shí)間小于用戶能忍受的等待時(shí)間。

二、環(huán)境貼切原則

網(wǎng)頁(yè)的一切表現(xiàn)和表述,應(yīng)該盡可能貼近用戶所在的環(huán)境(年齡、學(xué)歷、文化、時(shí)代背景),而不要使用第二世界的語(yǔ)言?!秈Phone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外,還應(yīng)該使用易懂和約定俗成的表達(dá)。

三、撤銷重做原則

為了避免用戶的誤用和誤擊,網(wǎng)頁(yè)應(yīng)提供撤銷和重做功能。

四、一致性原則

同一用語(yǔ)、功能、操作保持一致。

五、防錯(cuò)原則

通過(guò)網(wǎng)頁(yè)的設(shè)計(jì)、重組或特別安排,防止用戶出錯(cuò)。

六、易取原則

好記性不如爛筆頭。盡可能減少用戶回憶負(fù)擔(dān),把需要記憶的內(nèi)容擺上臺(tái)面。

七、靈活高效原則

中級(jí)用戶的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶數(shù)。為大多數(shù)用戶設(shè)計(jì),不要低估,也不可輕視,保持靈活高效。

八、易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的動(dòng)作不是讀,不是看,而是掃。易掃,意味著突出重點(diǎn),弱化和剔除無(wú)關(guān)信息。

九、容錯(cuò)原則

幫助用戶從錯(cuò)誤中恢復(fù),將損失降到最低。如果無(wú)法自動(dòng)挽回,則提供詳盡的說(shuō)明文字和指導(dǎo)方向,而非代碼,比如404。

十、人性化幫助原則

幫助性提示最好的方式是:1、無(wú)需提示;2、一次性提示;3、常駐提示;4;幫助文檔。

界面排版規(guī)范——《格式塔原理》

相似原則

“有相似特征元素比沒(méi)有相似特征的元素被認(rèn)為更為緊密相關(guān)”

接近原則

“更接近一起的對(duì)象比進(jìn)一步分開的對(duì)象被認(rèn)為更相關(guān)?!?/p>

連續(xù)定律

“在直線上或者曲線上的元素比不在直線或者曲線上的元素被認(rèn)為更相關(guān)?!?/p>

對(duì)稱原則

“人們往往傾向于感知圍繞勻稱物體的中心對(duì)稱的形狀?!?/p>

閉合性原則

  1. “當(dāng)我們看到一些復(fù)雜排列的元素時(shí),我們趨向于尋找一個(gè)更為單一可辨識(shí)的圖案模式?!?
  2. 共同命運(yùn)原則 “在同一方向上的元素比固定元素或者是朝不同方向移動(dòng)的元素更為緊密相關(guān)?!?
  3. 主體與背景原則 “我們的大腦將視覺(jué)區(qū)域分為主體和背景,主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素,其余則是背景?!?

配色原則

協(xié)調(diào)配色

  • 色相一致
  • 明度一致
  • 純度一致

強(qiáng)調(diào)配色

  • 色相對(duì)比
  • 明度對(duì)比
  • 純度對(duì)比

設(shè)計(jì)規(guī)范輸出

  • 多屏適配規(guī)范
  • 字體規(guī)范
  • 用色規(guī)范
  • 布局規(guī)范
  • 圖標(biāo)控件規(guī)范
  • 提示反饋規(guī)范
  • 動(dòng)效規(guī)范

本文標(biāo)題:UI設(shè)計(jì)的基本原則
標(biāo)題路徑:http://m.rwnh.cn/news44/168394.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、域名注冊(cè)、虛擬主機(jī)企業(yè)建站網(wǎng)站維護(hù)、App開發(fā)

廣告

聲明:本網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化
原平市| 昌黎县| 金山区| 温宿县| 扶绥县| 涞源县| 开江县| 蓬莱市| 县级市| 民勤县| 阿图什市| 阿鲁科尔沁旗| 修文县| 敖汉旗| 苏尼特右旗| 简阳市| 色达县| 鄂托克前旗| 原平市| 张北县| 兴业县| 烟台市| 苍溪县| 丽水市| 镇宁| 建阳市| 上栗县| 都安| 马龙县| 乌苏市| 拉萨市| 东阿县| 闽清县| 东丽区| 景东| 池州市| 霍州市| 齐河县| 双辽市| 金昌市| 鹤壁市|