`INTERFACE

DESIGN`UI設(shè)計(jì)基礎(chǔ)課程組件UIKit01擬物化時(shí)期的UI組件設(shè)計(jì)掌握組件的類別并找到合適的視覺風(fēng)格組件庫擬物化的按鈕設(shè)計(jì)（左、中），手機(jī)導(dǎo)航設(shè)計(jì)（右）擬物化時(shí)期按鈕設(shè)計(jì)利用光影、質(zhì)感、立體結(jié)構(gòu)表現(xiàn)不同狀態(tài)(網(wǎng)頁設(shè)計(jì)/PC端)，創(chuàng)意注意隱喻默認(rèn)懸停點(diǎn)擊2020新擬態(tài)設(shè)計(jì)/shots/10006635-Neumorphic-Rebound-of-Nomad-iOS-UI-Kit/shots/9838619-Music-Player-Neumorphism-Rebound-shot問：新擬物化趨勢，實(shí)用嗎?需要了解組件的作用，以及界面可用性原則組件作用UIKit02組件的作用：1、為了呈現(xiàn)不同信息，調(diào)用不同組件，例如欄（搜索欄）框（警告框）表單（活動(dòng)菜單）控件（按鈕）等；通過不同的組件的組合，來組織形成頁面圖片出自：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7第三層級(jí)次層級(jí)主層級(jí)

按鈕

文字鏈接

框

列表主層級(jí)次層級(jí)第三層級(jí)擬物化按鈕，通過質(zhì)感、光影、顏色表現(xiàn)出不同的狀態(tài)；扁平式按鈕，通過顏色（做好主色、次色、背景色的協(xié)調(diào)搭配），才能凸顯狀態(tài)常通過線面圖標(biāo)互相轉(zhuǎn)化展示不同的狀態(tài)組件的作用：2、通過不同狀態(tài)或不同層級(jí)信息選擇合適的、對(duì)應(yīng)的表現(xiàn)方式信息與展現(xiàn)應(yīng)體現(xiàn)一致性、不能模棱兩可、曖昧不清圖片出自：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7組件的作用：3、組件之間需要統(tǒng)一控件的細(xì)節(jié)、顏色圖片出自：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7MaterialDesign界面風(fēng)格扁平式組件（無光/無擬物質(zhì)感/無立體結(jié)構(gòu)）界面→信息層級(jí)（1）通過層級(jí)疊加的顏色變化（2）通過陰影[例子]組件組成的界面扁平式界面（以MaterialDesign為例）（1）主色：應(yīng)用程序欄、按鈕、選中樣式；（2）次級(jí)色：FAB、底部導(dǎo)航、滑塊、單選／復(fù)選框；（3）背景色：頁面背景色。主色次級(jí)色背景色組件之表單：圖標(biāo)+文字；圖標(biāo)都有幫助快速識(shí)別的作用，紅點(diǎn)與圖標(biāo)的層級(jí)關(guān)系統(tǒng)一的風(fēng)格[例子]扁平式，通過漸變疊加、對(duì)比色使用，又或者2色疊加、3色疊加等多種多樣的方式來營造圖標(biāo)的多彩感。”搜索圖標(biāo)“是控件”搜索圖標(biāo)“+文字+框=搜索欄，組件[例子]是否使用漸變需要根據(jù)整體APP的視覺風(fēng)格而定，以下有幾點(diǎn)漸變按鈕的建議：（1）漸變色采用鄰近色組，純色調(diào)。背景色不宜再搭配漸變，而可以純4號(hào)或暗10號(hào)。（2）彩色投影來源于元素本身，通過對(duì)顏色對(duì)透明度調(diào)整來達(dá)到效果。（3）與漸變色搭配的文字或符號(hào)用“白色”效果更佳[例子]（左）Windows時(shí)期扁平式設(shè)計(jì)（右）dribbbleUIkit設(shè)計(jì)及排版dribbbleUIkit設(shè)計(jì)及排版APPUI基礎(chǔ)樣式庫圖標(biāo)彈框按鈕列表：單行/雙行/多行卡片列表導(dǎo)航欄、標(biāo)簽欄、搜索欄選擇項(xiàng)目進(jìn)度條對(duì)話框頁面類型03狀態(tài)欄：與設(shè)備當(dāng)前狀態(tài)相關(guān)的有用信息，比如時(shí)間、運(yùn)營商、網(wǎng)絡(luò)狀態(tài)以及電池容量。導(dǎo)航欄:導(dǎo)航欄能夠?qū)崿F(xiàn)應(yīng)用不同信息層級(jí)間的導(dǎo)航標(biāo)簽欄：標(biāo)簽欄最多一次可承載5個(gè)標(biāo)簽。超過會(huì)造成視覺略顯擁擠，主模塊不宜過多。*工具欄：工具欄中的所有指令和操作是針對(duì)當(dāng)前屏幕和視圖的。工具欄的場景：①內(nèi)容詳情頁中，放置針對(duì)當(dāng)前內(nèi)容的編輯操作按鈕。比如知乎日?qǐng)?bào)內(nèi)容詳情頁工具欄，包含針對(duì)當(dāng)前內(nèi)容的功能按鈕以及導(dǎo)航按鈕，位于屏幕底部。②圖文編輯頁面中，放置編輯時(shí)用到的工具按鈕。③針對(duì)列表項(xiàng)中的內(nèi)容進(jìn)行編輯，比如淘寶購物車工具欄，用于編輯購物車中商品，位于標(biāo)簽欄之上。狀態(tài)欄導(dǎo)航欄標(biāo)簽欄（底部標(biāo)簽）內(nèi)容區(qū)域當(dāng)你打開一個(gè)APP之后，你看到的功能、文字、圖片、視頻等所有的東西都顯示在頁面這個(gè)載體里面。京東主界面

打開APP進(jìn)入的第一個(gè)界面叫“主界面”聚合頁/一級(jí)頁面定義：由不同種類的內(nèi)容組成并展示很多入口作用：可以快速了解區(qū)域、分類樣式：多種組合內(nèi)容：文字、圖文、圖標(biāo)、視頻快捷入口點(diǎn)擊后浮出層（popover），如微信的“+”點(diǎn)擊后切換新頁面，如京東的“掃一掃”搜索欄導(dǎo)航1導(dǎo)航2導(dǎo)航3導(dǎo)航4導(dǎo)航5…banner分頁控件跳板導(dǎo)航（參考《UI設(shè)計(jì)模式》）集合視圖版式根據(jù)實(shí)際情況底部標(biāo)簽頁面類型：一級(jí)頁面/聚合頁面主界面/首頁以京東APP為例，其主要功能在底部標(biāo)簽可見，下述是每個(gè)功能的一級(jí)頁面展示分類發(fā)現(xiàn)購物車我的兩欄卡片列表/通欄跳板列表頁/二級(jí)頁面定義：由同一內(nèi)容組成并展示，如某一分類；某一功能。底部標(biāo)簽消失作用：可以直觀了解所在板塊的同等內(nèi)容，可以做對(duì)比。樣式：可以是兩欄、單列；列表式或卡片式；內(nèi)容：文字、圖文、視頻平臺(tái)類頁面類型：二級(jí)頁面/列表頁以餓了么APP為例，通過圖標(biāo)入口進(jìn)入新頁面。內(nèi)容進(jìn)一步聚焦，路徑深入營養(yǎng)跟蹤_主要功能流程圖展示：關(guān)于如何記錄食物文章出處：medium<UI/UX案例研究：營養(yǎng)跟蹤應(yīng)用程序>主界面一級(jí)頁面→二級(jí)頁面（一級(jí)頁面的底部標(biāo)簽在此消失）詳情頁/二級(jí)或二級(jí)之后定義：由同一內(nèi)容組成并展示，有交互的控件出現(xiàn)作用：引導(dǎo)用戶了解后做出相關(guān)操作，如社交互動(dòng)、編輯、交易等樣式：根據(jù)內(nèi)容進(jìn)行排版，需要預(yù)留控件位置頁面類型：二級(jí)或二級(jí)之后頁面/詳情頁以餓了么APP為例，目標(biāo)進(jìn)一步聚焦，路徑深入，底部標(biāo)簽欄換成可交互的控件第3級(jí)綠洲APP社區(qū)類一級(jí)頁面→二級(jí)頁面（一級(jí)頁面的底部標(biāo)簽在此消失）在二級(jí)這里看到了“詳情頁”頁面類型：提交頁提交頁：定義：用戶用以提交數(shù)據(jù)作用：用戶提交，服務(wù)器返回?cái)?shù)據(jù)以超星的“筆記”功能為例。提交包括：書寫編輯、交易付款、登錄營養(yǎng)跟蹤_主要功能流程圖展示：關(guān)于如何記錄食物文章出處：medium<UI/UX案例研究：營養(yǎng)跟蹤應(yīng)用程序>一級(jí)頁面

提交頁主界面

自行添加頁面類型小結(jié)1、聚合頁，通常是一級(jí)頁面2、列表頁，通常是二級(jí)頁面3、詳情頁，通常是二級(jí)或二級(jí)以上頁面4、提交頁，用戶需要編輯、交互的時(shí)候出現(xiàn)頁面跳轉(zhuǎn)小結(jié)路徑不斷深入，目標(biāo)不斷聚焦以“購買行為”為例聚合頁→列表頁→詳情頁→提交頁其他例子瞬間導(dǎo)航之側(cè)邊抽屜、下拉菜單全局導(dǎo)航之列表菜單式全局導(dǎo)航之跳板式導(dǎo)航模式全局導(dǎo)航之陳列館式現(xiàn)在主流界面；呈現(xiàn)實(shí)時(shí)內(nèi)容居多：附近、熱點(diǎn)、新聞、動(dòng)態(tài)、圖片……；APP分類04產(chǎn)品開發(fā)的思維開始的方向：產(chǎn)生群體的需求工具平臺(tái)生態(tài)從工具應(yīng)用開始為切入點(diǎn)逐步沉淀內(nèi)容及用戶融入商業(yè)合作模式，打造產(chǎn)業(yè)鏈社交跨界產(chǎn)品內(nèi)容為工具類的應(yīng)用,通常在首頁，可以以工具的元素，進(jìn)行沉浸式的頁面設(shè)計(jì)OVERVIEW2018工具類：只幫助完成一類事情。比如天氣、時(shí)鐘、備忘錄……手機(jī)中的原生系統(tǒng)平臺(tái)類：搭個(gè)臺(tái)，人與人在上面互相聯(lián)系；滴滴網(wǎng)約平臺(tái)（社交屬性/興趣導(dǎo)向/交易）KEEP綠洲生態(tài)圈：個(gè)人與社會(huì)各領(lǐng)域產(chǎn)生聯(lián)系，可以是多線程聯(lián)系，完成交付行為目前阿里巴巴的支付寶和騰訊的微信生態(tài)附錄：APP類型，以工具/社區(qū)/綜合為導(dǎo)向工具平臺(tái)（社交屬性/興趣導(dǎo)向/交易）APP產(chǎn)品分類

參考各大下載市場

或“最美應(yīng)用”補(bǔ)充資料組件的類型小結(jié)詳情請(qǐng)查看浪子AXURE原型：http://51/component.html2、個(gè)人臨摹組件庫，3-5個(gè)不同的組件（請(qǐng)見“組件案例參考”文件夾，也可自己找圖片），尺寸A4，橫向版面;