《UI設(shè)計》課件-UI界面設(shè)計期末要求

`INTERFACE

DESIGN`期末大作業(yè)/界面設(shè)計基礎(chǔ)課程之一、期末考核方向，小組作業(yè)（4-6人）APP改版考察圖標(biāo)設(shè)計、界面規(guī)范二、提交形式：文件夾壓縮包，含PPT+JPG。

命名為“1班/2班+組名+組長名字+某APP改版”于第17周（1月4日）課堂匯報文檔最終提交截止至第18周（1月11日）課堂提交,并簽到（1）PPT(期末文檔提交請轉(zhuǎn)PDF)（2）JPG：設(shè)計稿數(shù)張參考：PDF三、期末分?jǐn)?shù)考核點組成：1、完整性（20分）：4項內(nèi)容；缺一項扣2分。2、可用性（40分）：理解界面交互準(zhǔn)則，理解信息層次。符號可識別，信息有序有層次3、創(chuàng)意性（30分）：在滿足可用性的基礎(chǔ)上，界面或圖標(biāo)運用隱喻手法進(jìn)行設(shè)計，整體視覺風(fēng)格統(tǒng)一，融入個人的設(shè)計主張及設(shè)計思辨4、其他加分項（10分）：注重整體展示精良，如制作一些額外的海報，樣機展示設(shè)計，提升作業(yè)的整體的設(shè)計視覺感會獲得額外加分。APP改版選取某APP(工具類/平臺類)，進(jìn)行界面視覺設(shè)計改版這部分的頁面以一個“核心流程”進(jìn)行呈現(xiàn)提交形式，文件夾內(nèi)包含以下三部分：（1）PPT(期末文檔提交請轉(zhuǎn)PDF):A.改版產(chǎn)品選擇。

從下載市場分類中挑選出一類APP，產(chǎn)品的最初形態(tài)一般從“工具類”開始，如日歷/倒計時/地圖/時鐘/相冊等，慢慢隨著用戶量增大，加入社交屬性，形成了”平臺類“。根據(jù)本課程所涉及的界面準(zhǔn)則/視覺原理/色彩/圖形符號學(xué)等理論，進(jìn)行綜合性列點分析選擇的產(chǎn)品需改版的原因。B.產(chǎn)品重新定位。

重塑產(chǎn)品的形象，以下提供幾個角度，可供參考：對比同類產(chǎn)品（從熱門的/推薦榜單/最喜愛等進(jìn)行3至5個產(chǎn)品研究）；產(chǎn)品使用的用戶人群，結(jié)合符號學(xué)、色彩心理學(xué)，重塑產(chǎn)品的視覺屬性：圖標(biāo)/風(fēng)格/配色/標(biāo)準(zhǔn)字及字號等C.調(diào)整界面設(shè)計。

參照尼爾森十大交互準(zhǔn)則；網(wǎng)格系統(tǒng)。進(jìn)行界面部分的視覺改版設(shè)計，改版的內(nèi)容及數(shù)量請參考上一頁PPT。項目定義1用戶研究2用戶體驗及功能分析3原型創(chuàng)意4項目總結(jié)（個人心得總結(jié)）5目錄CONTENTS【例】17級蔡敏琦小組書房APP匯報PPT的目錄項目定義01Impressivepictureandcreativesloganhere#

SlideCONTENTS目錄用戶研究02用戶體驗03功能分析0405原型創(chuàng)意

06項目總結(jié)【例】17級張錦華小組自帳APP匯報PPT的目錄（2)JPG輸出數(shù)張，提交設(shè)計內(nèi)容的全部JPG資料。請注意每張JPG的命名。參考設(shè)計版式及部分設(shè)計內(nèi)容，期末設(shè)計所有內(nèi)容請按照PPT第5頁：/work/ZMjU2MTU5ODQ=.html【備注期末類別】

1、應(yīng)用圖標(biāo)設(shè)計：

風(fēng)格五大類——具體特征；物體裝飾特征；抽象特征；字符風(fēng)格；角色設(shè)計風(fēng)格

可使用設(shè)計風(fēng)格：扁平、擬物、漸變、質(zhì)感

/work/ZMjU2MTU5ODQ=.html擬物化設(shè)計風(fēng)格↓1具體特征設(shè)計風(fēng)格(二階)2物體裝飾設(shè)計風(fēng)格(三階)扁平式設(shè)計風(fēng)格3抽象特征設(shè)計風(fēng)格(五階)3字符設(shè)計風(fēng)格4扁平式設(shè)計風(fēng)格4字符風(fēng)格(五階)抽象特征(四階)33字符風(fēng)格(五階)抽象特征(五階)角色設(shè)計風(fēng)格效果越擬物質(zhì)感，二階or三階效果越扁平越強調(diào)色彩，卡通，四階2、啟動頁面/引導(dǎo)頁面閃屏：呈現(xiàn)產(chǎn)品品牌相關(guān)信息，加文案?？捎脭z影/圖形/插畫形式表現(xiàn)啟動頁（品牌閃屏設(shè)計）1個，必做*系列的（常見新下載手機時候）3個，選做QQ音樂，結(jié)合節(jié)日設(shè)計的閃屏（運用了三階的視覺樣式，即運用了“圖像繪畫”手法來實現(xiàn)QQ音樂品牌閃屏設(shè)計的插畫效果）馬蜂窩APP（閃屏用了一階的視覺樣式，即運用了“攝影”真實性來進(jìn)行閃屏創(chuàng)作）喜馬拉雅APP（閃屏用了五階的視覺樣式，即運用逐漸散開的波紋隱喻聲紋的效果設(shè)計閃屏）【備注期末類別】*系列選做：在新下載并開啟時，進(jìn)入首頁界面之前會有“新手操作”或“節(jié)日專用的宣傳”（系列的選做，不是我們考察的重點）【備注期末類別】3、視覺規(guī)范:配色方案、功能圖標(biāo)、組件設(shè)計、字體樣式字重等?？蓞⒖颊究峋W(wǎng)站內(nèi)”APP改版”的作品/search/content?&word=APP改版圖片取自/work/ZMjU2MTU5ODQ=.html組件設(shè)計（從界面設(shè)計中挑選出一些組件進(jìn)行統(tǒng)一排版，個數(shù)不限，注意視覺風(fēng)格統(tǒng)一。輸出組件設(shè)計的JPG）控制元素：開關(guān)內(nèi)容視圖：集合視圖內(nèi)容視圖：集合視圖欄：標(biāo)簽欄控制元素：搜索框內(nèi)容視圖：集合視圖控制元素：進(jìn)度條臨時視圖：操作列表組件設(shè)計欣賞（從界面設(shè)計中挑選出一些組件進(jìn)行統(tǒng)一排版，個數(shù)不限，注意視覺風(fēng)格統(tǒng)一。輸出組件設(shè)計的JPG）參考/search/content?type=0&field=0&other=0&sort=5&word=12306%E6%94%B9%E7%89%88&recommend=0&time=0&requestId=requestId_1587888084328&p=1#tab_anchor【備注期末類別】4、界面改版:考察對界面準(zhǔn)則的理解、信息層級設(shè)計?？梢酝ㄟ^對所選產(chǎn)品的分析，進(jìn)行功能的調(diào)整，視覺的重新定義。改版12306/work/ZNDE1NjQ1NTY=.html修改某個天氣APP重新進(jìn)行視覺設(shè)計，注意需有根據(jù)的進(jìn)行分析和重新定義RoloCalendar「反日歷」設(shè)計它的與眾不同，沒有傳統(tǒng)日歷各種大大小小的表格AT

是一款時間追蹤工具，簡單地說就是設(shè)立一個目標(biāo)時間，紀(jì)錄你離那個時