旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > UI設(shè)計(jì)師如何把黃金比例運(yùn)用在APP中

UI設(shè)計(jì)師如何把黃金比例運(yùn)用在APP中

時(shí)間:2018-03-21來源:5wd995.cn點(diǎn)擊量:作者:馬晨皓
時(shí)間:2018-03-21點(diǎn)擊量:作者:馬晨皓

簡單地說,黃金比例是一個(gè)設(shè)計(jì)工具或法則,讓我們尋找在設(shè)計(jì)中的平衡。

下面我們看下自然界當(dāng)中一些美的東西。確實(shí)黃金比例的最佳演示。

下面舉2個(gè)例子來跟大家一起來學(xué)習(xí)一下如何應(yīng)用黃金比例工具來設(shè)計(jì)我們的APP界面。

第一個(gè)APP設(shè)計(jì)實(shí)戰(zhàn)案例: ASOS 存儲卡產(chǎn)品的 APP UI界面設(shè)計(jì)

該APP的第一個(gè)屏幕的查看照片和記錄行動(dòng)是可用的︰ 比如保存在收藏夾中,播放視頻和分享。

假如你想要篩選產(chǎn)品的尺寸大小、 顏色、 面料描述的信息,然后在添加到購物車這一個(gè)過程會感覺很不舒服。因此下圖左圖,想要”快速”查看的產(chǎn)品是非常困難的。

如果我們利用繪制”黃金矩形”的法則來優(yōu)化這個(gè)UI界面,稍微按照右圖那樣放置元素,即可讓整個(gè)APP UI界面的操作性大大的加強(qiáng)。

這種布局結(jié)構(gòu)的調(diào)整,使得盡可能在第一個(gè)屏幕上展顯出的最合適用戶的數(shù)據(jù)和信息。

這就是采用黃金比例來進(jìn)行APP設(shè)計(jì)的好處之一。

方便驗(yàn)證你的設(shè)計(jì)方案是否合理。

正如我們所看到的在”聚焦點(diǎn)”,我們還可以添加”保存到收藏夾” 這樣的按鈕和功能,在應(yīng)用程序中的關(guān)鍵行動(dòng)之一。而不是亂放,有根有據(jù)的放著新增的元素和功能。

元素必須放置在位于大拇指操作屏幕舒適內(nèi)的距離,也就是下圖當(dāng)中的最大弧線的到右下角的區(qū)域,所以用戶是很容易就可以用拇指按下與進(jìn)行操作的。

第二個(gè)APP設(shè)計(jì)實(shí)戰(zhàn)案例:一個(gè)博客APP的詳細(xì)頁的UI設(shè)計(jì)

我們把有相當(dāng)大的圖片和文本的分為兩個(gè)大區(qū)域。他們之間的比例應(yīng)該是黃金比例。

如下圖所示:

然后在圖片上,繼續(xù)采用黃金比例把相關(guān)的 點(diǎn)贊 和 評論的 按鈕放在圖片的右下角上。

今天就跟大家分享這二個(gè)APP設(shè)計(jì)實(shí)戰(zhàn)案例,就是想告訴大家可以通過黃金比例這個(gè)工具來布局我們的APP UI界面。設(shè)計(jì)出符合人性化的操作界面。

同時(shí),也告訴大家每一個(gè)APP設(shè)計(jì)元素的擺放、位置的移動(dòng)都是可以根據(jù)黃金比例來校驗(yàn)。

通過分享這2個(gè)APP設(shè)計(jì)案例,希望大家可以多思考下自己設(shè)計(jì)的作品,按鈕、小圖標(biāo)、圖片與文本內(nèi)容的是如何構(gòu)建這個(gè)界面的。


 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ 5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖