UI設(shè)計(jì)-從圖標(biāo)到界面完美解析第四章-按鈕、導(dǎo)航、控件的設(shè)計(jì)課件

從圖標(biāo)到界面完美解析UI設(shè)計(jì)從圖標(biāo)到界面完美解析UI設(shè)計(jì)1第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)

第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)

2CONTENTS目錄01按鈕的設(shè)計(jì)02頂部操作欄設(shè)計(jì)03導(dǎo)航欄設(shè)計(jì)04滑動條設(shè)計(jì)05對話框設(shè)計(jì)06下拉菜單設(shè)計(jì)07經(jīng)驗(yàn)總結(jié)08能力拓展CONTENTS目錄01按鈕的設(shè)計(jì)02頂部操作欄設(shè)計(jì)03導(dǎo)301按鈕的設(shè)計(jì)01按鈕的設(shè)計(jì)4第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)什么是按鈕？吸引人們點(diǎn)擊的欲望信息反饋用戶體驗(yàn)按鈕代表著“做某件事”，即點(diǎn)擊了按鈕代表著操作了一個功能。例如我們常用的播放器的播放暫停、搜索引擎的信息搜索、注冊登錄系統(tǒng)的登錄、注冊按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)什么是按鈕？吸引人5第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)01按鈕的顏色—比周圍顏色由更亮且高對比度的顏色。02言簡意賅—簡單直接03主次之分—視覺的優(yōu)先級別04面積—安全尺寸，大小適中。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)01按鈕的顏色—比6第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)0102扁平化按鈕設(shè)計(jì)擬物化按鈕設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)0102扁平化按鈕7第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕最簡潔的幾何圖形組合及清晰的顏色色彩扁平筆畫清晰簡潔的字體辨識度高扁平化是一種極簡主義的美術(shù)設(shè)計(jì)風(fēng)格，通過簡單的圖形、字體和顏色的組合，力求最快速、最直觀的設(shè)計(jì)意圖。扁平化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕最簡潔8第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化9第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化按鈕—實(shí)例演示4.1聲音開關(guān)按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化10第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：1、新建文件2、繪制前景色為#1fc627，寬度124px，高度42px，圓角半徑為21px的圓角矩形第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：11第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：3、為圓角矩形增加內(nèi)陰影（輕微的內(nèi)投影增加質(zhì)感）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：12第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：4、繪制按鈕中白色滑塊

（白色滑塊高度比外框小4px，使上下有2px間距）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：13第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：5、為滑塊增加樣式（增加滑塊的外陰影和漸變疊加#f0f0f0-#ffffff）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：14第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：6、增加文字（文字為白色，字體helveticaLTStd，蘋果系統(tǒng)中常使用的英文字體）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：15第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：7、修改矩形的底色，作為狀態(tài)2（雙擊鼠標(biāo)點(diǎn)擊處修改顏色，為#5a5a5a）按鈕通常存在交互關(guān)系，但大小風(fēng)格都應(yīng)該是一致，通常只是顏色、文字或者位置發(fā)生變化第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：16第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：8、移動滑塊圖層到合適位置，并修改文字，并改變投影方向及不透明度第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：17第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕視覺質(zhì)感模擬真實(shí)物體，認(rèn)知成本低放棄數(shù)字媒介的獨(dú)特優(yōu)勢擬物化設(shè)計(jì)顧名思義就是模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等效果對實(shí)物進(jìn)行再現(xiàn)，也可適當(dāng)程度變形和夸張，界面模擬直實(shí)物體，擬物設(shè)計(jì)會讓你第一眼就認(rèn)出這是個什么東西擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕視覺質(zhì)18第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕擬物化19第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)擬物化按鈕—實(shí)例演示4.2開關(guān)按鈕按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)擬物化按鈕—實(shí)例演示4.220第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建文件，畫布顏色為#dbdbdb2、繪制前景色為#fff，104*54px，圓角半徑為27px的圓角矩形按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建文件，畫布顏色21第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：3、增加圖層樣式漸變疊加（#9d9d9d-#ffffff）與內(nèi)投影按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：3、增加圖層樣式漸變疊22第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、復(fù)制底框圖層，選中路徑選擇工具（黑箭頭），在實(shí)時形狀屬性面板里設(shè)置寬度84px，高度28px，半徑14px。并通過對齊屬性垂直水平居中按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、復(fù)制底框圖層，選中23第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、選中該圖層，為圖層增加內(nèi)發(fā)光和內(nèi)投影效果。按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、選中該圖層，為圖層24第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、繪制滑塊：首先做底層，設(shè)置前景色#dbdbdb，繪制一個直徑為40px的圓，與底框垂直居中，距右邊相同距離。按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、繪制滑塊：首先做底25第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加圖層樣式：為該圖層增加投影和漸變疊加（#8d8d8d-#ffffff）按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加圖層樣式：為該26第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制滑塊表面：復(fù)制滑塊底圖層，刪除其圖層樣式，并通過快捷鍵CTRL+T變形，同時按住shift和alt鍵同比例縮放至直徑為34px。按鈕的設(shè)計(jì)—擬物化按鈕9、增加漸變疊加（#d0d0d0-#ffffff）。10、增加文字及樣式。11、完成off狀態(tài)。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制滑塊表面：復(fù)制2702頂部操作欄設(shè)計(jì)02頂部操作欄設(shè)計(jì)28第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)狀態(tài)欄正下方標(biāo)識當(dāng)前界面或站點(diǎn)內(nèi)容可以始終顯示或者隱藏應(yīng)含有當(dāng)前界面的標(biāo)題可包含返回及退出、分享控件在頁眉的導(dǎo)航欄中，應(yīng)避免顯示過多元素，因?yàn)槭謾C(jī)界面有限，元素過多，主要內(nèi)容只能下移，降低了頁面的可讀性。頂部操作欄頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)狀態(tài)欄正下方在頁眉的導(dǎo)航欄中29第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作條通常設(shè)置高為88px返回鍵和功能鍵距離邊框的安全距離為20px標(biāo)題居中顯示，字體大小為36-40px按鈕的高度不超過60px蘋果系統(tǒng)標(biāo)題常用默認(rèn)字體為“方正黑體簡”英語及數(shù)字字體為“helvtica”在頂部操作欄可以有更多，搜索，分享，記錄，增加，返回一些功能性操作。比較重要的一點(diǎn)是要注意常用尺寸及安全距離。上面以5s的尺寸作代表，將常用的尺寸及安全距離做介紹。圖為IOS默認(rèn)的頂部操作欄模式頂部操作欄頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作條通常設(shè)置高為88p30第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄設(shè)計(jì)頂部操作欄第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄設(shè)計(jì)頂部操作欄31第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄—實(shí)例演示4.3頂部操作欄效果圖頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄—實(shí)例演示4.332第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*88像素畫布，分辨率為72，背景顏色任意2、選擇矩形工具，創(chuàng)建一個640*88的矩形3、為矩形增加漸變疊加樣式。頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*88像33第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制640*4的矩形移動到底部，填充色#41aa655、繪制返回按鈕：78*50，半徑為8px的圓角矩形。合并形狀狀態(tài)下，選擇多邊形工具的3邊，繪制三角形，22*46，移動到合適位置頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制640*4的矩34第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、為按鈕添加漸變疊加、內(nèi)投影、投影、描邊效果頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、為按鈕添加漸變疊加35第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加文字，大小22，顏色為白色，增加適當(dāng)投影頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加文字，大小2236第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制設(shè)置按鈕：48*48，半徑8px，增加漸變顏色，與輕微投影頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制設(shè)置按鈕：4837第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：9、繪制齒輪：24*24正圓，填充白色，再繪制6*30半徑2px的圓形矩形，通過連續(xù)復(fù)制位移直到變形完成。10、繪制14*14正圓，通過減去頂層形狀，完成齒輪基本型頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：9、繪制齒輪：24*238第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：11、為齒輪添加輕微投影12、增加標(biāo)題title，大小40px，顏色為#fff，增加投影效果，完成效果圖。頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：11、為齒輪添加輕微投3903導(dǎo)航欄設(shè)計(jì)03導(dǎo)航欄設(shè)計(jì)40第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)標(biāo)簽式導(dǎo)航列表式導(dǎo)航九宮格導(dǎo)航抽屜式導(dǎo)航導(dǎo)航在頁面中是非常重要的，可以清晰的引導(dǎo)用戶去想去的模塊。導(dǎo)航欄設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)標(biāo)簽式導(dǎo)航導(dǎo)航在頁面中是非常41第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)將重要的導(dǎo)航控件及操作控件放在頁腳或欄目條下面的位置，方便用戶輕松觸及并執(zhí)行操作。多種表現(xiàn)形式，可以是圖標(biāo)，可以是文字，可以文字加圖標(biāo)。標(biāo)簽式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)將重要的導(dǎo)航控件及操作控件放42第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這種導(dǎo)航可以隱藏可以不隱藏，可以滑動，多見于資訊雜志類及社交應(yīng)用類側(cè)滑式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這種導(dǎo)航可以隱藏可以不隱藏，43第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)可以是單文字的，也可以是圖文結(jié)合的，如設(shè)置頁面，也可以和其他導(dǎo)航一起使用列表式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)可以是單文字的，也可以是圖文44第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這類導(dǎo)航首頁沒有實(shí)際的內(nèi)容，只有幾個欄目顯示，與內(nèi)容為主的趨勢相悖，最典型的是美圖類應(yīng)用，如美圖秀秀，魔拍，二級欄目中也常用使用九宮格式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這類導(dǎo)航首頁沒有實(shí)際的內(nèi)容，45第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例演示4.4頂部操作欄效果圖導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例演示4.446第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例分析導(dǎo)航欄設(shè)計(jì)導(dǎo)航欄高度98px5個欄目，平均分配，每個欄目寬度128px交互時，改變背景色，文字標(biāo)簽和圖標(biāo)顏色圖標(biāo)大小適中統(tǒng)一32px，文字大小20px，第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例分析導(dǎo)航欄設(shè)47第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*98，分辨率72的畫布，前景色#0c0c0c2、計(jì)算標(biāo)簽尺寸3、繪制鬧鐘：通過布爾運(yùn)算制作圓環(huán)；（參考前面的案例）4、繪制時針分針：2個半徑為1的圓角矩形，填充#909090，放置到圓中心5、制作鬧鐘小耳朵：繪制12*12的2個正圓放置到圓環(huán)下方6、制作通過減去頂層制作鏤空7、制作文字，與底邊距離20px導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*98，48第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、按照相同方法繪制其他欄目圖標(biāo)9、制作交互：背景改為#212121，文字和圖標(biāo)顏色為#fff導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、按照相同方法繪制其4904滑動條設(shè)計(jì)04滑動條設(shè)計(jì)50第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條是由滑槽與其中的把手組成的UI控件，用戶可以通過移動把手，改變相關(guān)的狀態(tài)。滑塊通常為水平顯示（也有縱向顯示，環(huán)狀模式），左端是最小值，右端為最大值?；瑝K的整個可選范圍都處于界面中?；瑒訔l的設(shè)計(jì)可以應(yīng)用到進(jìn)度條，通話音量控制，屏幕亮度調(diào)整，播放進(jìn)度等等在ios的設(shè)計(jì)規(guī)范中介紹了滑動條，他將用于顯示及調(diào)整當(dāng)前值的把手稱為突鈕，將顯示值的滑槽稱為軌道滑動條設(shè)計(jì)滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條是由滑槽與其中的把手組51第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)滑動條設(shè)計(jì)52第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例演示4.5滑動條案例滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例演示4.553第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例分析滑動條設(shè)計(jì)用戶可以通過滑塊修改與時間或進(jìn)度相關(guān)的視頻和音頻播放器適用滑塊有最大值和最小值把手的位置隨著播放進(jìn)行而移動用戶可以通過滑槽位置查看當(dāng)前播放狀態(tài)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例分析滑動條設(shè)54第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建400*58px，分辨率72的畫布，前景色#fff2、繪制360*18，半徑為9px的圓角矩形3、為該矩形增加描邊、漸變疊加、投影效果滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建400*58p55第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制進(jìn)度條：復(fù)制底框圖層，修改實(shí)時形狀屬性參數(shù)為寬256px，高10px，半徑為5px，填充色為#44b5df5、進(jìn)度條增加內(nèi)投影、投影樣式滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制進(jìn)度條：復(fù)制底56第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、橢圓工具，繪制一個24*24的正圓，填充色為#ffffff7、選擇滑塊圖層，粘貼底框的圖層樣式8、復(fù)制滑塊圖層，修改其大小至10*10px，修改填充色為#44b5df，圖層樣式參數(shù)與進(jìn)度條一致9、設(shè)置時間文字，完成效果圖滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、橢圓工具，繪制一個5705對話框的設(shè)計(jì)05對話框的設(shè)計(jì)58第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)

在app中的視覺設(shè)計(jì)沿用了我們?nèi)粘５臏贤Ｊ?。我們的社交方式無外乎2種，對話框設(shè)計(jì)對話框設(shè)計(jì)直接溝通方式間接溝通方式第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)在app中的視59第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)直接溝通類似與面對面交談，呈現(xiàn)方式為對話形式。如移動設(shè)備上自帶的短信功能，便具備了對話與交流的形式感，還有我們常用的qq對話，微信對話直接溝通對話框設(shè)計(jì)對話層次表現(xiàn)得更加直接體會到社交的樂趣與交流的通暢。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)直接溝通類似與面對面交談，呈60第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)間接溝通通常是指通過平臺將自身的心情，狀態(tài)進(jìn)行發(fā)布，其他用戶瀏覽后的反饋信息。這樣的溝通方式，減弱了溝通的即時感和交流感。如朋友圈，qq動態(tài)，微博等等間接溝通對話框設(shè)計(jì)注意用合理的界面去展示記錄著的心情或者狀態(tài)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)間接溝通通常是指通過平臺將自61第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框其他風(fēng)格設(shè)計(jì)方式對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框其他風(fēng)格設(shè)計(jì)方式對話框62第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例演示4.5對話框效果圖對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例演示4.563第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例分析對話框設(shè)計(jì)安全距離：頭像距界面邊框20px，2個對話之間的距離為40px。設(shè)計(jì)為氣泡模式，模擬人說話的感覺，這種模式使用戶能立馬明白對話的意圖。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例分析對話框設(shè)64第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*800像素，分辨率72的畫布2、新建圖層，填充顏色#343e4c，添加濾鏡-雜色-增加雜色，高斯分布，數(shù)量選擇1%。3、繪制日期分割線及投影，文字大小16px，#242930對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*80065第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制對方頭像，86*86的正圓，頭像圖層應(yīng)用“創(chuàng)建剪貼蒙版”，并設(shè)置投影及斜面浮雕對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制對方頭像，8666第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、繪制對話框：高75px，任意寬度，半徑為5px，顏色#242930的圓角矩形，并在如圖所示位置繪制三角形，并合并形狀。6、為該組合圖形增加內(nèi)投影及投影對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、繪制對話框：高7567第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、輸入文字，增加文字投影。7、同樣的方式完成效果圖對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、輸入文字，增加文字6806下拉菜單的設(shè)計(jì)06下拉菜單的設(shè)計(jì)69第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)下拉菜單設(shè)計(jì)下拉菜單設(shè)計(jì)側(cè)拉式下滑式上滑式下拉菜單是用于用戶自由選擇選項(xiàng)的通道。不管采用什么滑動方式，風(fēng)格一定是統(tǒng)一于整個UI界面設(shè)計(jì)的風(fēng)格的（包括文字、背景、色彩等）。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)下拉菜單設(shè)計(jì)下拉菜單設(shè)計(jì)側(cè)拉70第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)下拉菜單設(shè)計(jì)—實(shí)例演示4.6下拉菜單效果圖下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)下拉菜單設(shè)計(jì)—實(shí)例演示4.71第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)下拉菜單設(shè)計(jì)—實(shí)例分析下拉菜單設(shè)計(jì)黑白灰三種顏色構(gòu)成，以灰黑漸變?yōu)橹饔姓归_二級欄目狀態(tài)包含文字、小箭頭圖標(biāo)，箭頭有2個狀態(tài)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)下拉菜單設(shè)計(jì)—實(shí)例分析下拉菜72第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建219*410像素，分辨率72的畫布2、菜單一級欄目和二級欄目共10個，平分為10等分。下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建219*41073第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：3、繪制父欄目：將矩形增加漸變疊加，增加欄目的光澤感。4、增加浮雕、投影、增強(qiáng)立體感。下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：3、繪制父欄目：將矩形74第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、繪制箭頭：用【矩形工具】繪制一個半圓角的矩形，旋轉(zhuǎn)45度角，再用【路徑選擇工具】將其選中，按Ctrl+C與Ctrl+V進(jìn)行復(fù)制粘貼。在用【自由變換工具】設(shè)置“水平翻轉(zhuǎn)”，接著放到相應(yīng)位置上，完成箭頭繪制下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、繪制箭頭：用【矩形75第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、設(shè)置箭頭的凹陷效果：下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、設(shè)置箭頭的凹陷效果76第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、復(fù)制多個父欄目放到合適位置，并將箭頭旋轉(zhuǎn)90度8、完成對子欄目的設(shè)置：各欄目是被一條凹陷效果的線分割。繪制多個矩形，并選擇按高度均勻分布。下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、復(fù)制多個父欄目放到77第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：9、對分割線設(shè)置凹陷效果10、輸入文字，父欄目為加粗效果，子欄目為常規(guī)粗細(xì)下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：9、對分割線設(shè)置凹陷效78第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：11、繪制欄目后面“數(shù)量”部分，并設(shè)置凹陷效果，只有個位數(shù)字的背景為“橢圓形”，其它為圓角矩形。12、修改文字完成最后效果圖下拉菜單設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：11、繪制欄目后面“數(shù)7907經(jīng)驗(yàn)總結(jié)07經(jīng)驗(yàn)總結(jié)80第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)經(jīng)驗(yàn)總結(jié)經(jīng)驗(yàn)總結(jié)為app設(shè)計(jì)任意控件及按鈕時，建議最好使用形狀工具繪制，因?yàn)槭噶啃螤畹膬?yōu)點(diǎn)，當(dāng)要適應(yīng)各個不同尺寸的終端時，比較好改變大小?？墒琼撁嬷行螤罱徊嫦鄬?fù)雜時，使用PhotoshopCC以上版本可以比較輕松操作，只需要選擇調(diào)整圖層的形狀路徑并左鍵雙擊，即可打開形狀路徑單獨(dú)調(diào)整第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)經(jīng)驗(yàn)總結(jié)經(jīng)驗(yàn)總結(jié)為app設(shè)計(jì)81經(jīng)驗(yàn)總結(jié)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)與系統(tǒng)標(biāo)準(zhǔn)圖標(biāo)區(qū)分開設(shè)計(jì)規(guī)則配色柔和協(xié)調(diào)外表美觀風(fēng)格統(tǒng)一易懂易理解簡單富有流線感避免尖角一致性01020304050607經(jīng)驗(yàn)總結(jié)經(jīng)驗(yàn)總結(jié)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)與系統(tǒng)標(biāo)準(zhǔn)圖標(biāo)區(qū)分開8208能力拓展08能力拓展83第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)1能力拓展第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)1能力拓展84第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)2能力拓展第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)2能力拓展85第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)3能力拓展第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)3能力拓展86第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)4能力拓展第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)4能力拓展87第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)5能力拓展第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)能力拓展—練習(xí)5能力拓展88ThankYOU感謝您的聆聽ThankYOU感謝您的聆聽89謝謝！供婁浪頹藍(lán)辣襖駒靴鋸瀾互慌仲寫繹衰斡染圾明將呆則孰盆瘸砒腥悉漠塹脊髓灰質(zhì)炎(講課2019)脊髓灰質(zhì)炎(講課2019)謝謝！供婁浪頹藍(lán)辣襖駒靴鋸瀾互慌仲寫繹衰斡染圾明將呆則孰盆瘸從圖標(biāo)到界面完美解析UI設(shè)計(jì)從圖標(biāo)到界面完美解析UI設(shè)計(jì)91第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)

第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)

92CONTENTS目錄01按鈕的設(shè)計(jì)02頂部操作欄設(shè)計(jì)03導(dǎo)航欄設(shè)計(jì)04滑動條設(shè)計(jì)05對話框設(shè)計(jì)06下拉菜單設(shè)計(jì)07經(jīng)驗(yàn)總結(jié)08能力拓展CONTENTS目錄01按鈕的設(shè)計(jì)02頂部操作欄設(shè)計(jì)03導(dǎo)9301按鈕的設(shè)計(jì)01按鈕的設(shè)計(jì)94第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)什么是按鈕？吸引人們點(diǎn)擊的欲望信息反饋用戶體驗(yàn)按鈕代表著“做某件事”，即點(diǎn)擊了按鈕代表著操作了一個功能。例如我們常用的播放器的播放暫停、搜索引擎的信息搜索、注冊登錄系統(tǒng)的登錄、注冊按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)什么是按鈕？吸引人95第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)01按鈕的顏色—比周圍顏色由更亮且高對比度的顏色。02言簡意賅—簡單直接03主次之分—視覺的優(yōu)先級別04面積—安全尺寸，大小適中。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)01按鈕的顏色—比96第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)0102扁平化按鈕設(shè)計(jì)擬物化按鈕設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)0102扁平化按鈕97第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕最簡潔的幾何圖形組合及清晰的顏色色彩扁平筆畫清晰簡潔的字體辨識度高扁平化是一種極簡主義的美術(shù)設(shè)計(jì)風(fēng)格，通過簡單的圖形、字體和顏色的組合，力求最快速、最直觀的設(shè)計(jì)意圖。扁平化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕最簡潔98第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化99第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化按鈕—實(shí)例演示4.1聲音開關(guān)按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕扁平化100第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：1、新建文件2、繪制前景色為#1fc627，寬度124px，高度42px，圓角半徑為21px的圓角矩形第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：101第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：3、為圓角矩形增加內(nèi)陰影（輕微的內(nèi)投影增加質(zhì)感）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：102第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：4、繪制按鈕中白色滑塊

（白色滑塊高度比外框小4px，使上下有2px間距）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：103第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：5、為滑塊增加樣式（增加滑塊的外陰影和漸變疊加#f0f0f0-#ffffff）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：104第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：6、增加文字（文字為白色，字體helveticaLTStd，蘋果系統(tǒng)中常使用的英文字體）第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：105第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：7、修改矩形的底色，作為狀態(tài)2（雙擊鼠標(biāo)點(diǎn)擊處修改顏色，為#5a5a5a）按鈕通常存在交互關(guān)系，但大小風(fēng)格都應(yīng)該是一致，通常只是顏色、文字或者位置發(fā)生變化第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：106第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：8、移動滑塊圖層到合適位置，并修改文字，并改變投影方向及不透明度第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—扁平化按鈕步驟：107第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕視覺質(zhì)感模擬真實(shí)物體，認(rèn)知成本低放棄數(shù)字媒介的獨(dú)特優(yōu)勢擬物化設(shè)計(jì)顧名思義就是模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等效果對實(shí)物進(jìn)行再現(xiàn)，也可適當(dāng)程度變形和夸張，界面模擬直實(shí)物體，擬物設(shè)計(jì)會讓你第一眼就認(rèn)出這是個什么東西擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕視覺質(zhì)108第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)按鈕的設(shè)計(jì)—擬物化按鈕擬物化109第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)擬物化按鈕—實(shí)例演示4.2開關(guān)按鈕按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)擬物化按鈕—實(shí)例演示4.2110第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建文件，畫布顏色為#dbdbdb2、繪制前景色為#fff，104*54px，圓角半徑為27px的圓角矩形按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建文件，畫布顏色111第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：3、增加圖層樣式漸變疊加（#9d9d9d-#ffffff）與內(nèi)投影按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：3、增加圖層樣式漸變疊112第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、復(fù)制底框圖層，選中路徑選擇工具（黑箭頭），在實(shí)時形狀屬性面板里設(shè)置寬度84px，高度28px，半徑14px。并通過對齊屬性垂直水平居中按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、復(fù)制底框圖層，選中113第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、選中該圖層，為圖層增加內(nèi)發(fā)光和內(nèi)投影效果。按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、選中該圖層，為圖層114第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、繪制滑塊：首先做底層，設(shè)置前景色#dbdbdb，繪制一個直徑為40px的圓，與底框垂直居中，距右邊相同距離。按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、繪制滑塊：首先做底115第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加圖層樣式：為該圖層增加投影和漸變疊加（#8d8d8d-#ffffff）按鈕的設(shè)計(jì)—擬物化按鈕第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加圖層樣式：為該116第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制滑塊表面：復(fù)制滑塊底圖層，刪除其圖層樣式，并通過快捷鍵CTRL+T變形，同時按住shift和alt鍵同比例縮放至直徑為34px。按鈕的設(shè)計(jì)—擬物化按鈕9、增加漸變疊加（#d0d0d0-#ffffff）。10、增加文字及樣式。11、完成off狀態(tài)。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制滑塊表面：復(fù)制11702頂部操作欄設(shè)計(jì)02頂部操作欄設(shè)計(jì)118第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)狀態(tài)欄正下方標(biāo)識當(dāng)前界面或站點(diǎn)內(nèi)容可以始終顯示或者隱藏應(yīng)含有當(dāng)前界面的標(biāo)題可包含返回及退出、分享控件在頁眉的導(dǎo)航欄中，應(yīng)避免顯示過多元素，因?yàn)槭謾C(jī)界面有限，元素過多，主要內(nèi)容只能下移，降低了頁面的可讀性。頂部操作欄頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)狀態(tài)欄正下方在頁眉的導(dǎo)航欄中119第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作條通常設(shè)置高為88px返回鍵和功能鍵距離邊框的安全距離為20px標(biāo)題居中顯示，字體大小為36-40px按鈕的高度不超過60px蘋果系統(tǒng)標(biāo)題常用默認(rèn)字體為“方正黑體簡”英語及數(shù)字字體為“helvtica”在頂部操作欄可以有更多，搜索，分享，記錄，增加，返回一些功能性操作。比較重要的一點(diǎn)是要注意常用尺寸及安全距離。上面以5s的尺寸作代表，將常用的尺寸及安全距離做介紹。圖為IOS默認(rèn)的頂部操作欄模式頂部操作欄頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作條通常設(shè)置高為88p120第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄設(shè)計(jì)頂部操作欄第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄設(shè)計(jì)頂部操作欄121第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄—實(shí)例演示4.3頂部操作欄效果圖頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)頂部操作欄—實(shí)例演示4.3122第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*88像素畫布，分辨率為72，背景顏色任意2、選擇矩形工具，創(chuàng)建一個640*88的矩形3、為矩形增加漸變疊加樣式。頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*88像123第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制640*4的矩形移動到底部，填充色#41aa655、繪制返回按鈕：78*50，半徑為8px的圓角矩形。合并形狀狀態(tài)下，選擇多邊形工具的3邊，繪制三角形，22*46，移動到合適位置頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制640*4的矩124第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、為按鈕添加漸變疊加、內(nèi)投影、投影、描邊效果頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、為按鈕添加漸變疊加125第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加文字，大小22，顏色為白色，增加適當(dāng)投影頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：7、增加文字，大小22126第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制設(shè)置按鈕：48*48，半徑8px，增加漸變顏色，與輕微投影頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、繪制設(shè)置按鈕：48127第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：9、繪制齒輪：24*24正圓，填充白色，再繪制6*30半徑2px的圓形矩形，通過連續(xù)復(fù)制位移直到變形完成。10、繪制14*14正圓，通過減去頂層形狀，完成齒輪基本型頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：9、繪制齒輪：24*2128第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：11、為齒輪添加輕微投影12、增加標(biāo)題title，大小40px，顏色為#fff，增加投影效果，完成效果圖。頂部操作欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：11、為齒輪添加輕微投12903導(dǎo)航欄設(shè)計(jì)03導(dǎo)航欄設(shè)計(jì)130第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)標(biāo)簽式導(dǎo)航列表式導(dǎo)航九宮格導(dǎo)航抽屜式導(dǎo)航導(dǎo)航在頁面中是非常重要的，可以清晰的引導(dǎo)用戶去想去的模塊。導(dǎo)航欄設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)標(biāo)簽式導(dǎo)航導(dǎo)航在頁面中是非常131第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)將重要的導(dǎo)航控件及操作控件放在頁腳或欄目條下面的位置，方便用戶輕松觸及并執(zhí)行操作。多種表現(xiàn)形式，可以是圖標(biāo)，可以是文字，可以文字加圖標(biāo)。標(biāo)簽式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)將重要的導(dǎo)航控件及操作控件放132第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這種導(dǎo)航可以隱藏可以不隱藏，可以滑動，多見于資訊雜志類及社交應(yīng)用類側(cè)滑式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這種導(dǎo)航可以隱藏可以不隱藏，133第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)可以是單文字的，也可以是圖文結(jié)合的，如設(shè)置頁面，也可以和其他導(dǎo)航一起使用列表式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)可以是單文字的，也可以是圖文134第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這類導(dǎo)航首頁沒有實(shí)際的內(nèi)容，只有幾個欄目顯示，與內(nèi)容為主的趨勢相悖，最典型的是美圖類應(yīng)用，如美圖秀秀，魔拍，二級欄目中也常用使用九宮格式導(dǎo)航設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)這類導(dǎo)航首頁沒有實(shí)際的內(nèi)容，135第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例演示4.4頂部操作欄效果圖導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例演示4.4136第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例分析導(dǎo)航欄設(shè)計(jì)導(dǎo)航欄高度98px5個欄目，平均分配，每個欄目寬度128px交互時，改變背景色，文字標(biāo)簽和圖標(biāo)顏色圖標(biāo)大小適中統(tǒng)一32px，文字大小20px，第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)—實(shí)例分析導(dǎo)航欄設(shè)137第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*98，分辨率72的畫布，前景色#0c0c0c2、計(jì)算標(biāo)簽尺寸3、繪制鬧鐘：通過布爾運(yùn)算制作圓環(huán)；（參考前面的案例）4、繪制時針分針：2個半徑為1的圓角矩形，填充#909090，放置到圓中心5、制作鬧鐘小耳朵：繪制12*12的2個正圓放置到圓環(huán)下方6、制作通過減去頂層制作鏤空7、制作文字，與底邊距離20px導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*98，138第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、按照相同方法繪制其他欄目圖標(biāo)9、制作交互：背景改為#212121，文字和圖標(biāo)顏色為#fff導(dǎo)航欄設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：8、按照相同方法繪制其13904滑動條設(shè)計(jì)04滑動條設(shè)計(jì)140第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條是由滑槽與其中的把手組成的UI控件，用戶可以通過移動把手，改變相關(guān)的狀態(tài)?；瑝K通常為水平顯示（也有縱向顯示，環(huán)狀模式），左端是最小值，右端為最大值。滑塊的整個可選范圍都處于界面中?；瑒訔l的設(shè)計(jì)可以應(yīng)用到進(jìn)度條，通話音量控制，屏幕亮度調(diào)整，播放進(jìn)度等等在ios的設(shè)計(jì)規(guī)范中介紹了滑動條，他將用于顯示及調(diào)整當(dāng)前值的把手稱為突鈕，將顯示值的滑槽稱為軌道滑動條設(shè)計(jì)滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條是由滑槽與其中的把手組141第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)滑動條設(shè)計(jì)142第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例演示4.5滑動條案例滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例演示4.5143第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例分析滑動條設(shè)計(jì)用戶可以通過滑塊修改與時間或進(jìn)度相關(guān)的視頻和音頻播放器適用滑塊有最大值和最小值把手的位置隨著播放進(jìn)行而移動用戶可以通過滑槽位置查看當(dāng)前播放狀態(tài)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)滑動條設(shè)計(jì)—實(shí)例分析滑動條設(shè)144第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建400*58px，分辨率72的畫布，前景色#fff2、繪制360*18，半徑為9px的圓角矩形3、為該矩形增加描邊、漸變疊加、投影效果滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建400*58p145第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制進(jìn)度條：復(fù)制底框圖層，修改實(shí)時形狀屬性參數(shù)為寬256px，高10px，半徑為5px，填充色為#44b5df5、進(jìn)度條增加內(nèi)投影、投影樣式滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制進(jìn)度條：復(fù)制底146第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、橢圓工具，繪制一個24*24的正圓，填充色為#ffffff7、選擇滑塊圖層，粘貼底框的圖層樣式8、復(fù)制滑塊圖層，修改其大小至10*10px，修改填充色為#44b5df，圖層樣式參數(shù)與進(jìn)度條一致9、設(shè)置時間文字，完成效果圖滑動條設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、橢圓工具，繪制一個14705對話框的設(shè)計(jì)05對話框的設(shè)計(jì)148第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)

在app中的視覺設(shè)計(jì)沿用了我們?nèi)粘５臏贤Ｊ?。我們的社交方式無外乎2種，對話框設(shè)計(jì)對話框設(shè)計(jì)直接溝通方式間接溝通方式第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)在app中的視149第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)直接溝通類似與面對面交談，呈現(xiàn)方式為對話形式。如移動設(shè)備上自帶的短信功能，便具備了對話與交流的形式感，還有我們常用的qq對話，微信對話直接溝通對話框設(shè)計(jì)對話層次表現(xiàn)得更加直接體會到社交的樂趣與交流的通暢。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)直接溝通類似與面對面交談，呈150第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)間接溝通通常是指通過平臺將自身的心情，狀態(tài)進(jìn)行發(fā)布，其他用戶瀏覽后的反饋信息。這樣的溝通方式，減弱了溝通的即時感和交流感。如朋友圈，qq動態(tài)，微博等等間接溝通對話框設(shè)計(jì)注意用合理的界面去展示記錄著的心情或者狀態(tài)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)間接溝通通常是指通過平臺將自151第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框其他風(fēng)格設(shè)計(jì)方式對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框其他風(fēng)格設(shè)計(jì)方式對話框152第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例演示4.5對話框效果圖對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例演示4.5153第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例分析對話框設(shè)計(jì)安全距離：頭像距界面邊框20px，2個對話之間的距離為40px。設(shè)計(jì)為氣泡模式，模擬人說話的感覺，這種模式使用戶能立馬明白對話的意圖。第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)對話框設(shè)計(jì)—實(shí)例分析對話框設(shè)154第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*800像素，分辨率72的畫布2、新建圖層，填充顏色#343e4c，添加濾鏡-雜色-增加雜色，高斯分布，數(shù)量選擇1%。3、繪制日期分割線及投影，文字大小16px，#242930對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：1、新建640*800155第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制對方頭像，86*86的正圓，頭像圖層應(yīng)用“創(chuàng)建剪貼蒙版”，并設(shè)置投影及斜面浮雕對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：4、繪制對方頭像，86156第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、繪制對話框：高75px，任意寬度，半徑為5px，顏色#242930的圓角矩形，并在如圖所示位置繪制三角形，并合并形狀。6、為該組合圖形增加內(nèi)投影及投影對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：5、繪制對話框：高75157第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、輸入文字，增加文字投影。7、同樣的方式完成效果圖對話框設(shè)計(jì)第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)步驟：6、輸入文字，增加文字15806下拉菜單的設(shè)計(jì)06下拉菜單的設(shè)計(jì)159第四章按鈕、導(dǎo)航、控件的設(shè)計(jì)下拉菜單設(shè)計(jì)下拉菜單設(shè)計(jì)側(cè)拉式下滑