如何將黃金比例應用在APP設計中
如何將黃金比例應用在APP設計中-移動閱讀二維碼

黃金比例是自然界中完美的比例,它也是非常重要的設計知識點。在我們日常生活當中隨處可見。應用在家居、 電器、 徽標和照片上。我們的意識趨于和諧與美,和”黃金比例”是優雅的方式,使產品更舒適和很好的感知。

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

下面我們看下自然界當中一些美的東西。確實黃金比例的最佳演示。

下面舉2個例子來跟大家一起來學習一下如何應用黃金比例工具來設計我們的APP界面。

第一個APP設計實戰案例: ASOS 存儲卡產品的 APP UI界面設計

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

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

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

這種布局結構的調整,使得盡可能在第一個屏幕上展顯出的最合適用戶的數據和信息。

這就是采用黃金比例來進行APP設計的好處之一。

方便驗證你的設計方案是否合理。

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

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

第二個APP設計實戰案例:一個博客APP的詳細頁的UI設計

我們把有相當大的圖片和文本的分為兩個大區域。他們之間的比例應該是黃金比例。

如下圖所示:

然后在圖片上,繼續采用黃金比例把相關的 點贊 和 評論的 按鈕放在圖片的右下角上。

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

同時,也告訴大家每一個APP設計元素的擺放、位置的移動都是可以根據黃金比例來校驗。

通過分享這2個APP設計案例,希望大家可以多思考下自己設計的作品,按鈕、小圖標、圖片與文本內容的是如何構建這個界面的。

相關專題:《黃金比例在設計中的運用

以上由絲路教育http://www.silucg.com?bp整理提供。希望大家有所收獲。

本文鏈接:http://www.casaleticia.com/golden-ratio-used-in-app-ui-design.html
本文標簽: , , , ,