"黃金比例"是非常重要的設(shè)計知識點。在我們?nèi)粘I町斨须S處可見。應(yīng)用在家居、 電器、 徽標和照片上。而今天25學(xué)堂不想寫關(guān)于它很多方面的應(yīng)用和解讀,你可以在維基百科中或者書籍當中去詳細的了解黃金比例。
我們的意識趨于和諧與美,和"黃金比例"是優(yōu)雅的方式,使產(chǎn)品更舒適和很好的感知。
簡單地說,黃金比例是一個設(shè)計工具或法則,讓我們尋找在設(shè)計中的平衡。
之前25學(xué)堂也發(fā)布了一篇關(guān)于logo設(shè)計當中的黃金比例。如:Logo設(shè)計干貨:怎樣使用黃金比例去繪制LOGO圖形
下面我們看下自然界當中一些美的東西。確實黃金比例的最佳演示。
作為專業(yè)的APP設(shè)計網(wǎng)站,下面25學(xué)堂舉2個例子來跟大家一起來學(xué)習(xí)一下如何應(yīng)用黃金比例工具來設(shè)計我們的APP界面。
第一個APP設(shè)計實戰(zhàn)案例:?ASOS 存儲卡產(chǎn)品的 APP UI界面設(shè)計
該APP的第一個屏幕的查看照片和記錄行動是可用的︰ 比如保存在收藏夾中,播放視頻和分享。
假如你想要篩選產(chǎn)品的尺寸大小、 顏色、 面料描述的信息,然后在添加到購物車這一個過程會感覺很不舒服。因此下圖左圖,想要"快速"查看的產(chǎn)品是非常困難的。
如果我們利用繪制"黃金矩形"的法則來優(yōu)化這個UI界面,稍微按照右圖那樣放置元素,即可讓整個APP UI界面的操作性大大的加強。
這種布局結(jié)構(gòu)的調(diào)整,使得盡可能在第一個屏幕上展顯出的最合適用戶的數(shù)據(jù)和信息。
這就是采用黃金比例來進行APP設(shè)計的好處之一。
? 方便驗證你的設(shè)計方案是否合理。
正如我們所看到的在"聚焦點",我們還可以添加"保存到收藏夾" 這樣的按鈕和功能,在應(yīng)用程序中的關(guān)鍵行動之一。而不是亂放,有根有據(jù)的放著新增的元素和功能。
元素必須放置在位于大拇指操作屏幕舒適內(nèi)的距離,也就是下圖當中的最大弧線的到右下角的區(qū)域,所以用戶是很容易就可以用拇指按下與進行操作的。
第二個APP設(shè)計實戰(zhàn)案例:一個博客APP的詳細頁的UI設(shè)計
我們把有相當大的圖片和文本的分為兩個大區(qū)域。他們之間的比例應(yīng)該是黃金比例。
如下圖所示:
然后在圖片上,繼續(xù)采用黃金比例把相關(guān)的 點贊 和 評論的 按鈕放在圖片的右下角上。
今天25學(xué)堂跟大家分享這二個APP設(shè)計實戰(zhàn)案例,就是想告訴大家可以通過黃金比例這個工具來布局我們的APP UI界面。設(shè)計出符合人性化的操作界面。
同時,也告訴大家每一個APP設(shè)計元素的擺放、位置的移動都是可以根據(jù)黃金比例來校驗。
通過分享這2個APP設(shè)計案例,希望大家可以多思考下自己設(shè)計的作品,按鈕、小圖標、圖片與文本內(nèi)容的是如何構(gòu)建這個界面的。
希望大家有所收獲。
全站高品質(zhì)素材免費下載!