APP和網(wǎng)頁(yè)設(shè)計(jì)必須要會(huì)的知識(shí)技能

剛開(kāi)始工作的時(shí)候，APP怎么做？網(wǎng)頁(yè)怎么做？統(tǒng)統(tǒng)不知道，找很多的網(wǎng)站、手機(jī)APP來(lái)參考，最后做出似是而非的東西，明明是自己做的臨摹的app頁(yè)面，怎么會(huì)和原版頁(yè)面差別那么大呢？更曾一度發(fā)現(xiàn)不了自己的app頁(yè)面做的不好看，沾沾自喜，更覺(jué)得UI設(shè)計(jì)不過(guò)如此，沒(méi)什么技術(shù)含量。

再度回首以往做的那些頁(yè)面，常因?yàn)椴涣私庾煮w、圖標(biāo)大小而隨意選擇自己喜歡的，這樣的后果就是給自己埋了大坑，畢竟工作上的項(xiàng)目，后期是自己要為其負(fù)責(zé)的。如果早點(diǎn)看到郗鑒老師的這本“UI設(shè)計(jì)師進(jìn)階完全指南”，我一定能提升雙倍的工作效率，不必每天苦兮兮的加班，最后做出來(lái)的頁(yè)面還不好看！

UI是User Interface Design(界面設(shè)計(jì))的簡(jiǎn)稱(chēng)，包含一切人機(jī)交互可視化的頁(yè)面設(shè)計(jì)，UI設(shè)計(jì)師的職責(zé)是設(shè)計(jì)工人機(jī)交互使用的圖形化用戶(hù)界面，并使界面更加易用和友好。1像素的偏差都可能引某些人的不適感，UI設(shè)計(jì)是一門(mén)很?chē)?yán)謹(jǐn)?shù)穆殬I(yè)。我就個(gè)人工作中常遇到困惑內(nèi)容整理了書(shū)中app、網(wǎng)頁(yè)設(shè)計(jì)的基本內(nèi)容，希望能幫小伙伴們帶來(lái)收獲，節(jié)省工作效率。

1、iPhone設(shè)計(jì)規(guī)范

a、iphone各系列手機(jī)型號(hào)、尺寸、使用的切圖是我們必須了解的（文末附上各類(lèi)UI Kit下載地址）。

手機(jī)型號(hào)與像素對(duì)應(yīng)表

b、iPhone設(shè)計(jì)需注意到的尺寸設(shè)計(jì)，包含導(dǎo)航欄設(shè)計(jì)、大標(biāo)題導(dǎo)航欄設(shè)計(jì)、tab欄設(shè)計(jì)等。大標(biāo)題導(dǎo)航欄的高度一般為116pt（包含20pt狀態(tài)欄，返回圖標(biāo)信息，大標(biāo)題34pt）?；瑒?dòng)頁(yè)面時(shí)大標(biāo)題會(huì)變成正常導(dǎo)航欄的64pt。

c、閃屏資源。閃屏是一張完整的靜態(tài)圖片，尺寸如下：

d、字體。IOS中英文使用的是San Francisco (SF)字體。

e、其他。iphone控件設(shè)計(jì)基本符合44pt（88px）原則，即在手機(jī)上大小為7～9mm，適合手指操作。iTunes上傳截圖需要提供兩套截圖：1242px * 2688px 和 1125px * 2436px兩套截圖。

f、UI設(shè)計(jì)師設(shè)計(jì)界面前需要先做用戶(hù)研究以了解產(chǎn)品特性，如用戶(hù)畫(huà)像、用戶(hù)調(diào)研、用戶(hù)使用場(chǎng)景分析、設(shè)計(jì)競(jìng)品分析等。若設(shè)計(jì)稿需要調(diào)節(jié)為Iphone X的顯示效果，可以下載IOS 12設(shè)計(jì)源文件，把界面頭尾設(shè)計(jì)成iPhoneX專(zhuān)用頭尾。

△iphone6/7/8尺寸

e、視覺(jué)規(guī)范。一套移動(dòng)端的視覺(jué)規(guī)范應(yīng)該包含如下幾點(diǎn)：

1. 主色/輔色/色彩規(guī)范：規(guī)定APP主要使用的色彩種類(lèi)。
2. 文字顏色/大小規(guī)范：規(guī)定App中主要使用的文字的大小、顏色、應(yīng)用場(chǎng)景等。
3. ICON規(guī)范：規(guī)定APP的ICON設(shè)計(jì)規(guī)范。
4. 應(yīng)用圖標(biāo)規(guī)范：規(guī)定App的應(yīng)用圖標(biāo)使用規(guī)范。
5. 按鈕和交互態(tài)規(guī)范：規(guī)定App內(nèi)所有按鈕和交互態(tài)的樣式。
6. 間距規(guī)范：規(guī)定App內(nèi)所有間距的尺寸。

f、切圖規(guī)范命名。按照“功能_類(lèi)型_名稱(chēng)_狀態(tài)@倍數(shù)”，如導(dǎo)航欄是那個(gè)又一個(gè)手術(shù)圖標(biāo)，它的命名形式可以為：nav_icon_sarch_default@2x.png(導(dǎo)航_圖標(biāo)_搜索_正常)

g、動(dòng)效。IOS主流的動(dòng)效設(shè)計(jì)有四種。第一種：設(shè)計(jì)師提供開(kāi)發(fā)動(dòng)效視頻或GIF，開(kāi)發(fā)人員依照效果編寫(xiě)代碼，調(diào)用切圖重新做，還原度可能出問(wèn)題。第二種：序列幀方式實(shí)現(xiàn)動(dòng)效。向開(kāi)發(fā)人員提供按順序命名的PNG，如：1.PNG、2.PNG等，開(kāi)發(fā)人員用代碼快速替換，實(shí)現(xiàn)動(dòng)畫(huà)。第三種，可以給程序員AVI等視頻文件直接插入視頻。第四種：使用Airbnb開(kāi)源的Lottie，用AE完成動(dòng)效，然后通過(guò)BodyMovin插件導(dǎo)出json文件，這種方式還原度很高。最優(yōu)秀的動(dòng)效還是需要設(shè)計(jì)師與開(kāi)發(fā)人員之間好好溝通。

2、Material Design設(shè)計(jì)

a、安卓是一套與windows類(lèi)似的操作系統(tǒng)。市場(chǎng)上的安卓屏幕尺寸大小不一，目前使用率高的是720P和1080P。Material Design為我們準(zhǔn)備了一個(gè)網(wǎng)站來(lái)查詢(xún)主流安卓設(shè)備的尺寸。切圖需要切出5套圖

b、Material Design不是簡(jiǎn)單的扁平設(shè)計(jì)，而是一種注重卡片式設(shè)計(jì)、紙張的模擬，使用了強(qiáng)烈對(duì)比色彩的設(shè)計(jì)風(fēng)格。

c、排版。使用柵格系統(tǒng)（列、水槽、邊距），好處是規(guī)范化、對(duì)齊設(shè)計(jì)。網(wǎng)格盡量使用4的倍數(shù)。

d、文字。Material Design在安卓設(shè)備上使用的字體：中文是思源字體、英文使用Roboto，其他免費(fèi)的google字體都可以在安卓設(shè)備上使用。字體具有單獨(dú)的單位sp。

e、主題編輯器。Material Design發(fā)布了針對(duì)Sketch的主題編輯器，可實(shí)現(xiàn)更改某個(gè)樣式即可應(yīng)用到全局、圖標(biāo)的不同風(fēng)格隨意切換、字體樣式隨意調(diào)整

3、網(wǎng)頁(yè)設(shè)計(jì)

a、網(wǎng)頁(yè)設(shè)計(jì)指的是網(wǎng)站的圖形界面設(shè)計(jì)。網(wǎng)站項(xiàng)目流程：用戶(hù)研究 — 撰寫(xiě)需求文檔 — 市場(chǎng)文檔 — 做競(jìng)品調(diào)研 — 原型圖階段 — 視覺(jué)稿階段 — 設(shè)計(jì)規(guī)范階段 — 切圖 — 前端代碼 — 項(xiàng)目走查。

b、網(wǎng)站種類(lèi)分為T(mén)o B端和To C端。門(mén)戶(hù)網(wǎng)站：國(guó)內(nèi)比較知名的有新浪、騰訊、網(wǎng)易、搜狐等。企業(yè)網(wǎng)站：每個(gè)企業(yè)都有一個(gè)網(wǎng)站對(duì)外展示自己的能力、介紹自己的產(chǎn)品等，通常有網(wǎng)站首頁(yè)、公司介紹、產(chǎn)品中心、公司團(tuán)隊(duì)、在線商城、聯(lián)系我們等幾個(gè)模塊。

產(chǎn)品網(wǎng)站：蘋(píng)果公司的iphone介紹頁(yè)，小米手機(jī)8的介紹頁(yè)，內(nèi)容主要包含該產(chǎn)品的工藝、技術(shù)、設(shè)計(jì)、特點(diǎn)、構(gòu)造、使用場(chǎng)景等。

電商網(wǎng)站：淘寶、天貓、京東等電子商務(wù)網(wǎng)站。游戲網(wǎng)站。專(zhuān)題頁(yè)面：電商、門(mén)戶(hù)網(wǎng)站通常會(huì)在節(jié)假日設(shè)計(jì)專(zhuān)題頁(yè)面增加曝光度，如：兒童節(jié)、情人節(jié)、母親節(jié)、圣誕節(jié)等，專(zhuān)題設(shè)計(jì)應(yīng)盡量抓住人的眼球，在頭部盡量刺激用戶(hù)，用刺激對(duì)比強(qiáng)的色彩、復(fù)雜立體的造型、沖擊感強(qiáng)的文字吸引用戶(hù)，避免使用現(xiàn)代主義中的冷淡風(fēng)格。

視頻網(wǎng)站。移動(dòng)端H5:比較火的H5設(shè)計(jì)工具有：MAKA、iH5、兔展等。

后臺(tái)網(wǎng)站：首要需求是顯示給操作者其需要掌握的數(shù)據(jù)，通常全屏排版。CRM系統(tǒng)（Customeer Relationship Management），客戶(hù)關(guān)系管理。企業(yè)對(duì)客戶(hù)的信息進(jìn)行匯集、管理、分析，同時(shí)對(duì)自身的銷(xiāo)售、服務(wù)、售后進(jìn)行監(jiān)控，常見(jiàn)的功能有：?jiǎn)T工日程管理、訂單管理、發(fā)票管理等。

Saas “軟件即服務(wù)”，其他公司提供SasS服務(wù)的公司定制系統(tǒng)，服務(wù)公司為客戶(hù)提供從服務(wù)器到設(shè)計(jì)一體化的服務(wù)。企業(yè)OA，即Office Automation，辦公自動(dòng)化，通過(guò)企業(yè)OA可以完成請(qǐng)假、調(diào)休、離職、查詢(xún)公司規(guī)章制度、請(qǐng)示、匯報(bào)等工作，減少時(shí)間成本，提高效率。

c、網(wǎng)站設(shè)計(jì)中基于鼠標(biāo)的交互。

?

d、靜態(tài)網(wǎng)頁(yè)多用HTML5編寫(xiě)，輔助CSS、JS等，結(jié)尾是html、htm，動(dòng)態(tài)網(wǎng)頁(yè)會(huì)隨時(shí)調(diào)取數(shù)據(jù)庫(kù)中的信息，使用了高級(jí)網(wǎng)頁(yè)編程技術(shù)，結(jié)尾是asp、php、jsp等。

e、網(wǎng)站中的動(dòng)畫(huà)實(shí)現(xiàn)原理。第一：H5視頻播放，缺點(diǎn)是不兼容低端瀏覽器。第二：Flash Player播放器播放，缺點(diǎn)是Flash安全性很低且效率慢。第三：動(dòng)畫(huà)使用GIF格式，缺點(diǎn)是動(dòng)畫(huà)長(zhǎng)度不夠，并且格式僅支持透明和不透明。谷歌首頁(yè)的Doodle的動(dòng)畫(huà)用的是雪碧圖，CSS雪碧圖，是一種CSS圖像合并技術(shù)。缺點(diǎn)是幀數(shù)不宜過(guò)多。

f、視差滾動(dòng)。通過(guò)運(yùn)動(dòng)速率不一樣，來(lái)下實(shí)現(xiàn)空間感，原理：代碼判斷網(wǎng)頁(yè)滾動(dòng)，滾動(dòng)時(shí)頁(yè)面中三層圖片運(yùn)動(dòng)速率和位移距離不同，給人造成的視覺(jué)體驗(yàn)如同現(xiàn)實(shí)中的空間感一樣。

g、通常網(wǎng)頁(yè)設(shè)計(jì)尺寸為1920 * 1080，每屏高度約為900px（1080減去瀏覽器頭部和底部高度）。字體必須使用偶數(shù)的字號(hào)，文字使用宋體 12px 渲染方式無(wú)，稍大用微軟雅黑、大小14px ～ 20px 渲染方式選擇Windows LCD或銳利，英文和數(shù)字使用Arial字體，渲染方式選擇無(wú)。Banner圖盡量滿(mǎn)屏，圖片按照4:3或者16:9來(lái)設(shè)計(jì)。

當(dāng)前標(biāo)題：APP和網(wǎng)頁(yè)設(shè)計(jì)必須要會(huì)的知識(shí)技能
網(wǎng)頁(yè)網(wǎng)址：http://muchs.cn/news48/43648.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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)