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

標籤：標題   blank   cisco   owb   技術分享   總結   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一步一步設計的