平面設計Studio 07 ▏界面設計&手機APP網(wǎng)站項目
時間：2022-08-07 06:33:02 | 來源：網(wǎng)站運營
時間：2022-08-07 06:33:02 來源：網(wǎng)站運營
克瑞斯專注藝術類留學作品集培訓，近期結(jié)合面授及線上遠程兩種教學模式，
界面設計Studio 07是手機端APP網(wǎng)站項目 ，對此類感興趣的同學們，歡迎學習參與。克瑞斯陸續(xù)推出更多專業(yè)項目，請按照文末聯(lián)系方式，關注公眾號了解課程詳情。
項目信息●項目分析UI是User Interface Design(界面設計)的簡稱，包含一切人機交互可視化的頁面設計，UI設計師的職責是設計工人機交互使用的圖形化用戶界面，并使界面更加易用和友好。
●設計規(guī)范①iphone各系列手機型號、尺寸、使用的切圖是同學們必須了解的。
②iPhone設計需注意到的尺寸設計，包含導航欄設計、大標題導航欄設計、tab欄設計等。大標題導航欄的高度一般為116pt（包含20pt狀態(tài)欄，返回圖標信息，大標題34pt）。滑動頁面時大標題會變成正常導航欄的64pt。
③閃屏資源。閃屏是一張完整的靜態(tài)圖片，尺寸如下。
④字體。IOS中英文使用的是San Francisco (SF)字體。
⑤iphone控件設計基本符合44pt（88px）原則，即在手機上大小為7～9mm，適合手指操作。iTunes上傳截圖需要提供兩套截圖：1242px * 2688px 和 1125px * 2436px兩套截圖。
●趨勢分析未來市場更加趨于使用手機界面來了解任何信息，分享經(jīng)濟下信息傳播更加方便快捷，優(yōu)秀的信息資源更加便于曝光。
課程介紹●課程方向：手機APP網(wǎng)站項目 ●授課方式：線上&線下
●課程時間：待定（根據(jù)學生的實際情況調(diào)整）
●課程形式：一對一&三人小組
●課程目的了解手機界面運作原理，掌握界面UI設計的設計規(guī)范及制作方法。
△分析圖-克瑞斯錄取案例
學習大綱●應用軟件Photoshop、Illustrator、Indesign等軟件及手繪板安裝。
●調(diào)研方法及學習方向①UI工具包使用，網(wǎng)格設計。
②UI設計界面前需先做用戶研究以了解產(chǎn)品特性，如用戶畫像、用戶調(diào)研、用戶使用場景分析、設計競品分析等。若設計稿需要調(diào)節(jié)為Iphone X的顯示效果，可以下載IOS 12設計源文件，把界面頭尾設計成iPhoneX專用頭尾。
③移動端視覺規(guī)范：主色/輔色/色彩規(guī)范：規(guī)定APP主要使用的色彩種類。文字顏色/大小規(guī)范：規(guī)定App中主要使用的文字的大小、顏色、應用場景等。ICON規(guī)范：規(guī)定APP的ICON設計規(guī)范。應用圖標規(guī)范：規(guī)定App的應用圖標使用規(guī)范。按鈕和交互態(tài)規(guī)范：規(guī)定App內(nèi)所有按鈕和交互態(tài)的樣式。間距規(guī)范：規(guī)定App內(nèi)所有間距的尺寸。
④切圖規(guī)范命名。按照“功能_類型_名稱_狀態(tài)@倍數(shù)”，如導航欄是那個又一個手術圖標，它的命名形式可以為：
⑤動效。IOS主流的動效設計有四種。
第一種：設計師提供開發(fā)動效視頻或GIF，開發(fā)人員依照效果編寫代碼，調(diào)用切圖重新做，還原度可能出問題。
第二種：序列幀方式實現(xiàn)動效。向開發(fā)人員提供按順序命名的PNG，如：1.PNG、2.PNG等，開發(fā)人員用代碼快速替換，實現(xiàn)動畫。
第三種，可以給程序員AVI等視頻文件直接插入視頻。
第四種：使用Airbnb開源的Lottie。用AE完成動效，然后通過BodyMovin插件導出json文件，這種方式還原度很高。最優(yōu)秀的動效還是需要設計師與開發(fā)人員之間好好溝通。
⑥安卓是一套與windows類似的操作系統(tǒng)。市場上的安卓屏幕尺寸大小不一，目前使用率最高的是720P和1080P。Material Design為我們準備了一個網(wǎng)站來查詢主流安卓設備的尺寸。
⑦Material Design不是簡單的扁平設計，而是一種注重卡片式設計、紙張的模擬，使用了強烈對比色彩的設計風格。
△流程圖-克瑞斯錄取案例
設計步驟●分析階段①項目定位，靈感啟發(fā)、主題設計空間探索。
②主題調(diào)研技能與方法講解，調(diào)研結(jié)果的篩選、總結(jié)、視覺呈現(xiàn)與轉(zhuǎn)換。
③手機界面用戶體驗心理學分析，實驗性用戶調(diào)研問卷報告。
④APP建設、界面UI設計布局形式制定，色調(diào)及風格制定。
⑤流程圖表設計、思路與創(chuàng)意的轉(zhuǎn)化與創(chuàng)新，設計過程標準化。
△界面設計-克瑞斯錄取案例
●設計深化階段①概念草圖推敲，方案演變。
②界面、圖像優(yōu)化、界面設計、方案設計。
③UI界面、手機APP圖面表現(xiàn)及制作。
④翻譯、院校上傳規(guī)格分析、版式版面設計。
⑤排版、壓縮、鏈接制作。
●設計出圖與表現(xiàn)UI設計流程圖表、方案設計、界面效果圖、排版版式設計。
△界面圖-克瑞斯錄取案例
●拓展性學習范圍①網(wǎng)頁設計指的是網(wǎng)站的圖形界面設計。
網(wǎng)站項目流程：用戶研究 — 撰寫需求文檔 — 市場文檔 — 做競品調(diào)研 — 原型圖階段 — 視覺稿階段 — 設計規(guī)范階段 — 切圖 — 前端代碼 — 項目走查。
②網(wǎng)站種類分為To B端和To C端。網(wǎng)站設計中基于鼠標的交互。
③移動端H5，比較火的H5設計工具有：MAKA、iH5、兔展等。
參考書目與網(wǎng)站●參考書目 《編輯設計》
《設計的細節(jié)》
《網(wǎng)頁設計和網(wǎng)站制作》
《品牌視覺》
《配色設計》
《數(shù)據(jù)視覺化設計》
《UI設計必修課》
《電商視覺營銷》
●參考網(wǎng)站 設計作品：大作網(wǎng)、Behance、Pinterest
優(yōu)秀案例：Dribble
圖標網(wǎng)站：Flaticon、iconfont等。
蘋果官方提供的iphone各類尺寸規(guī)范UI kit資源下載地址：
https://developer.apple.com/design/resources/San Francisco (SF)字體：
https://developer.apple.com/fonts動效設計用到的Airbnb開源的Lottie網(wǎng)址：
https://airbnb.design/lottie/蘋果開發(fā)者中心網(wǎng)址：
https://developer.apple.com/蘋果人機交互規(guī)范：
https://developer.apple.com/design/human-interface-guidelines/安卓設備的尺寸網(wǎng)址：
https://material.io/tools/devices/Material Design官方網(wǎng)站網(wǎng)址：
https://material.ioSketch的主題編輯器插件：
https://material.io/tools/theme-editor△效果圖-克瑞斯錄取案例
學習成果●學習周期為 ①前期調(diào)研1周：項目調(diào)研、靈感來源圖片及參考備注、信息匯總、數(shù)據(jù)研究、設計要點完善、分析圖制作、調(diào)研成果、前期分析探討等。
②邏輯推敲及概念設計1周：思維導圖、視覺可視化設計、手繪方案推敲數(shù)次。
③方案設計及細部設計2周：APP方案設計、制作過程、效果圖。
④網(wǎng)頁圖面繪制1周：手機APP界面設計圖、尺寸標注、不同色調(diào)及類型產(chǎn)品圖。
⑤制作3天：手機APP界面UI設計制作、色調(diào)調(diào)整、后期處理、排版設計。
⑥翻譯及排版1周：目標院校所需語言翻譯工作、版式版面封底設計、頁眉頁腳設計、字體字號設計、輸出尺寸制作、版式內(nèi)容頁面調(diào)整和制定樣式風格、各頁面圖面比例位置、圖面圖片大小尺寸及色調(diào)調(diào)整。
⑦制作錄取標準的作品集2天：包括不同版本PDF、JPEG、視頻、網(wǎng)站鏈接及電子版冊子。
⑧面試指導1小時：面試技巧及應變方式方法、面試流程及各個環(huán)節(jié)分析、自我介紹及基本信息問答、面試主題及問題細節(jié)答疑。
△項目調(diào)研-克瑞斯錄取案例
△數(shù)據(jù)分析-克瑞斯錄取案例
△流程圖-克瑞斯錄取案例
△界面設定-克瑞斯錄取案例
△效果圖-克瑞斯錄取案例
△效果圖-克瑞斯錄取案例
想了解更多藝術留學Studio，
長按關注公眾號“克瑞斯國際藝術教育”留言：姓名+聯(lián)系方式+申請國家+專業(yè)，克瑞斯顧問老師會第一時間聯(lián)系并解答。
在線咨詢