一款APP的開發設計是如何從0到1一步一步設計的


 

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

 

一、關於設計工具

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

二、設計稿尺寸

 

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

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

 

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

iPhone界面設計規范:

iPhone 界面尺寸:

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

 

1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小,最方便適配。

 

2. 大屏幕時代依然以小尺寸作為設計尺寸,會限制設計師的設計視角。 

 

3. 設計安卓版本時只需做最小的設計調整,提升設計效率。

 

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

 

 

 

 

 

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

 

 

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

 

四、關於設計字體

 

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

 

iOS 9:英文字體為Helvetica Neue

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

↓↓↓

iOS 10:英文字體為San Francisco

iOS 10:中文字體為蘋方

 

 

關於字體大小的問題:

 

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

標題文字大小                28-34px

正文文字大小                26-30px

輔助性文字大小             20-24px

Tab bar文字大小           20px

 

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

 

關於界面設計就說到這里了,好的工作方法才能讓自己事半功倍,你覺得對自己有幫助,那可以借鑒學習我的方法,在具體工作中也要靈活應用。

或者您有開發APP或者APP UI設計需求可以聯系常州開發APP公司http://www.66dianzan.com/a/about/ 點個贊科技!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM