UI設(shè)計(jì)·形考任務(wù)一

UI設(shè)計(jì)·形考任務(wù)一1.請(qǐng)你分析一個(gè)自己喜歡的UI設(shè)計(jì)案例，談?wù)劸唧w好在何處？（30分）答:聲音搜索大部分時(shí)間，我在開(kāi)車(chē)時(shí)都會(huì)使用

Google

地圖。在此期間，在搜索字段中輸入文本非常不便，而且非常

危險(xiǎn)。該應(yīng)用程序僅通過(guò)提供語(yǔ)音識(shí)別工具即可解決此問(wèn)題，該工具可立即提供所需位置的路線。路線狀態(tài)和交通的可見(jiàn)性去某個(gè)地方時(shí)，一個(gè)非常重要的方面是知道到該目的地的剩余時(shí)間。該應(yīng)用程序?qū)⒂?jì)算剩余時(shí)間，并根據(jù)選擇的運(yùn)輸方式和交通狀況，預(yù)測(cè)預(yù)計(jì)到達(dá)時(shí)間。2.手寫(xiě)作答題：請(qǐng)?jiān)趯W(xué)習(xí)第1章的內(nèi)容后，手寫(xiě)完成以下問(wèn)答題：（40分）1．請(qǐng)說(shuō)明UI的概念？（8分）UI設(shè)計(jì)（或稱(chēng)界面設(shè)計(jì)）是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)說(shuō)的UI設(shè)計(jì)是虛擬UI，UI即UserInterface(用戶(hù)界面)的簡(jiǎn)稱(chēng)。請(qǐng)簡(jiǎn)述用戶(hù)界面設(shè)計(jì)的三大原則？（10分）置界面于用戶(hù)的控制之下減少用戶(hù)的記憶負(fù)擔(dān)保持界面的一致性。UCD的含義？（10分）UCD（UserCenteredDesign）是指以用戶(hù)為中心的設(shè)計(jì)。是在設(shè)計(jì)過(guò)程中以用戶(hù)體驗(yàn)為設(shè)計(jì)決策的中心，強(qiáng)調(diào)用戶(hù)優(yōu)先的設(shè)計(jì)模式。簡(jiǎn)單的說(shuō)，就是在進(jìn)行產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)、維護(hù)時(shí)從用戶(hù)的需求和用戶(hù)的感受出發(fā)，圍繞用戶(hù)為中心進(jìn)行產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)及維護(hù)，而不是讓用戶(hù)去適應(yīng)產(chǎn)品。4．簡(jiǎn)述UI設(shè)計(jì)中的常用文件格式JPEG/GIF/PNG三種格式的優(yōu)缺點(diǎn)？（12分）jpg、png、gif都是我們平時(shí)很常見(jiàn)的圖片格式，但是很多小伙伴不知道它們之間有什么區(qū)別!今天我就來(lái)給大家分析一下它們的優(yōu)缺點(diǎn)、適用的場(chǎng)景以及如何進(jìn)行格式轉(zhuǎn)換吧!1.Jpg優(yōu)點(diǎn):jpq可以在不影響人類(lèi)可分辨的圖片質(zhì)量前提下，盡可能的壓縮圖片的大小，比較適合用來(lái)儲(chǔ)存和傳輸使用。缺點(diǎn):該格式屬干有損壓縮方式，因此在一定程度上會(huì)降低圖片的分辨率，有可能導(dǎo)致畫(huà)質(zhì)模糊的現(xiàn)象。2.Png優(yōu)點(diǎn):Png是一種比較新型的圖片格式，其包括PNG-8和真色彩PNG，而且支持透明底和無(wú)損壓縮

Q，輸出文件后可以保持原有的分辨率。缺點(diǎn):這種圖片格式的尺寸會(huì)比較大，有時(shí)候會(huì)影響傳輸和儲(chǔ)存。3.Gif優(yōu)點(diǎn):Gif最大的優(yōu)點(diǎn)就在于其是以動(dòng)畫(huà)形式展現(xiàn)的，可以表達(dá)一些靜態(tài)圖。無(wú)法展示的畫(huà)面，同時(shí)其傳播速度也比較快。缺點(diǎn):在整個(gè)Gif圖片中，其智能存在256種不同的顏色。3.論述題：（30分）嘗試從UI設(shè)計(jì)的20條原則中選擇3條，分別談?wù)勛约旱睦斫?，并結(jié)合自己能夠找到的UI設(shè)計(jì)案例附圖進(jìn)行說(shuō)明。答:清晰度是界面設(shè)計(jì)中，第一步也是最重要的工作。要想你設(shè)計(jì)的界而有效并被人喜歡,首先必須讓用戶(hù)能夠識(shí)別出它，讓用戶(hù)知道為什么會(huì)使用它?比如當(dāng)用戶(hù)使用時(shí)，能夠預(yù)料到發(fā)生什么，并成功的與它交互。有的界而設(shè)計(jì)得不是太清晰，雖然能夠滿(mǎn)足用戶(hù)一時(shí)的需求，但并非長(zhǎng)久之計(jì)，而清晰的界面能夠吸引用戶(hù)不斷

地重復(fù)使用。我們?cè)陂喿x的時(shí)候，總是會(huì)有許多事物分散我們的注意力，使得我們很難集中注意力安靜地閱讀。因此，在進(jìn)行界而設(shè)計(jì)的時(shí)候，能夠吸引用戶(hù)的注意力是很關(guān)鍵的，所以千萬(wàn)不要將你應(yīng)用的周?chē)O(shè)計(jì)得亂七八糟分散人的注意力，謹(jǐn)記屏幕整潔能夠吸引注意力的重要性。如果你非要顯示廣告，那么請(qǐng)?jiān)谟脩?hù)閱讀完畢之

后再顯示。尊事用戶(hù)的注意力，不僅讓用戶(hù)更快樂(lè)，而且你的廣告效果也會(huì)更佳。因此要想設(shè)計(jì)好的界而，保護(hù)和尊重用戶(hù)的注意力是先決條件。當(dāng)我們能夠直接操作物體時(shí)，用戶(hù)的感覺(jué)是最棒的，但這并不太容易實(shí)現(xiàn)，因?yàn)樵诮缑嬖O(shè)計(jì)時(shí)，我們?cè)黾拥亩瑯?biāo)往往并不是必須的，比如我們過(guò)多的使用按鈕、圖形、選項(xiàng)、附件等等其他繁瑣的東西以便我們最終操縱

U元素而不是重要的事情。而最初的目標(biāo)呢?就是希望簡(jiǎn)化而能夠直接操縱……因此在進(jìn)行界而設(shè)

計(jì)時(shí)，我們要盡可能多的了解一些人類(lèi)自然手勢(shì)。理想情況下，界而設(shè)計(jì)要簡(jiǎn)潔，讓用戶(hù)有一個(gè)直接操的感覺(jué)。UI設(shè)計(jì)·形考任務(wù)二手寫(xiě)作答題：請(qǐng)?jiān)趯W(xué)習(xí)第2章的內(nèi)容后，手寫(xiě)完成以下問(wèn)答題：（40分）1.信息架構(gòu)的原則、標(biāo)準(zhǔn)及目的的分類(lèi)分別是什么？2.色調(diào)3.飽和度4.明度信息架構(gòu)原則是為了讓網(wǎng)站、應(yīng)用程序等的內(nèi)容更加有組織、易于理解和使用。以下是一些常見(jiàn)的信息架構(gòu)原則:組織性:信息應(yīng)該按照一定的分類(lèi)、層次和結(jié)構(gòu)進(jìn)行組織，以方便用戶(hù)快速找到他們需要的內(nèi)容?？梢暬?使用視覺(jué)元素(如圖標(biāo)、顏色、布局等)來(lái)幫助用戶(hù)理解網(wǎng)站或應(yīng)用程序的結(jié)構(gòu)和功能。.一致性:相同類(lèi)型的信息應(yīng)該采用相同的組織方式和格式，以便用戶(hù)在不同的頁(yè)面或部分找到相同的信息時(shí)不會(huì)感到困惑?？伤阉餍?為了方便用戶(hù)查找需要的信息，應(yīng)該在網(wǎng)站或應(yīng)用程序上提供搜索功能。易用性:信息和功能的布局和導(dǎo)航應(yīng)該簡(jiǎn)單明了，讓用戶(hù)能夠快速而準(zhǔn)確地找到所需信息。反饋機(jī)制:為了讓用戶(hù)更好地理解網(wǎng)站或應(yīng)用程序的結(jié)構(gòu)和功能，應(yīng)該提供適當(dāng)?shù)姆答仚C(jī)制，如鼠標(biāo)懸停提示、確認(rèn)對(duì)話框等。（2）關(guān)鍵是能設(shè)計(jì)出好的信息架構(gòu)，而一個(gè)好的信息架構(gòu)，應(yīng)該可以能低成本與其他系統(tǒng)建立連接。找到該場(chǎng)景最合適的信息架構(gòu)框架，并且能隨時(shí)迭代這個(gè)架構(gòu)對(duì)人、對(duì)信息、對(duì)任何內(nèi)外部要素的連接能力。（3）分類(lèi)：層次結(jié)構(gòu)也叫樹(shù)形結(jié)構(gòu)，是常見(jiàn)的網(wǎng)站信息架構(gòu)模式，上面舉例的Wordpress的信息架構(gòu)就是典型的層次結(jié)構(gòu)。樹(shù)形結(jié)構(gòu)中箭頭的方向不一定是自上而下的，也可能是自下而上或者是雙向的，而內(nèi)容層之間也會(huì)因?yàn)橐恍╆P(guān)聯(lián)鏈接的存在而存在同層次間的指向箭頭。矩陣結(jié)構(gòu)矩陣結(jié)構(gòu)比較注重“維”的概念，即從多維的角度來(lái)檢索信息，如時(shí)間、地域、內(nèi)容分類(lèi)等，典型的應(yīng)用就是內(nèi)容管理系統(tǒng)（CMS）網(wǎng)站或者電子商務(wù)類(lèi)網(wǎng)站，比如你瀏覽豆瓣的電影時(shí)可以篩選：2010年—美國(guó)—科幻，也許這個(gè)時(shí)候《鋼鐵俠2》就呈現(xiàn)在你面前了。線性結(jié)構(gòu)看到線性結(jié)構(gòu)也許你馬上會(huì)想到面包屑，它將網(wǎng)站中重要的一個(gè)信息架構(gòu)路線展現(xiàn)了出來(lái)，即使它無(wú)法為你提供你在網(wǎng)站上的平面坐標(biāo)，但至少它顯示了你現(xiàn)在正處于關(guān)鍵線路的哪個(gè)點(diǎn)上；當(dāng)然，網(wǎng)站的一些關(guān)鍵路徑一般也是按照線性結(jié)構(gòu)涉及的，比如用戶(hù)注冊(cè)流程或電子商務(wù)網(wǎng)站的購(gòu)買(mǎi)流程等。網(wǎng)站分析與信息架構(gòu)根據(jù)網(wǎng)站業(yè)務(wù)模式的不同，可以選擇適合自己網(wǎng)站的信息架構(gòu)的模式，無(wú)論是上面的哪種信息架構(gòu)模式，只要設(shè)計(jì)和運(yùn)用合理，用戶(hù)便能夠在你的網(wǎng)站上以方便的形式、快的速度找到他們需要的信息。（2）色調(diào)(色相)就是對(duì)色彩的一種直觀感受，色調(diào)是指物體反射的光線中以哪種波長(zhǎng)占優(yōu)勢(shì)來(lái)決定的，不同波長(zhǎng)產(chǎn)生不同顏色的感覺(jué)，色調(diào)是顏色的重要的特征，它決定了顏色本質(zhì)的根本特征。（3）明度指顏色的亮度，不同的顏色具有不同的明度，例如黃色就比藍(lán)色的明度高，在一個(gè)畫(huà)面中如何安排不同明度的色塊也可以幫助表達(dá)畫(huà)作的感情，如果天空比地面明度低，就會(huì)產(chǎn)生壓抑的感覺(jué)。（4）飽和度是指色彩的鮮艷程度，也稱(chēng)色彩的純度。飽和度取決于該色中含色成分和消色成分（灰色）的比例。含色成分越大，飽和度越大；消色成分越大，飽和度越小。2.論述題：根據(jù)P75網(wǎng)頁(yè)UI設(shè)計(jì)相關(guān)的《行業(yè)形象色彩表》，從中找出3種網(wǎng)頁(yè)界面色系，結(jié)合設(shè)計(jì)案例附圖進(jìn)行分析。（30分）答:（1）紅色也常被用作警告、危險(xiǎn)、禁止、防火等標(biāo)識(shí)色搭配在網(wǎng)頁(yè)顏色的應(yīng)用中,單純以紅色為主色調(diào)的網(wǎng)站相對(duì)較少,多用作輔助色、點(diǎn)睛色，以達(dá)到陪襯、醒目的效果。紅色與少量黃色相搭配，會(huì)使其熱力強(qiáng)盛，趨于躁動(dòng)、不安，極富動(dòng)感和張揚(yáng)的個(gè)性。紅色與黑色的搭配在商業(yè)設(shè)計(jì)中被譽(yù)為商業(yè)成功色，在網(wǎng)頁(yè)設(shè)計(jì)中也比較常見(jiàn)。紅黑搭配常被用于較前衛(wèi)時(shí)尚、個(gè)性的娛樂(lè)休閑區(qū)網(wǎng)頁(yè)中。紅色與灰色、黑色等暗

色調(diào)搭配使用，給人以現(xiàn)代、激進(jìn)的感覺(jué)。粉紅色是紅色系中的冷色系，這類(lèi)顏色的組合多用于女性主題，如化妝品、服裝等，鮮嫩血充滿(mǎn)誘惑，容易營(yíng)造出柔情、嬌媚、溫柔、甜蜜、純真、誘惑和艷麗等氣氛。（2）白色1分析:白光是所有顏色光線的集合，白色反射所有的光線，不吸收任何可見(jiàn)光，因此白色被作為純

粹、虛無(wú)、輕盈、光明及金屬的象征。在商業(yè)設(shè)計(jì)中，白色具有潔白明快純真和清潔的意象。白色是網(wǎng)頁(yè)

設(shè)計(jì)中通用的顏色,它具有容易突出彩度的特性，當(dāng)一個(gè)頁(yè)面設(shè)計(jì)未使用白色時(shí),往往會(huì)感覺(jué)空間減弱，容

易造成猜度不夠明確、頁(yè)面沉悶等反應(yīng)。2

搭配:很少有純白色的網(wǎng)頁(yè)，通常與其他色彩搭配使用。黑色與

白色表現(xiàn)出了兩個(gè)極端的亮度，這兩種顏色搭配使用通?？梢员憩F(xiàn)出都市化，現(xiàn)代的感覺(jué)。因?yàn)楹谏蜕拇钆浣o人以特殊的嚴(yán)肅感，所以也經(jīng)常被用于莊重的場(chǎng)合。（3）黑色1搭配:黑色的內(nèi)涵最為豐富和復(fù)雜，黑色具有很強(qiáng)的感染力，能夠表現(xiàn)出特有的高貴顯得嚴(yán)肅、莊嚴(yán)和堅(jiān)毅。另外，黑色還具有恐怖、煩惱、憂(yōu)傷、消極、沉睡、悲痛甚至死亡等意象。黑色用在宗教網(wǎng)站

中顯出嚴(yán)肅和莊嚴(yán)。2

搭配:黑色是一種流行色,適合于許多色彩搭配。黑色還具有高貴、穩(wěn)重、科技的意

象，是許多科技網(wǎng)站的主色調(diào)配合其他輔助色.營(yíng)造出科技的神秘感。另外在一些音樂(lè)網(wǎng)站中也常常用黑色，為主色調(diào),營(yíng)造出炫酷的氛圍。3.請(qǐng)從網(wǎng)頁(yè)設(shè)計(jì)導(dǎo)航表現(xiàn)形式、視覺(jué)風(fēng)格、網(wǎng)頁(yè)布局、網(wǎng)頁(yè)UI配色等方面分析下列幾個(gè)案例？（30分）答:網(wǎng)站頁(yè)而中用來(lái)傳遞信息的元素主要有文字、圖片、多媒體動(dòng)畫(huà)、視頻。頁(yè)面布局應(yīng)將這些不同內(nèi)容進(jìn)行

合理排列布局，使得用戶(hù)更有效的抓住重點(diǎn)，頁(yè)而布局需要結(jié)合用戶(hù)的行為習(xí)慣進(jìn)行考慮。國(guó)外的一些研究機(jī)構(gòu)和學(xué)者曾組織過(guò)關(guān)于網(wǎng)頁(yè)閱讀習(xí)慣的視覺(jué)軌跡研究。研究結(jié)果表明用戶(hù)瀏覽網(wǎng)站的視覺(jué)路線類(lèi)似于

字母”F"型。所謂F型模式，即用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)首先從網(wǎng)頁(yè)最左上看起，看完前面幾行的大部分內(nèi)容，越

往下看的越短，只有左邊一部分內(nèi)容被看到，形成F型瀏覽軌跡，F(xiàn)型瀏覽軌跡也正好符合人們從左到右

的書(shū)寫(xiě)習(xí)慣。因此，對(duì)于頁(yè)面布局來(lái)說(shuō)，應(yīng)將網(wǎng)頁(yè)重要的元去放在左側(cè)，并日以符合F形狀的形式來(lái)放署。UI設(shè)計(jì)·形考任務(wù)三1.請(qǐng)參照P77-97用軟件制作任意一個(gè)WEB登入界面設(shè)計(jì)。（30分）可以采用網(wǎng)上的圖片資源制作作品，注意不得使用與國(guó)家法律法規(guī)政策相違背的，（1）保留原始的層文件，無(wú)層文件的作業(yè)無(wú)效；（2）可自行網(wǎng)上尋找下載和使用（注意所選圖片內(nèi)容健康向上，不得出現(xiàn)與國(guó)家政策和法律相沖突的內(nèi)容）；（3）采用的設(shè)計(jì)軟件不限。2.請(qǐng)參照P167的內(nèi)容，用軟件制作一個(gè)移動(dòng)端微信圖標(biāo)。（30分）（1）保留原始的層文件，無(wú)層文件的作業(yè)無(wú)效；（2）采用的設(shè)計(jì)軟件不限。3.請(qǐng)參照第三章的內(nèi)容，為“聽(tīng)書(shū)”軟件設(shè)計(jì)制作一個(gè)手機(jī)APP圖標(biāo)。（40分）（1）保留原始的層文件，無(wú)層文件的作業(yè)無(wú)效；（2）可以借鑒其他作品，但不得抄襲，保持圖標(biāo)設(shè)計(jì)的原創(chuàng)性。（3）采用的設(shè)計(jì)軟件不限。UI設(shè)計(jì)·形考任務(wù)四1.請(qǐng)參照P139的天氣圖標(biāo)制作方法，自己創(chuàng)意并設(shè)計(jì)制作3個(gè)不同風(fēng)格和款式的天氣圖標(biāo)?？梢越梃b其他作品，但不得抄襲，保持圖標(biāo)設(shè)計(jì)的原創(chuàng)性。（30分）（1）保留原始的層文件，無(wú)層文件的作業(yè)無(wú)效；（2）三個(gè)天氣圖標(biāo)創(chuàng)意需有區(qū)別，風(fēng)格不同；（3）采用的設(shè)計(jì)軟件不限。2.請(qǐng)參照第三章的手機(jī)APP制作方法，為一家名叫“吃貨”的外賣(mài)送餐手機(jī)APP程序創(chuàng)意并設(shè)計(jì)制作1個(gè)APP圖標(biāo)。（20分）（1）保留原始的層文件，無(wú)層文件的作業(yè)無(wú)效；（2）設(shè)計(jì)需緊扣主題，保持原創(chuàng)，符合手機(jī)APP圖標(biāo)設(shè)計(jì)的要求和特點(diǎn)，制作規(guī)范，視覺(jué)美觀。（3）采用的設(shè)計(jì)軟件不限。3.請(qǐng)參照第三章的內(nèi)容，自己創(chuàng)意設(shè)計(jì)一款手機(jī)音樂(lè)播放器的界面。（50分）（1）保留原始的層文件，無(wú)層文件的作業(yè)無(wú)效；（2）設(shè)計(jì)需緊扣主題，保持原創(chuàng)，符合播放器界面設(shè)計(jì)的要求和特點(diǎn)，制作規(guī)范，視覺(jué)美觀。（3）采用的設(shè)計(jì)軟件不限。

形考任務(wù)五考核任務(wù)形式:各分部自行設(shè)計(jì)與安排。要求:1.若采用日常學(xué)習(xí)記錄的方式，要求學(xué)生提交本課程學(xué)習(xí)過(guò)程中的自我評(píng)價(jià)，評(píng)價(jià)內(nèi)容建議包括日常自主學(xué)習(xí)情況、到課情況、參與討論情況、作業(yè)提交情況、學(xué)用結(jié)合情況等方而的具體說(shuō)明和相關(guān)數(shù)據(jù)。2.若分部自行設(shè)計(jì)或組織的學(xué)習(xí)活動(dòng)，根