1. 程式人生 > >一款APP的開發設計是如何從0到1一步一步設計的

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

容易 學習 nbsp 過程 很快 idt 工具 strong fail

目前在行業裏,關於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.czwew.com/case/紫竹雲科技!

技術分享

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