UI畢業(yè)論文

精品文庫日照職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計（論文）題 目： 移動端圖形界面設(shè)計 院 部： 電子信息工程學(xué)院 專 業(yè)： 計算機(jī)網(wǎng)絡(luò)技術(shù) 學(xué) 號： 201315030241 學(xué)生姓名： 周丹丹 指導(dǎo)教師： 侯素玲 二O一六 年五月移動端圖形界面設(shè)計周丹丹摘要11 圖形界面設(shè)計的基本原則11.1 圖形界面設(shè)計的“黃金法則” 11.1.1 圖形界面的一致性原則 11.1.2 圖形界面的簡潔性原則 21.1.3 易于檢索 21.1.4 避免不必要的文本輸入 21.1.5 軟件信息的反饋原則 21.2界面基本要素2+1.3視覺設(shè)計效果2+1.4必備品質(zhì)2+2 移動界面設(shè)計要素 22.1 菜單 22.2 按鈕 32.3 多選列表 32.4 文字顯示 33 圖標(biāo)與圖像33.1 圖形界面的最少記憶項目原則 33.2 圖形界面操作序列的完整性原則 3結(jié)束語 3摘要自從智能手機(jī)的興起，極大的方便了我們的辦公、娛樂等等，可以說移動智能手機(jī)的小巧玲瓏更加受到人們所愛，手機(jī)上網(wǎng)超過了傳統(tǒng)電腦的上網(wǎng)數(shù)量。手機(jī)界面人性化設(shè)計、友好性用戶體驗就顯得非常重要。移動界面的設(shè)計是人機(jī)交互技術(shù)研究的一個重要方向。移動應(yīng)用的界面設(shè)計符合人機(jī)交互設(shè)計的一般規(guī)律，可以利用人機(jī)交互界面的一般設(shè)計方法；由于移動設(shè)備的便攜性、位置不固定性和計算能力有限性以及無線網(wǎng)絡(luò)的低帶寬高延遲等諸多的限制，移動界面設(shè)計又具有自己的特點。1 圖形界面設(shè)計的基本原則用戶原則是圖形界面設(shè)計最基本和最重要的設(shè)計原則。所謂用戶原則，就是在軟件界面設(shè)計中，要充分體現(xiàn)出“以人為本”、“用戶友好”的基本要求，做到：易懂、易學(xué)、易用。1.1 圖形界面設(shè)計的“黃金法則”用戶原則是大原則，人們在長期的圖形界面設(shè)計過程中，總結(jié)出了圖形界面設(shè)計中一些有用的法則，這些原則被稱作軟件界面設(shè)計的“黃金法則”。這些法則進(jìn)一步豐富了用戶原則，使用戶原則變得實在、可操作。1.1.1 圖形界面的一致性原則一致性原則是“黃金法則”中最重要的原則，也是界面開發(fā)人員最容易忽略和違反的一個原則。一致性原則有利于減少用戶的學(xué)習(xí)量和記憶量，用戶可以把局部的經(jīng)驗和知識推廣到其他應(yīng)用場合。一致的界面風(fēng)格對用戶來說很直觀。應(yīng)當(dāng)檢查每個布局和每個顯示來保證其一致性。各種移動應(yīng)用開發(fā)平臺都提供某種形式的應(yīng)用界面的風(fēng)格指南，仔細(xì)研究這些指南對于移動應(yīng)用的界面設(shè)計非常重要。一致性原則要做到：界面外觀上的一致：具有相似的外觀布局和信息顯示格式。例如Office和Adobe軟件。操作次序上的一致：例如不同命令操作后的顯示效果一致。概念、語義、命令語法一致：例如同一功能的命令名稱要一致，例如“復(fù)制”命令。不同軟件開發(fā)商之間的界面設(shè)計要保持某種一致1.1.2 圖形界面的簡潔性原則簡潔不僅是界面設(shè)計的美學(xué)原則，而且也是顯示屏幕大小所要求的。要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。 復(fù)雜化是界面設(shè)計的一大誤區(qū)！簡潔性原則主要表現(xiàn)在：內(nèi)容歸類合理、內(nèi)容排列整齊一致1.1.3 易于檢索用戶希望能減少人機(jī)對話的次數(shù)以減輕操作的頻率，快捷方式就是一個較好的辦法。避免嵌套過深的多級菜單，縮減不必要的功能。以滿足用戶的目標(biāo)需要為準(zhǔn)，盡量減少用戶進(jìn)行信息訪問時所要采取的步驟。同時盡可能創(chuàng)建多種信息訪問途徑。1.1.4 避免不必要的文本輸入盡量使用戶避免不必要的文本信息的輸入，而采用選擇列表或模糊查詢，即輸入一部分查詢關(guān)鍵詞就可以獲得檢索目標(biāo)或包含目標(biāo)的列表可供用戶選擇，這樣可以降低對于用戶進(jìn)行關(guān)鍵字文字輸入的麻煩。1.1.5 軟件信息的反饋原則軟件界面對用戶的每個操作都應(yīng)當(dāng)提供及時的信息反饋，尤其是簡明的錯誤處理和幫助功能是軟件界面的重要反饋信息。預(yù)測用戶可能出現(xiàn)的錯誤，提供相應(yīng)的機(jī)制盡可能避免。例如光手機(jī)信息發(fā)送成功失敗提示等等；如果用戶要輸入日期，可以采用格式化輸入的方法，檢查用戶輸入是否全部是數(shù)字，而且代表日期、月份以及年份的數(shù)字的取值范圍是否在合法的范圍內(nèi)。1.2 界面基本要素(1).手機(jī)界面層級：待機(jī)界面主菜單二級菜單三級菜單 界面除了包括圖標(biāo)和文字外，比較重要的還有呼叫，發(fā)送信息等以及計算器，日歷界面等(2).明確意義的圖標(biāo)，風(fēng)格鮮明的版面設(shè)計是手機(jī)界面設(shè)計的重要工作，目前較為流行的是歐洲簡單風(fēng)格，以及韓國的時尚絢麗的風(fēng)格。(3).在更新穎的交互操作和與手機(jī)設(shè)計的整體結(jié)合上，韓系手機(jī)作的比較好，而在可用性和體驗難度上，歐系手機(jī)則比較優(yōu)秀。1.3視覺設(shè)計效果：一款手機(jī)應(yīng)用或系統(tǒng)首先是通過界面將整體性格傳遞給用戶，體現(xiàn)了界面上風(fēng)格營造的氛圍，屬于產(chǎn)品的一種性格。視覺設(shè)計的姿態(tài)決定了用戶對產(chǎn)品的觀點、興趣，乃至后面的使用情況。手機(jī)界面的視覺設(shè)計可以幫助產(chǎn)品的感性部分找到更多的共性，或者規(guī)避一些用戶的可能抵觸點。(1).風(fēng)格確定根據(jù)界面的總體風(fēng)格的策劃思路，結(jié)合界面其他元素的需要，對手機(jī)界面的整體風(fēng)格進(jìn)行考慮，以保證圖標(biāo)和整體效果的融合。風(fēng)格鮮明的設(shè)計是手機(jī)界面設(shè)計的重要工作。目前，無論是引領(lǐng)風(fēng)尚的iphone，還是市場新寵samsung，都推崇極簡扁平化風(fēng)格。(2).圖標(biāo)設(shè)計圖標(biāo)功能：在圖形設(shè)計之前，圖標(biāo)非常重要，圖標(biāo)的功能是我們進(jìn)行圖標(biāo)造型設(shè)計的標(biāo)準(zhǔn)和依托。設(shè)計圖標(biāo)的目的是實用和美觀，同時要考慮圖標(biāo)的隱喻性，它代表的意思必須是用戶可知的、熟知的。圖標(biāo)造型：圖標(biāo)一般先用illustrator進(jìn)行繪制，然后photoshop做圖標(biāo)設(shè)計的后期效果處理。所有界面上同級、同類的圖標(biāo)要保證表現(xiàn)形式的統(tǒng)一，避免用戶視覺上的紊亂。(3).色彩調(diào)配由于手機(jī)本身的限制，在色彩的還原程度上有一定限制，因此在選用色彩時要根據(jù)使用的屏幕進(jìn)行調(diào)節(jié)，方法就是將設(shè)計好的效果圖導(dǎo)入相應(yīng)的手機(jī)中，用該手機(jī)自帶的圖片瀏覽軟件進(jìn)行全屏效果查看或者請求開發(fā)人員幫助。1.4必備品質(zhì)1.清晰清晰是用戶界面設(shè)計必須要具備的一條品質(zhì)，如果說你的界面設(shè)計的很模糊，用戶就無法在其中體驗到較好的使用體驗，這樣會影響用戶的整體印象。2.簡潔UI設(shè)計除了清晰還不夠，還需要簡潔，看上去一目了然。如果界面上充斥著太多的東西，會讓用戶在查找內(nèi)容的時候比較困難和乏味，而簡潔的畫面就能很好的解決這個問題。3.熟悉這里說的熟悉是指在設(shè)計UI的時候，要遵守一定的設(shè)計規(guī)范，就如有下劃線的字符是有超鏈接的、叉號就是要退出或者刪除，這樣用戶在使用的時候不但有熟悉的感覺，而且便于操控。4.響應(yīng)良好的用戶界面設(shè)計一定要響應(yīng)迅速，不能讓用戶產(chǎn)生一種響應(yīng)較慢的感受。而且界面應(yīng)該有提醒的功能，讓用戶了解到一些反饋信息。5.一致在設(shè)計UI時，保持界面風(fēng)格的一致性也是整個應(yīng)用設(shè)計中很重要的環(huán)節(jié)，一致的風(fēng)格不會讓用戶有錯愕感。6.美觀美好的事物總會讓人有種愉悅之感，在頁面設(shè)計的時候也要注重美觀度的加強(qiáng)。2 移動界面設(shè)計要素界面是軟件與用戶交互的最直接的層，界面的好壞決定用戶對軟件的第一印象。而且設(shè)計良好的界面能夠引導(dǎo)用戶自己完成相應(yīng)的操作，起到向?qū)У淖饔谩Ｍ瑫r界面如同人的面孔，具有吸引用戶的直接優(yōu)勢。設(shè)計合理的界面能給用戶帶來輕松愉悅的感受和成功的感覺，相反由于界面設(shè)計的失敗，讓用戶有挫敗感，再實用強(qiáng)大的功能都可能在用戶的畏懼與放棄中付諸東流。目前界面的設(shè)計引起軟件設(shè)計人員的重視的程度還遠(yuǎn)遠(yuǎn)不夠，直到最近網(wǎng)頁制作的興起，才受到專家的青睞。而且設(shè)計良好的界面由于需要具有藝術(shù)美的天賦而遭拒絕。移動界面也包含很多種類的設(shè)計要素，主要界面設(shè)計元素有：菜單 按鈕 多選列表 文字顯示 數(shù)據(jù)輸入 圖標(biāo)與圖像 報警提示 移動多媒體 2.1 菜單主要目的用于提供項目選擇。 設(shè)計移動界面可用性好的菜單應(yīng)遵守的規(guī)則 。供選擇的項目應(yīng)根據(jù)需要進(jìn)行邏輯分類，如果沒有邏輯順序，可以按優(yōu)先級分類，將被選擇頻率最高的項目放在列表的最頂端。 每一屏中不宜設(shè)計過多的選項，如果一個菜單上的選擇項目太多，應(yīng)該建立一個“更多”鏈接，將菜單擴(kuò)展到多個屏幕。 菜單上的每一選項一般應(yīng)當(dāng)簡明扼要。2.2 按鈕一般移動界面中的按鈕不經(jīng)常使用圖標(biāo)。 在按鈕屬性的設(shè)置上根據(jù)所顯示的應(yīng)用類型和信息類型，使用風(fēng)格和標(biāo)注一致的標(biāo)簽。漢字標(biāo)簽則一般需要注意字?jǐn)?shù)的控制 。常見的通用按鈕OK（確定）：可用于菜單項的選擇或表示對某一操作的認(rèn)可，如確認(rèn)刪除。Done（完成）：可用于結(jié)束當(dāng)前操作，并返回到上一層任務(wù)。Back（返回）：使用戶回到前一個操作屏幕。2.3 多選列表在移動應(yīng)用中使用多選列表，可以最大限度地減少文本輸入。2.4 文字顯示文字顯示控件主要用于顯示較多數(shù)量的文字信息。文字顯示的一般可用性建議：每一屏幕顯示內(nèi)容不宜過多，如果信息較多，應(yīng)定義一個鏈接。 一般情況下文字信息應(yīng)當(dāng)使用換行方式進(jìn)行顯示。屏幕布局一般來說，手機(jī)屏幕是從上往下布局的，重要的信息會放在上方。但是在操作上，大部分人都是單手拿手機(jī)，常用的操作，要放在界面的下方。另外還有一個原則，最小的觸摸單位，一般是44個像素。如果再小，你的拇指難以觸碰，或者容易引發(fā)誤操作。同時，也不要讓界面太擁擠。大家熟悉的，比如iOS的桌面，最主要的操作是在最下面，常用的四個鈕，上面的內(nèi)容可以來回滑動去選擇。微信的操作也是在下面，重要的信息我們的聊天內(nèi)容放在上方。3 圖標(biāo)與圖像圖像、圖標(biāo)可以增強(qiáng)顯示信息的效果。3.1 圖形界面的最少記憶項目原則好的圖形界面應(yīng)該盡量減少用戶的記憶量，用戶必須記住的任何信息應(yīng)該是和當(dāng)前操作有關(guān)的，而不是和計算機(jī)相關(guān)。為減少記憶量，應(yīng)該通過菜單設(shè)計及聯(lián)機(jī)幫助等形式幫助用戶記憶，一般地說，用戶的短期記憶不要超過7個項目。3.2 圖形界面操作序列的完整性原則界面中每個操作序列都應(yīng)該清楚地標(biāo)明開始和結(jié)結(jié)束，其余的操作應(yīng)插在中間。操作序列的結(jié)尾應(yīng)該給用戶完成的感覺，并指示下一個任務(wù)的開始。想象一下發(fā)送手機(jī)信息的整個操作過程。結(jié)束語通過圖形界面設(shè)計的基本原則及就是UI的總體的設(shè)計從圖形界面設(shè)計的“黃金法則”、界面基本要素、兩方面闡述。從移動界面設(shè)計要素具體的介紹了移動的獨特性。分別從菜單、按鈕、多選列表、文字顯示講述。