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

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

Google

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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