中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

APP界面設(shè)計(jì)零基礎(chǔ)教程

2022-06-16    分類: 網(wǎng)站建設(shè)

UI 設(shè)計(jì)師從零開始做一個(gè)App 要經(jīng)歷哪些流程?這個(gè)系列的文章會(huì)為新手一一講解。本篇會(huì)為你講解界面設(shè)計(jì)中基礎(chǔ)的知識(shí)點(diǎn)(設(shè)計(jì)稿尺寸、圖標(biāo)/字體設(shè)計(jì)等),實(shí)用高效,新手來(lái)收。

先來(lái)看看整個(gè)目錄:

項(xiàng)目立項(xiàng)

項(xiàng)目預(yù)估時(shí)間

界面設(shè)計(jì)

切圖標(biāo)注

視覺(jué)還原

上線準(zhǔn)備

目前在行業(yè)里,關(guān)于APP界面設(shè)計(jì)規(guī)范也是層次不齊,很多都還停留在6的設(shè)備和iOS 9的系統(tǒng)之上,而現(xiàn)在最新的是iPhone 7和iOS 10了(更新?lián)Q代真的很快),我這里說(shuō)的是最新的iOS 界面設(shè)計(jì)規(guī)范(Android設(shè)計(jì)規(guī)范,我們下次見(jiàn))

一. 關(guān)于設(shè)計(jì)工具

俗話說(shuō):工欲善其事必先利其器,好的工具可以讓我們的工作效率更高,做界面設(shè)計(jì)我們用的最多的就是PS和AI了,如果你是Mac用戶,可以嘗試一下Sketch,軟件的版本當(dāng)然是推薦高版本,因?yàn)楣δ芨鼜?qiáng)大,作圖的速度也就更快。


我個(gè)人剛接觸PS是從8.0開始,8.0 – CS4 – CS 5 – CS 6 – CC – CC 2014 – CC 2015,一直到現(xiàn)在的最新的CC 2017,深刻體會(huì),新的版本更好用。也可以根據(jù)個(gè)人習(xí)慣,選擇自己順手的工具就好。

二. 設(shè)計(jì)稿尺寸

在看設(shè)計(jì)稿尺寸之前,我們先來(lái)了解一下APP界面設(shè)計(jì)構(gòu)成。


界面構(gòu)成由:布局層、圖文排版層和圖標(biāo)層。

在iPhone 6還沒(méi)出的時(shí)候,都是用640×1136 px來(lái)做設(shè)計(jì)稿的,自從6的發(fā)布,所有的設(shè)計(jì)稿尺寸以750×1334 px來(lái)做設(shè)計(jì)稿尺寸。


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

iPhone界面設(shè)計(jì)規(guī)范:


iPhone 界面尺寸:



以750x1334px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸的原由:

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

2. 大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸,會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角。

3. 設(shè)計(jì)安卓版本時(shí)只需做最小的設(shè)計(jì)調(diào)整,提升設(shè)計(jì)效率。

所以做設(shè)計(jì)稿時(shí)請(qǐng)以750 x 1334 px來(lái)做設(shè)計(jì)稿。




在文檔建立參考線是一個(gè)很好的習(xí)慣,我希望大家也可以養(yǎng)成這個(gè)習(xí)慣,上下很容易設(shè)置,左右我習(xí)慣設(shè)置24 px的距離,我通過(guò)對(duì)國(guó)內(nèi)外很多APP就行了對(duì)比,總結(jié)是24 px更合理,這個(gè)是我的個(gè)人習(xí)慣,所以也不要當(dāng)做是明文規(guī)則,你設(shè)置為30 px,也是可以的。


這里再給大家略過(guò)下iPad的設(shè)計(jì)規(guī)范:



三. 圖標(biāo)設(shè)計(jì)

iPhone 圖標(biāo)尺寸:



圖標(biāo)設(shè)計(jì)請(qǐng)用柵格化系統(tǒng)進(jìn)行設(shè)計(jì)。

設(shè)計(jì)尺寸:1024 x 1024 px,盡可能的采用黃金比例設(shè)計(jì)。


四. 關(guān)于設(shè)計(jì)字體

先來(lái)看一下字體的歷史演變過(guò)程

iOS 9:英文字體為Helvetica Neue

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

iOS 10:英文字體為San Francisco

iOS 10:中文字體為蘋方


關(guān)于字體大小的問(wèn)題:

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

標(biāo)題文字大小 28-34px

正文文字大小 26-30px

輔助性文字大小 20-24px

Tab bar文字大小 20px

文字大小只是一個(gè)范圍,這要根據(jù)設(shè)計(jì)的視覺(jué)效果來(lái)決定,不要死記硬背,但是切記,字體大小要用偶數(shù)。

網(wǎng)頁(yè)名稱:APP界面設(shè)計(jì)零基礎(chǔ)教程
轉(zhuǎn)載來(lái)源:http://www.rwnh.cn/news/168013.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、Google手機(jī)網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

營(yíng)銷型網(wǎng)站建設(shè)
陆川县| 德惠市| 攀枝花市| 河津市| 安塞县| 仁怀市| 文昌市| 金塔县| 滦南县| 建湖县| 金川县| 神木县| 玉龙| 常州市| 阜城县| 太和县| 高碑店市| 东山县| 龙岩市| 盐津县| 满洲里市| 临泽县| 玛多县| 砚山县| 青川县| 长乐市| 靖远县| 梧州市| 伊金霍洛旗| 苍山县| 呼和浩特市| 洞口县| 塘沽区| 鸡西市| 镇坪县| 年辖:市辖区| 寻甸| 扶风县| 神木县| 上林县| 济宁市|