亚洲精品无码久久久久电影网,欧美日韩国产

搜索

APP

起點課堂會員權益

職業(yè)體系課特權

線下行業(yè)大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

創(chuàng)業(yè)公司設計師怎樣從0到1設計一款APP（四）——Hi-fi輸出（下篇）

閣主的叨叨

2017-03-25

0 評論 7791 瀏覽 65 收藏

9 分鐘

上篇文章提到，在Hi-fi階段大概可以分為前期、中期和后期三個階段。這篇文章就是對Hi-fi階段的詳細解說。

前期

前期的主要任務是hero screen（主功能頁面）的嘗試設計，通過它進行視覺風格上的確定。

APP進入視覺風格確定的時期，主要確定的內容包括顏色、字體、圖標三大塊。

1.顏色

確定的過程先做好心理準備，很大程度上會來回折騰，改來改去。著手點可以從產品點位出發(fā)，結合企業(yè)視覺系統(tǒng)進行統(tǒng)一形象設計。

如果企業(yè)有自己的logo和產品線，那視覺出發(fā)點可以在保持現有產品線的基礎上，進行APP個性定位。通俗點說，就是保持統(tǒng)一的前提下，有所區(qū)別。打個比方，Nike+系列的產品，有Nike+RunClub、Nike+Move、Nike+Training、Nike+，從整體上來看，他們都用統(tǒng)一的帶有運動感的熒光綠作為主色調，然后用黑白灰進行搭配。三者又有一定的區(qū)別，比如說Nike+RunClub的header是綠色，Nike+Training的header是黑色，前者更有活力運動感，戶外使用閱讀更方便，后者對室內體驗更友好。

如果沒有企業(yè)視覺系統(tǒng)，一切從0開始的話，建議從競品分析開始，市面上做得比較成功的產品進行分析，以及從自身產品特性和行業(yè)特性進行出發(fā)。比方說餐飲行業(yè)代表色是橙色，運動行業(yè)藍色，高科技領域不同色值的籃等等，也可以另辟蹊徑做出個性化的嘗試，比如keep的綠色與棕色的搭配方案。

在顏色這個領域分為代表色、輔助色、搭配方案這三方面的內容。一般配色方案是，一種彩色作為重要信息的突出色彩，配上不同深淺的黑白灰或者藍、棕色等無色彩或者色彩感比較弱的搭配方案。這樣的搭配方案，在信息呈現方面會比較清晰。

而在做設計方案中，還需要考慮的是，設計出不同底色的搭配方案，方便在不同場景的方案進行統(tǒng)一。如果說得更多的話，可以整理出一套APP的設計規(guī)范了，樓主以后再細說。

2.字體

字體可以分為標題、閱讀文字、注釋三大方面。這方面可以參考一下iOS的規(guī)范。但在實際工作中（非跨國大型企業(yè)），我們似乎沒有那么多的需求，主要分為Header Title、Button Text、Large、Regular、Small、Micro，分出這幾個種類出來，基本就夠用了。每種可以有4pt的差距。

同一個APP的字體種類不要太多，兩到三種是最合適的，一般突出的數字和字體會需要特別的字體去顯示，其他閱讀性的字體會用粗細不同的同一種字體進行統(tǒng)一。這樣，在設計方案上更加簡潔明了。（使用字體時，注意版權問題）

3.圖標

圖標在風格上分為色塊和線性兩種，同樣遵循統(tǒng)一原則，同一個APP圖標使用同一種風格。在大小上同字體一樣，做出幾個層級的規(guī)劃，保持icon尺寸也是固定的幾種。設計師在設計方案時沒有一種標準所在，程序員在實現頁面時也會覺得頁面很凌亂。當然這種統(tǒng)一工作放在最后做視覺規(guī)范整理的時候也可以做，提前做會減少后面的工作程序。

4.附加

在做Hi-fi的過程中，我們的目的是為了盡量做出用戶將來會接觸到的，真實的APP的頁面，所以，在APP里面的圖片同樣起著還原場景的作用。雖然從花瓣網、Pinterest、500px等網站可以找到大量的優(yōu)質的圖片，讓設計稿看起來逼格更高。但這種做法對APP本身設計來說，弊大于利，影響設計師對視覺本身的判斷。所以，支持在網上搜索現實生活中原場景圖。