注冊 | 登陸
您的位置:阿里西西 > 前端技術 > 手機APP前端設計 > 詳細內容

如何進行APP按鈕設計與排版的設計規范知識

  稿源:本站整理   2018-09-15   點擊:   撤稿糾錯
APP界面設計中版式設計的形式美規律與法則和APP設計小技巧:如何進行APP按鈕設計與排版,
阿里西西小編給您推薦這個如何進行APP按鈕設計與排版的設計規范知識,這里還有關于APP 按鈕 排版 設計規范 的教程,希望您能夠喜歡并學到東西提升自己的知識與技能,下面是內容詳細閱讀:

一、軸

軸在UI設計中是最基本、最常見的概念,也是用來組織界面結構的重要核心。簡單說來,軸是在設計的時候組織一系列元素的假象線,在下面的設計圖中,軸以虛線的方式被標注出來。如下圖:

payment

1、對齊

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

2、強化

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

從產品設計的角度上來看,Twitter 的時間線設計就是一個很好的案例,左側的頭像和右側的推文共同塑造出縫隙中軸線的感覺。

讓你喜歡的APP界面設計是咋樣的呢

3、運動

當我們碰到某先線條的時候,視覺會很自然地沿著這些方向運動,就如同我們站在街上,會自覺地沿著街道的兩頭走動。兩個端點決定了線,界定了開始和結束的地方,線,或者說軸線的存在會引導和提示運動的方向。

SoundCloud中,音軌沿著一條既定的水平軸線運動,隨著音樂的播放,音軌自然地自左向右勻速運動。

4、連續性

如果終點是不確定的,那么你通常會沿著軸線的方向瀏覽/運動,直到你找到感興趣的東西,或者感到厭倦并關閉應用。在建筑學中,未清楚界定的終點非常少見,因為建筑的修建通常沒法永遠持續下去,但是UI設計則不一樣,無限地滾動下去是無比受歡迎的設計手法。

追波網推薦的APP3

花瓣網的APP中就是這樣做的,持續不斷的圖片沿著中軸線的方向持續不斷地滾動下去,只要你有興趣一直觀看下去。

二、對稱

當元素被均勻地放置在軸線的兩側之時,他們構成了對稱的關系。當元素被精準地在軸線兩側一一對應之時,它們就形成了完美對稱。

14032141

1、平衡

對稱令整個設計更加平衡。當元素與控件在軸線兩側處于相同位置之時,會給人以協調和諧的設計感。當我們在規劃街道兩側的房屋建設的時候,如果左右兩側都是5間大小一致的房子,當你走在街上的時候這種平衡的設計會令人非常舒適,這是平衡給人的感受。

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

更美的APP界面設計欣賞2

2、不對稱

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

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

三、層級

當某個元素出現在比其他元素更重要的位置的時候,層級就出現了。

1、尺寸

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

通過尺寸來區分文章列表層級的典型就是稍后讀應用Pocket。頂部的輪播文章擁有更大的圖片,它的位置和尺寸會令我們一眼注意到。

iphone 6設計尺寸規范

2、形狀

如果一個控件在形狀和形態上同其他的不一樣,也可以讓它獨立出一個層級。不規則的設計同樣會令人側目。建筑物的正面擁有五個相同的窗戶和一閃大門,你會立刻注意到門的獨特之處。

在Instagram的個人信息頁中,圓形的個人頭像在方形的圖片中別具一格,非常抓人眼球。它會讓人意識到,這個獨特的東西,更為重要。

數據統計APP展示形式

3、位置

位置的存在同樣能彰顯層級的不一樣。在圓圈之內,中心位置的東西比邊緣部分的看起來更重要。位于軸線頂端的控件會顯得比其他部分的優先級更高。

以設計應用Path的設計為例,時間軸頂點處的用戶頭像就明顯比時間軸上的其他部分更重要,而這個地方正好展示的也是用戶頭像。

四、韻律

UI設計和建筑設計同樣有著韻律之美,重復的模式會營造出獨特的節奏之美。

1、模式

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

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

APP設計模板資源

2、間斷

當節奏被間隔打斷的時候,會形成不同的層級。聽歌的時候,均勻的節奏被其他的音樂元素打斷的時候,你會意識到這是比較特別的部分。

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

如何進行APP按鈕設計與排版的設計規范知識文章就講到這里,歡迎瀏覽本站的其它內容,點擊這里返回首頁

更多關于 APP 按鈕 排版 設計規范 的文章
相關閱讀

相關排行總榜

網頁教程

網站運營

特效排行

教你如何使用js+CSS寫出類似FLASH動畫的網
一款CSS3制作的帶尖角的按鈕實例代碼
目前主流瀏覽器對于HTML5與CSS3的支持情況
全面剖析前端Ajax技術原理及知識
分享一個HTML5 + JavaScript實現Flash動畫
用PHOTOSHOP把美女頭畫像制作成漂亮的仿手
淘寶網及新浪網等幾大官方IP查詢API接口地
用Photoshop制作淘寶大促雙十一電商促銷宣
用HTML5+css3制作HTML5驗證的網頁表單
通過html5代碼實現在網頁中插入和播放mp4
如何讓您的微信公眾號內容快速增加閱讀量
網站用戶界面設計(網頁設計)命名規范
分享一些企業微信營銷推廣的技巧與經驗
可以借鑒和學習的小米模式4大經驗要素
SEO優化中網站title標題優化總結及經驗分
為什么說建站要從網站用戶忠誠度著手,知
一個優秀的SEM進行百度搜索推廣賬號架構經
談談從了解用戶開始互聯網推廣的營銷策略
談談新手運營網站如何做好網站的廣告位投
清理您網站上的黑鏈的幾個招數
JS制作循環上下左右平移轉圈的圖層特效
原生js寫的貪食蛇網頁版小游戲特效代碼,
用CSS3實現的addidas阿迪達斯標志LOGO特效
HTML5打造的酷炫3D 360度圖片立體瀏覽特效
通用canvas代碼實現的JS畫圓圈動畫特效代
通過HTML5+SVG制作奔跑的小馬駒動畫特效
jquery實現拖拽進度條并顯示百分比的特效
用HTML5+canvas代碼繪制的星空月亮圖案特
簡單實用的純CSS實現的橫向多級導航特效代
原生JS寫的一個書架式的圖片縮放滾動展示
彩票25选5开奖结果