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

Google

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

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

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

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

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

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

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

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

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

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

易造成猜度不夠明確、頁面沉悶等反應。2

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

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

中顯出嚴肅和莊嚴。2

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

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

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

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

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

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

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