第08節(jié)界面設(shè)計與組件的認識字體欄目擬定

GUI實戰(zhàn)班不忘初心！持續(xù)努力平凡變非凡主講老師：琦琦老師姓名：琦琦QQ：3003183864擁有5年設(shè)計經(jīng)驗1年線下教育經(jīng)驗網(wǎng)頁設(shè)計師UI設(shè)計師

技能web網(wǎng)頁設(shè)計、電商設(shè)計、界面設(shè)計、APP設(shè)計微信端設(shè)計課堂須知1：上課時間：周一至周五晚上20：00-22：00，潭州課堂（PC客戶端、移動APP端、網(wǎng)頁版）2：本期主講琦琦老師：3003183864，主要負責專業(yè)授課以及問題答疑，作業(yè)收集/點評、考勤、回訪等:3：作業(yè)統(tǒng)一發(fā)到指定QQ郵箱：3003183864@，作業(yè)格式：日期+課時+QQ網(wǎng)名4：如果有事不能來上課，需提前向老師請假。5：按時提交作業(yè)，不能缺交。（看視頻學(xué)習(xí)的同學(xué)也一樣）如由于工作繁忙不能及時提交作業(yè)，需向老師說明情況。6：百度網(wǎng)盤鏈接：鏈接：/s/1lsqVobWltOt1FHP8g0eUig提取碼：p5wg注：該鏈接是老師課后上傳本節(jié)課高清錄播視頻+素材；錄播視頻也可直接在潭州課堂PC客戶端、APP里面進行在線觀看！如有疑問私聊老師！課堂紀律1：準時參加課程，不遲到，不早退，不曠課2：上課時公屏上不允許刷屏、閑聊等任何影響其他同學(xué)學(xué)習(xí)情況發(fā)生注意：任何講師不會以任何形式讓任何學(xué)員打錢，如果報名或者升班補款，請認準官方報名老師及官方報名賬號；并且，同學(xué)之間應(yīng)注意交流空間，不要隨意輕信任何跟錢財相關(guān)的話題，注意自身財產(chǎn)安全。課程大綱第一節(jié)

產(chǎn)品思維與需求提起方法

第二節(jié)圖標設(shè)計理論與設(shè)計風格第三節(jié)應(yīng)用icon創(chuàng)意思維表現(xiàn)第四節(jié)圖標設(shè)計的品牌基因法則第五節(jié)金剛區(qū)圖標風格解剖第六節(jié)整體圖標輸出點評第七節(jié)顏色與風格規(guī)范擬定第八節(jié)界面設(shè)計規(guī)范與組件的認識第九節(jié)視覺設(shè)計必備表現(xiàn)形式第十節(jié)界面設(shè)計中的排版方式第十一節(jié)整體界面輸出點評第十二節(jié)團隊合作方式與IOS項目重建第十三節(jié)界面設(shè)計細節(jié)樣式表現(xiàn)第十四節(jié)表單設(shè)計的細節(jié)分析第十五節(jié)MaterialDesign設(shè)計規(guī)范第十六節(jié)表單設(shè)計的細節(jié)分析第十七節(jié)整體界面輸出點評第十八節(jié)視覺版本迭代詳解（視覺）第十九節(jié)系統(tǒng)適配與界面標注、切圖第九節(jié)字體與欄目規(guī)范擬定Designidea知識點01IOS界面設(shè)計規(guī)范界面欄目和字體規(guī)范0203界面組件的認識APP視覺設(shè)計04IOS界面設(shè)計規(guī)范ICONSdesignseveraltaboos知識點一：IOS界面設(shè)計規(guī)范清晰在整個系統(tǒng)中，文字在每一個尺寸都是清晰的，容易閱讀的的，負空間，顏色，字體，圖形和界面元素巧妙的突出重要內(nèi)容并傳達交互性。

/design/human-interface-guidelines/知識點一：IOS界面設(shè)計規(guī)范知識點一：IOS界面設(shè)計規(guī)范尊重

流暢的動作和清晰美觀的界面可以幫助人們理解內(nèi)容并與之互動，同時不與之競爭。內(nèi)容通常填滿整個屏幕，而半透明和模糊通常暗示更多。最小化使用邊框，漸變和陰影可使界面輕盈通風，同時確保內(nèi)容至關(guān)重要。知識點一：IOS界面設(shè)計規(guī)范深度

獨特的視覺層和逼真的動作傳達層次結(jié)構(gòu)，賦予活力，促進理解。觸摸和可發(fā)現(xiàn)性提高了樂趣，并允許訪問功能和其他內(nèi)容，而不會丟失上下文。在您瀏覽內(nèi)容時，過渡可提供深度感。界面基本元素-bar（欄）欄可以告知用戶其當前所在應(yīng)用中的具體位置，提供導(dǎo)航，還有可能包含按鈕或其他可以用來觸發(fā)功能或交流的元素。知識點二：界面欄目和字體規(guī)范狀態(tài)欄Statusbar@1x下尺寸為20pt(iphone6)44pt(iphoneX)

不要自己定義狀態(tài)欄知識點二：界面欄目和字體規(guī)范狀態(tài)欄對比知識點二：界面欄目和字體規(guī)范導(dǎo)航欄navigationbar導(dǎo)航欄顯示在應(yīng)用程序屏幕的頂部，位于狀態(tài)欄下方，可以通過一系列分層屏幕進行導(dǎo)航。當顯示新屏幕時，通常標有前一屏幕標題的后退按鈕出現(xiàn)在欄的左側(cè)。有時，導(dǎo)航欄的右側(cè)包含一個控件，如“編輯”或“完成”按鈕，用于管理活動視圖中的內(nèi)容。在拆分視圖中，導(dǎo)航欄可能會顯示在拆分視圖的單個窗格中。導(dǎo)航欄是半透明的，可以具有背景色調(diào)，并且可以配置為在鍵盤在屏幕上，發(fā)生手勢或視圖調(diào)整大小時隱藏。知識點二：界面欄目和字體規(guī)范導(dǎo)航欄對比20-36(頁邊距)

34-36

iPhone6iPhoneX知識點二：界面欄目和字體規(guī)范導(dǎo)航欄設(shè)計方式34-36px>64知識點二：界面欄目和字體規(guī)范標簽欄

TABbar標簽欄顯示在應(yīng)用程序屏幕的底部，可以在應(yīng)用程序的不同部分之間快速切換。標簽欄是半透明的，可以具有背景色調(diào)，在所有屏幕方向上保持相同的高度，并且在顯示鍵盤時隱藏。標簽欄可能包含任意數(shù)量的標簽，但可見標簽的數(shù)量因設(shè)備大小和方向而異。知識點二：界面欄目和字體規(guī)范01扁平標簽欄在扁平式信息結(jié)構(gòu)的App中，所有的主要類別都可以從主頁面進入，用戶可以直接從一個類別跳到另外一個類別。01、優(yōu)點（1）用戶清楚當前所在的入口位置。（2）用戶在各入口間頻繁跳轉(zhuǎn)且不會迷失方向。（3）直接展現(xiàn)最重要入口的內(nèi)容信息。02、缺點（1）會占用一定的高度的顯示面積。（2）功能入口多時，該模式顯得笨重且不實用。（3）不利于大屏幕手機進行單手切換操作。知識點二：界面欄目和字體規(guī)范02舵式標簽欄舵式導(dǎo)航主要就是中間標簽作為重要且操作頻繁的入口。01、優(yōu)點（1）重要且操作頻繁的入口很顯眼（2）較大限度地引導(dǎo)用戶進行操作。02、缺點（1）中間按鈕極其顯眼，按鈕周圍的兩個按鈕單機率較低。（2）對中間按鈕要求設(shè)計要求比較高，需要有高度的設(shè)計美感，否則顯得不協(xié)調(diào)。喜馬拉雅-蝦米音樂知識點二：界面欄目和字體規(guī)范iOS12官方顏色知識點二：界面欄目和字體規(guī)范官方顏色color知識點二：界面欄目和字體規(guī)范官方顏色color知識點二：界面欄目和字體規(guī)范知識點二：界面欄目和字體規(guī)范知識點二：界面欄目和字體規(guī)范知識點二：界面欄目和字體規(guī)范HUMANINTERFACEGUIDELINESiOS12官方字體大小10pt20px9pt18px8pt16px(最小)知識點二：界面欄目和字體規(guī)范我的錢包：64PX￥4，285：42PX微信支付：24PX消費記錄：24PX支付時間：16PX根據(jù)內(nèi)容的層級，選擇適合的大小。一、控件元素1、進度指示器告訴用戶這個過程需要多久能完成。2、頁面控制器可以顯示多少頁視圖，告訴用戶當前是第幾頁一般不要設(shè)置的太多。瀏覽器知識點三：界面組件的認識3、刷新控件用于刷新當前頁面的的內(nèi)容。4、滑動器用于傳達左右兩端各代表什么。5、開關(guān)也在做切換器，用于切換兩種互斥的選擇狀態(tài)。大眾點評知識點三：界面組件的認識二、篩選器1、選擇器用作于選擇需要的內(nèi)容。有點類似ps中的字體選擇。2、分段控件有點類似于底板標簽欄，用作于切換頁面企業(yè)QQ段子來了知識點三：界面組件的認識二、篩選器3、排序采用的是下拉菜單欄設(shè)計形式，用作于地區(qū)的選擇等淘寶APP知識點三：界面組件的認識三、表單控件1、單選框用作于一組相關(guān)但互斥的選項中，用戶只能選一個。很多控件的設(shè)計形式與web界面上的控件非常相似。知識點三：界面組件的認識2、復(fù)選框用作于多選，為用戶提供一組相互關(guān)聯(lián)但內(nèi)容不兼容的選項。知識點三：界面組件的認識3、文本框文本框是可以接受用戶輸入文本的圓角區(qū)域。默認請輸入名稱之前輸入的內(nèi)容或者修改后面重新輸入過多錯誤知識點三：界面組件的認識4、下拉框下拉框又叫下拉菜單，用于一組列表中進行選擇。用戶只能選擇一個選項。知識點三：界面組件的認識知識點四：APP視覺設(shè)計1、宮格式宮格式導(dǎo)航的特征是登錄界面中的菜單選項就是進入各個應(yīng)用的起點，01、優(yōu)點（1）清晰展示各入口（2）用戶容易記住個入口的位置，方便快速查找。02、缺點（1）無法在多入口間靈活跳轉(zhuǎn)，不適合多任務(wù)操作。（2）容易形成更深的路徑。（3）不能直接展示入口內(nèi)容。支付寶知識點四：APP視覺設(shè)計2、卡片式將同類信息歸納到一個矩形或者圓角矩形當中?？ㄆ梢员欢询B、覆蓋、移動，這樣極大的擴展了一個內(nèi)容塊的視覺深度和可操作性?？ㄆ谠O(shè)計形式上可以增加邊緣、陰影，使得卡片具有立體感。知識點四：APP視覺設(shè)計3、內(nèi)容主導(dǎo)式（陳列式）陳列式導(dǎo)航是通過直接在界面上顯示各個內(nèi)容項來實現(xiàn)導(dǎo)航的。01、優(yōu)點（1）直觀地展現(xiàn)各項內(nèi)容。（2）能夠方便地瀏覽經(jīng)常更新的內(nèi)容02、缺點（1）不適合展現(xiàn)頂層入口框架（功能入口）（2）對界面內(nèi)容要求較高，否則顯得雜亂。（3）設(shè)計效果單一，容易呆板。知識點四：APP視覺設(shè)計3、內(nèi)容主導(dǎo)式（列表式）社交（個人中心）每條列表可以是單挑的圖片形式或文本形式，也可以是圖文結(jié)合的方式。每條列表之間會用分割線進行區(qū)分，利用“緊密、對比、重復(fù)、對齊”的原則設(shè)計每條列表的信息，使得信息清晰有力的傳達給用戶。01、優(yōu)點（1）直觀地展現(xiàn)各項內(nèi)容。（2）能夠方便地瀏覽經(jīng)常更新的內(nèi)容02、缺點（1）不適合展現(xiàn)頂層入口框架（2）對界面內(nèi)容要求較高，否則顯得雜亂。（3）設(shè)計效果單一，容易呆板。知識點四：APP視覺設(shè)計4、抽屜式抽屜式導(dǎo)航的思路就是隱藏，隱藏非重要內(nèi)容。01、優(yōu)點（1）節(jié)省了頁面展示空間。（2）擴展性好，可以放置多個入口，而標簽欄只能放5個入口02、缺點（1）左上角小按鈕1具有隱