亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國(guó)推薦設(shè)計(jì)師 (詳情)
//百度統(tǒng)計(jì) 20220402 uicn

您的意見是我們 UI 中國(guó)進(jìn)步的動(dòng)力!
點(diǎn)擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入U(xiǎn)I中國(guó)官方反饋群進(jìn)行反饋!
群號(hào):302892100
備注:反饋問題后@管理員能讓我們及時(shí)了解您的意見

提交需求

賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!

0/20
0/200

設(shè)計(jì)大賽

  • 設(shè)計(jì)大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對(duì)UI中國(guó)的支持和信賴!

設(shè)計(jì)有哪些規(guī)范?可能很多小伙伴都在工作中思考過這個(gè)問題,現(xiàn)在作者總結(jié)了一些UI的設(shè)計(jì)規(guī)范,給大家做個(gè)參考。

一、軸

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

1、對(duì)齊

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

 2、強(qiáng)化

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

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

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

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

  SoundCloud中,音軌沿著一條既定的水平軸線運(yùn)動(dòng),隨著音樂的播放,音軌自然地自左向右勻速運(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)榻ㄖ男藿ㄍǔ]法永遠(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ì)自覺地自上到下,從左向右查看。

  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ì)帶來的視覺疲勞。


 三、層級(jí)

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

 1、尺寸

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

  通過尺寸來區(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),中心位置的東西比邊緣部分的看起來更重要。位于軸線頂端的控件會(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、模式

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

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

2、間斷

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

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


  • 此刻團(tuán)隊(duì)作品欣賞:
  • 此刻:http://app.mi.com/detail/71840 
  • 那刻音樂:https://itunes.apple.com/cn/app/na-ke-yin-le/id1115519645?l=en&mt=8


更新:2016-07-15

收藏

302人已收藏

此刻產(chǎn)品設(shè)計(jì)中心劉剛

目前正在找工作,需要UI設(shè)計(jì)師的請(qǐng)加我微信

  • 64

    作品

  • 1076

    粉絲

  • 72

    關(guān)注

  • APP設(shè)計(jì)思路
  • 加油站-ipad
  • 設(shè)計(jì)規(guī)范
  • 自定義配置
相關(guān)標(biāo)簽
設(shè)計(jì)分享經(jīng)驗(yàn)

    猜你喜歡

      UI設(shè)計(jì)有哪些規(guī)范?

      0.0°

      你確定要舉報(bào)UI設(shè)計(jì)有哪些規(guī)范??

      如果查出惡意舉報(bào),十天內(nèi)禁止提交任何舉報(bào)申請(qǐng)。

      0/200

      上傳證據(jù): 超過10M的附件請(qǐng)使用網(wǎng)盤地址

      點(diǎn)擊上傳附件

      對(duì)誰(shuí)可見:

      全部設(shè)計(jì)師
      • 全部設(shè)計(jì)師
      • 推薦設(shè)計(jì)師和認(rèn)證設(shè)計(jì)師

      您確認(rèn)要推薦?

      該作品發(fā)布時(shí)間:2016年07月08日

      評(píng)分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      145
      302
      10

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      登錄

      手機(jī)號(hào)

      發(fā)送驗(yàn)證碼 120s 驗(yàn)證碼錯(cuò)誤

      登錄
      第三方賬號(hào)登錄