系列|一款APP設計的從0到1:界面設計篇

5 評論 23764 瀏覽 184 收藏 8 分鐘

《一款APP設計的從0到1》這是一篇系列文章干貨,上次U妹講的是關于APP項目立項和預估時間篇,今天U妹來說一下,APP界面設計和iPad界面設計規范。

這次U妹接著上次的茬繼續,繼續之前先來看看整個目錄(滿滿的干貨)

U妹列了一個小小的目錄:

一、項目立項(點擊查看)

二、項目預估時間(點擊查看)

三、界面設計

四、切圖標注

五、視覺還原

六、上線準備

界面設計篇

我是一名UI設計師,所以U妹這里說的都是從設計師的角度去闡述一款APP從無到有的一個過程中,設計師應該干的事。

目前在行業里,關于APP界面設計規范也是層次不齊,很多都還停留在6的設備和ios 9的系統之上,而現在最新的是iphone 7和 iOS 10了(更新換代真的很快),我這里說的是最新的iOS 界面設計規范(Android設計規范,我們下次見)

一、關于設計工具

俗話說:工欲善其事必先利其器,好的工具可以讓我們的工作效率更高,做界面設計我們用的最多的就是PS和AI了,如果你是Mac用戶,可以嘗試一下sketch,軟件的版本當然是推薦高版本,因為功能更強大,作圖的速度也就更快。

我個人剛接觸ps是從8.0開始,8.0 – CS4 – CS 5 – CS 6 – CC – CC 2014 – CC 2015,一直到現在的最新的CC 2017,深刻體會,新的版本更好用。也可以根據個人習慣,選擇自己順手的工具就好。

二、設計稿尺寸

在看設計稿尺寸之前,我們先來了解一下APP界面設計構成:

界面構成由:布局層、圖文排版層和圖標層。

在iPhone 6還沒出的時候,都是用640×1136 px來做設計稿的,自從6的發布,所有的設計稿尺寸以750×1334 px來做設計稿尺寸

U妹再帶大家來看看,到目前為止所有iPhone的尺寸(1-3代就不用考慮了):

iPhone界面設計規范:

iPhone 界面尺寸:

以750x1334px作為設計稿標準尺寸的原由:

  1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小,最方便適配。
  2. 大屏幕時代依然以小尺寸作為設計尺寸,會限制設計師的設計視角。
  3. 設計安卓版本時只需做最小的設計調整,提升設計效率。

所以做設計稿事請以750x1334px來做設計稿

在文檔建立參考線是一個很好的習慣,我希望大家也可以養成這個習慣,上下很容易設置,左右我習慣設置24 px的距離,我通過對國內外很多APP就行了對比,總結是24 px更合理,這個是我的個人習慣,所以也不要當做是明文規則,你設置為30 px,也是可以的。

然后就可以開始你的設計了

這里U妹再給大家略過一下iPad的設計規范:

三、圖標設計

iPhone 圖標尺寸:

圖標設計請用柵格化系統進行設計

設計尺寸:1024x1024px,竟可能的采用黃金比例設計

四、關于設計字體

先來看一下字體的歷史演變過程

iOS 9:英文字體為Helvetica Neue

iOS 9:中文字體由為冬青黑

↓↓↓

iOS 10:英文字體為San Francisco

iOS 10:中文字體為蘋方

關于字體大小的問題:

頂部操作欄文字大小 ? ? ?34-38px

標題文字大小 ? ? ? ? ? ? ? ?28-34px

正文文字大小 ? ? ? ? ? ? ? ?26-30px

輔助性文字大小 ? ? ? ? ? ? 20-24px

Tab bar文字大小 ? ? ? ? ? 20px

文字大小只是一個范圍,這要根據設計的視覺效果來決定,不要死記硬背,但是切記,字體大小要用偶數。

關于界面設計就說到這里了,好的工作方法才能讓自己事半功倍,你覺得對自己有幫助,那可以借鑒學習我的方法,在具體工作中也要靈活應用,有不足之處或問題也可給U妹留言,下期U妹帶你一起來看看界面切圖標注,我們下期再見!

相關閱讀

系列|一款APP設計的從0到1:項目立項篇

系列|一款APP設計的從0到1:項目預估時間篇

 

作者:U妹,一個不要命的UI設計師,等你,來撩妹喲。微信公眾號“UI妹兒”(ID:UIfaner)

本文由 @U妹 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你好呀 那安卓的截圖是要切幾份哦

    來自四川 回復
  2. 不錯

    來自浙江 回復
  3. mark

    回復
  4. bb

    回復