《ui界面設(shè)計(jì)》課件 項(xiàng)目2 移動(dòng)端App界面設(shè)計(jì)

UI界面設(shè)計(jì)USERINTERFACE項(xiàng)目2移動(dòng)端App界面設(shè)計(jì)實(shí)訓(xùn)任務(wù)2.1手機(jī)界面設(shè)計(jì)基礎(chǔ)規(guī)范畫畫App界面的

COMPONENTSOFTHEINTERFACE狀態(tài)欄標(biāo)簽欄主顯示區(qū)導(dǎo)航欄手機(jī)界面規(guī)范App界面控件規(guī)范界面規(guī)范文字參數(shù)手機(jī)界面基礎(chǔ)手機(jī)界面基礎(chǔ)AB字號(hào)中文：思源黑體

英文：robot

偶數(shù)單位24pt,28pt,36pt等字體：App安卓界面中文字參數(shù)（1）打開【PS】，新建【1080*1920】的畫布，并劃分出【狀態(tài)欄】、【標(biāo)簽欄】、【導(dǎo)航欄】，如圖所示App安卓界面制作步驟-1（2）給【狀態(tài)欄】和【標(biāo)簽欄】填充顏色，并繪制【狀態(tài)欄】和【標(biāo)簽欄】的內(nèi)容，如圖所示。App安卓界面制作步驟-2（3）將廣告圖片和功能圖標(biāo)【復(fù)制】到Banner區(qū)域。（4）添加【主顯示區(qū)】的其它元素。（5）繪制【導(dǎo)航欄】按鈕和圖標(biāo)。App安卓界面制作步驟-31.重要性：色彩往往給人以鮮明的第一印象。2.色彩三屬性:色相、明度、純度3.色彩情感和視覺感受4.配色方案：同種色、同類色、鄰近色、對(duì)比色等5.色彩策略實(shí)訓(xùn)任務(wù)2.2UI配色方案

色彩是一個(gè)品牌給人的第一印象。營(yíng)銷界有個(gè)著名的“7秒定律”，即消費(fèi)者在7秒內(nèi)就可以確定是否有購(gòu)買商品的意愿。如果第一眼沒有被吸引住就很難對(duì)產(chǎn)品有進(jìn)一步了解的欲望。而在這短短7秒內(nèi)，色彩的決定因素占到67%。大部分初次接觸產(chǎn)品的消費(fèi)者會(huì)在90秒內(nèi)決定是否購(gòu)買，而這個(gè)評(píng)估中62%-90%是基于顏色。“7秒定律”色彩重要性色彩三屬性——色相、明度、純度色彩情感和視覺感受色彩是富于情感的色彩情感和視覺感受紅色黃色色彩情感和視覺感受藍(lán)色綠色色彩情感和視覺感受橙色紫色色彩情感和視覺感受黑色灰色色彩情感和視覺感受咖啡色金屬色實(shí)訓(xùn)任務(wù)2.3App頂部導(dǎo)航欄設(shè)計(jì)

畫畫導(dǎo)航欄是指位于頁(yè)面頂部或者側(cè)邊區(qū)域的，在頁(yè)眉橫幅圖片上邊或下邊的一排水平導(dǎo)航按鈕，它起著鏈接站點(diǎn)或者軟件內(nèi)的各個(gè)頁(yè)面的作用。手機(jī)界面導(dǎo)航手機(jī)界面導(dǎo)航畫畫App導(dǎo)航欄作用？導(dǎo)航欄是用來(lái)幫助用戶定位、導(dǎo)航、操作的基礎(chǔ)組件;首頁(yè)導(dǎo)航欄就是一級(jí)導(dǎo)航欄，由首頁(yè)導(dǎo)航欄中點(diǎn)開的界面就是二級(jí)頁(yè)面。手機(jī)界面導(dǎo)航整個(gè)導(dǎo)航欄通常分為左、中、右三部分，左側(cè)和右側(cè)主要用來(lái)放置功能控件，中間部分主要用來(lái)放置文字標(biāo)題或者搜索，接下里展開分析左中右三部分的構(gòu)成。一級(jí)導(dǎo)航欄中間經(jīng)常能看到搜索框，然后搜索框左右兩邊放置其他的控件。當(dāng)導(dǎo)航欄的內(nèi)容太多，比如有文字標(biāo)題、頭像、按鈕等控件，搜索欄和這些控件可能無(wú)法并排放置時(shí)，可以將搜索欄橫向拉長(zhǎng)，放在下一行單獨(dú)展示?，F(xiàn)在淘寶App首頁(yè)的導(dǎo)航欄就做成了兩行，上一行用來(lái)放置文字標(biāo)題和功能圖標(biāo)，搜素欄集合掃碼、拍照等功能單獨(dú)作為一行。我們?cè)谑褂卯a(chǎn)品的過程中會(huì)發(fā)現(xiàn)，App的導(dǎo)航欄或多或少都存在一些設(shè)計(jì)上的差異。二級(jí)導(dǎo)航常見的還有在中間使用加粗的文字作為標(biāo)題，也可以使用主標(biāo)題+副標(biāo)題的形式來(lái)展示更多的信息。手機(jī)界面導(dǎo)航畫畫導(dǎo)航欄設(shè)計(jì)樣式？導(dǎo)航欄樣式分為通欄和非通欄，通欄就是通到頁(yè)面最頂部的通欄。非通欄的設(shè)計(jì)是整個(gè)導(dǎo)航欄跟整Banner之間有明顯分界。我們可以結(jié)合站在產(chǎn)品和用戶客戶的角度來(lái)看，思考整個(gè)導(dǎo)航欄。我們把導(dǎo)航欄做成通欄的時(shí)候，Banner更加細(xì)膩的，導(dǎo)航欄上的功能入口,比如掃一掃啊，搜索啊，包括消息視覺層面上變得更加弱了。手機(jī)界面導(dǎo)航手機(jī)界面導(dǎo)航App導(dǎo)航欄設(shè)計(jì)注意事項(xiàng)文字、搜索框和圖標(biāo)的大小尺寸與距離合理文字圖標(biāo)搜索框手機(jī)界面導(dǎo)航畫畫App導(dǎo)航欄文字字號(hào)文字字號(hào)，一級(jí)導(dǎo)航搜索框內(nèi)的文字一般28像素，圖標(biāo)的文字18像素；二級(jí)導(dǎo)航標(biāo)題文字，在兩倍圖750乘1334的作圖尺寸下，我們會(huì)把它做成36像素；文字層級(jí)間隔大于4像素；手機(jī)界面導(dǎo)航畫畫手機(jī)界面導(dǎo)航畫畫App導(dǎo)航欄搜索框

手機(jī)界面導(dǎo)航畫畫App導(dǎo)航欄元素間距

Banner就是海報(bào)、招貼，直譯通欄廣告圖2-8Banner效果圖2-9Banner效果實(shí)訓(xùn)任務(wù)2.4App-Banner設(shè)計(jì)首先，我們要清楚我們的設(shè)計(jì)目的不論你做的多么漂亮，多么炫酷，多么華麗，多么￥#@……沒用！設(shè)計(jì)是為了信息傳達(dá)！用戶高效得到信息才是設(shè)計(jì)的初衷2秒原則互聯(lián)網(wǎng)上的廣告圖，只有2秒的生存時(shí)間。要么被忽視，要么被關(guān)閉，要么被點(diǎn)擊。so...在2秒內(nèi)把你想要說(shuō)的事情說(shuō)完！特別對(duì)于商城類的，用戶沒時(shí)間看你的大作，只是來(lái)買東西而已。Banner的結(jié)構(gòu)2.2.2Banner的結(jié)構(gòu)圖2-10Banner的結(jié)構(gòu)1.商品層—商品的清晰度圖片質(zhì)量對(duì)于網(wǎng)站的影響是很大的，特別是電商類的網(wǎng)站，圖片要足夠的清晰。要做到最基本的不變形、不模糊、不失真2.2.2Banner的結(jié)構(gòu)圖2-11商品清晰度圖2-12商品鮮艷度2.商品層—展示角度我們一些設(shè)計(jì)總想創(chuàng)新，走不尋常路。但是不是什么時(shí)候都適合不尋常例如電水壺，永遠(yuǎn)都是正側(cè)面，因?yàn)榻?jīng)過長(zhǎng)時(shí)間的驗(yàn)證，這個(gè)角度是最容易辨認(rèn)產(chǎn)品本身和最佳的視覺效果。其他角度的叫“鬧著玩”！圖2-13商品角度3.商品層—摳圖問題有清晰輪廓的產(chǎn)品，可以做摳圖處理輪廓不是很清晰或者不是很美觀的產(chǎn)品，可保留角版處理圖2-14摳圖圖2-15摳圖4.文案層—視覺清晰度產(chǎn)品清晰，文案清晰，背景簡(jiǎn)潔屬于高效的信息傳達(dá)去色后，文案要很背景拉開明度距離，否則文字容易被閱讀圖2-16視覺清晰度圖2-17視覺清晰度現(xiàn)在很多文案策劃老嫌說(shuō)的不夠嚴(yán)謹(jǐn)，導(dǎo)致文案文字超級(jí)長(zhǎng)，我們可以采用分段去做；當(dāng)然也可以跟策劃談?wù)勅松Ｎ陌覆灰^8個(gè)字圖2-19文案圖2-20文案如果一個(gè)背景顏色足夠深，那么寫淺色字是比較好的，如果一個(gè)背景顏色足夠的淺，寫深色字是比較好的一個(gè)顏色不要同時(shí)出現(xiàn)黑色和白色（深色和亮色）圖2-21文案顏色圖2-22文案顏色搭配5.文案層—邏輯清晰度符合人類內(nèi)心原欲的文案，往往更容易驅(qū)動(dòng)人類行為。從眾：已賣出100000件好奇：神奇手膜，神奇腳模利益：錯(cuò)過今天再等一年恐懼：消滅你家99.9%的細(xì)菌自我：這個(gè)表有點(diǎn)貴，但是很帥/我們不賣便宜的，只賣好的搞笑：老板不在，全場(chǎng)亂賣/美工辭職了，老板自己來(lái)網(wǎng)絡(luò)流行語(yǔ)在電商上還是很受用的，比如任性，醉了，100塊錢都不給我，洪荒之力之類文案核心是了解人性本身，而不是單純了解你需要推銷的本體。如果碰到什么新春特賣，型男必備，春游必備，新款上架，直接把運(yùn)營(yíng)或者文案策劃掐死就行了。圖文不符或者文案不清晰的廣告，只能讓用戶望而卻步圖2-23圖文相符真正的好文案，會(huì)擊中你內(nèi)心最薄的那層需求圖2-24好文案圖2-25好文案6.背景層—背景層分解圖2-26Banner的背景層圖2-27Banner的背景層1.垂直構(gòu)圖：可以充分顯示產(chǎn)品和主體的高大與深度，因此多應(yīng)用于單薄細(xì)長(zhǎng)的產(chǎn)品。2.2.3Banner的構(gòu)圖圖2-28垂直構(gòu)圖垂直構(gòu)圖圖2-29垂直構(gòu)圖2.平衡式構(gòu)圖：平衡式構(gòu)圖可以給人一種完美、滿足的感覺，常用于地產(chǎn)設(shè)計(jì)、茶具設(shè)計(jì)等。圖2-30平衡式構(gòu)圖圖2-31平衡式構(gòu)圖3.斜線/放射線構(gòu)圖：斜線具有運(yùn)動(dòng)、流動(dòng)的感覺，常用在運(yùn)動(dòng)裝備、細(xì)長(zhǎng)的文具等產(chǎn)品上。圖2-32放射線構(gòu)圖圖2-33放射線構(gòu)圖圖2-34放射線構(gòu)圖圖2-35放射線構(gòu)圖4.對(duì)角線構(gòu)圖：巧妙利用了對(duì)角線的長(zhǎng)度優(yōu)勢(shì)，使畫面動(dòng)感、活潑，達(dá)到吸引視線、突出主體、均衡視覺的效果。圖2-36對(duì)角線構(gòu)圖圖2-37對(duì)角線構(gòu)圖5.框架式構(gòu)圖：框架式構(gòu)圖能增加畫面的縱向?qū)Ρ群脱b飾效果，產(chǎn)生深度感。圖2-38框架式構(gòu)圖圖2-39框架式構(gòu)圖6.九宮格構(gòu)圖：九宮格中的四個(gè)交叉點(diǎn)是放置主體的最佳位置，這種構(gòu)圖方式更符合人們的視覺習(xí)慣，使主體自然成為視覺中心。即突出了主體，又平衡了畫面。圖2-40九宮格構(gòu)圖圖2-41九宮格構(gòu)圖64畫畫底部導(dǎo)航欄可以說(shuō)是現(xiàn)在最流行的導(dǎo)航控件了，微信、支付寶、淘寶、網(wǎng)易云音樂等等，各種類型的APP都有應(yīng)用。作用是為了做好內(nèi)容分類，節(jié)省屏幕空間，等需要的時(shí)候更容易被人找到!實(shí)訓(xùn)任務(wù)2.5App底部Tab欄設(shè)計(jì)底部Tab欄是什么？WHATISIT?65手機(jī)界面Tab欄設(shè)計(jì)Tab常見布局根據(jù)Banner的位置和主題，選擇以下構(gòu)圖屏幕等分減去左右間距后等分圖標(biāo)左右間距手機(jī)界面底部Tab欄屏幕等分：技術(shù)實(shí)現(xiàn)比較簡(jiǎn)單，市面上使用比較多的樣式。計(jì)算方法：列寬=屏幕寬度/標(biāo)簽個(gè)數(shù)。手機(jī)界面底部Tab欄減去左右間距后等分：標(biāo)簽之間相對(duì)緊湊。手機(jī)界面底部Tab欄圖標(biāo)左右間距相等：多用在標(biāo)簽數(shù)量為3個(gè)的情況，因?yàn)橛闷聊坏确址绞綀D標(biāo)看起來(lái)會(huì)比較散，所以可以采用這種方法。69手機(jī)界面Tab欄設(shè)計(jì)Tab背景樣式常見樣式白色或淺灰黑色毛玻璃透明背景手機(jī)界面底部Tab欄白色或淺灰：最為常見的背景樣式，它能夠更好的突出標(biāo)簽內(nèi)容，同時(shí)不會(huì)讓底部顯得過重?？梢允褂冒咨油队盎蛘叩撞考訙\灰色分隔線的方式將其和內(nèi)容區(qū)分開。手機(jī)界面底部Tab欄黑色背景：黑色背景往往用于一些特殊類型的APP，如運(yùn)動(dòng)、股票等，渲染氛圍。手機(jī)界面底部Tab欄毛玻璃：在前2年比較流行，多用在IOS中，給人時(shí)尚的感覺，不過會(huì)耗費(fèi)大量資源，目前使用的比較少。手機(jī)界面底部Tab欄透明背景：采用透明背景，可以讓用戶視覺更聚焦于內(nèi)容本身。但這種方式會(huì)導(dǎo)致標(biāo)簽信息展示較弱，所以透明背景多用在內(nèi)容為主的APP中，如抖音。手機(jī)界面Tab欄設(shè)計(jì)Tab欄展現(xiàn)方式常見樣式圖標(biāo)+文字純圖標(biāo)圖標(biāo)+文字+駝式按鈕純文字手機(jī)界面底部Tab欄圖標(biāo)+文字：最常見的標(biāo)簽展示樣式，用圖標(biāo)吸引人的眼球，配合文字說(shuō)明，更能凸顯圖標(biāo)標(biāo)簽欄。手機(jī)界面底部Tab欄純圖標(biāo)：采用純圖標(biāo)樣式比較簡(jiǎn)潔，但識(shí)別性較低，一般適用于小眾產(chǎn)品中，如花瓣、Pinterest，這2個(gè)產(chǎn)品是設(shè)計(jì)分享類平臺(tái)，用戶群體比較小眾且目標(biāo)用戶是互聯(lián)網(wǎng)從業(yè)人員，對(duì)這些圖標(biāo)含義較為熟悉，采用這種方式會(huì)顯得產(chǎn)品比較有氣質(zhì)。手機(jī)界面底部Tab欄圖標(biāo)+文字+駝式按鈕：這種標(biāo)簽欄樣式常見于社區(qū)類APP中，采用駝式按鈕來(lái)突出功能點(diǎn)，引導(dǎo)用戶發(fā)布內(nèi)容。如閑魚PP，點(diǎn)擊加號(hào)按鈕就可發(fā)布閑置，調(diào)動(dòng)用戶積極性。手機(jī)界面底部Tab欄純文字：采用這種方式能夠更直觀的讓用戶進(jìn)行操作，遵循簡(jiǎn)單易用的原則。但樣式比較單一，適合用戶群體跨度較大但產(chǎn)品，多用于直播類、內(nèi)容類、簡(jiǎn)單工具類APP中，例如小紅書、百度翻譯。實(shí)訓(xùn)任務(wù)2.6移動(dòng)端界面視覺流程設(shè)計(jì)畫畫視覺流程是什么？WHATISIT?視覺流程是通過設(shè)計(jì)引導(dǎo)使用者的眼睛，通俗的講就是先看到什么，再看到什么，也就是視覺瀏覽的順序。什么是視覺流程？引導(dǎo)使用者的眼睛,首先看到其次看到再其次看到......————————————————————————視覺中心次重點(diǎn)再其次信息點(diǎn)......畫畫為什么進(jìn)行視覺流程梳理？WHYDOYOUDOIT?一個(gè)好的設(shè)計(jì)不僅僅是好看，更重要的是做出一個(gè)正確的設(shè)計(jì)，解決實(shí)際問題，將信息展示清楚。清晰的展示信息這是非常重要的一個(gè)設(shè)計(jì)理念。手機(jī)界面視覺流程如何理解清晰展示信息？HOWDOYOUDOIT?我么可以根據(jù)主題和甲方要求，按照信息重要性，著手進(jìn)行視覺信息的依次梳理。在整個(gè)視信息按照重要性的等級(jí)排列覺的表現(xiàn)中，有最重要的信息，也有相對(duì)次要的信息，如果把這些出來(lái)，那么就是有層級(jí)。如果我們?cè)谧鲈O(shè)計(jì)之前對(duì)信息的層級(jí)關(guān)系首先做梳理，然后再去設(shè)計(jì)，這樣設(shè)計(jì)的作品就會(huì)產(chǎn)生極好的視覺流程。手機(jī)界面視覺流程表現(xiàn)視覺層級(jí)梳理信息層級(jí)遵循視覺習(xí)慣？首先我們要指導(dǎo)人類視覺習(xí)慣遵循從左往右、從上到下的軌跡。我們的界面設(shè)計(jì)要遵循視覺習(xí)慣來(lái)安排，將重對(duì)比法則要的信息放到視覺中心的位置，按照視覺規(guī)律來(lái)布局各種層級(jí)信息。手機(jī)界面視覺流程視覺習(xí)慣:遵循從左往右、從上到下的軌跡視覺習(xí)慣:頁(yè)面上部比下部更引人注目視覺習(xí)慣:頁(yè)面往往是左邊比右邊更引人注目信息元素的位置Position視覺流程賞析/遵循對(duì)比法則？對(duì)比主要分為：大小對(duì)比、粗細(xì)對(duì)比、色彩對(duì)比、明度對(duì)比。運(yùn)用對(duì)比的法則，來(lái)展現(xiàn)各種層級(jí)的信息。手機(jī)界面視覺流程遵循對(duì)比法則遵循圖片、圖標(biāo)和文字吸引度？我們需要了解文字、圖片和圖標(biāo)的吸引度也是不同的。通常來(lái)說(shuō)，三者的吸引度從大到小排列是圖片>圖標(biāo)>文字。手機(jī)界面視覺流程吸引度：圖片>圖標(biāo)>文字視覺流程清晰如何引導(dǎo)使用者的眼睛：信息元素的位置Position圖片文字的吸引度Colour色彩Colour對(duì)比：大小粗細(xì)