圖形圖像制作畢業(yè)論文：手機界面的交互設(shè)計(2015-04-18)

重慶工業(yè)職業(yè)技術(shù)學(xué)院 畢業(yè)論文 （ 2012 屆） 手機界面的交互設(shè)計 學(xué)生姓名 方玉鳳 學(xué) 號 201250430141 院 別 信息工程學(xué)院 專 業(yè) 圖形圖像制作 指導(dǎo)教師 謝雪晴 完成日期 2015 年 3 月 9 日 手機界面的交互設(shè)計 摘 要 本課題主要分為兩部分： (1)手機交互設(shè)計的現(xiàn)狀調(diào)查，包括手機的市場、使用人群、使用功能、鍵盤與界面的關(guān)系分析。（ 2）手機交互 設(shè)計包括：設(shè)計定位、設(shè)計要求，創(chuàng)新之處，樹狀結(jié)構(gòu)、圖標(biāo)設(shè)計。通過現(xiàn)狀調(diào)查分析現(xiàn)有手機界面設(shè)計的優(yōu)缺點。研究學(xué)生人群智能手機短信功能的界面和操作，了解拇指的運動習(xí)慣和缺陷，分析鍵盤與界面的關(guān)系。使現(xiàn)有的手機界面更人性化，置界面于用戶的控制之下。 關(guān)鍵詞 計算機輔助工藝設(shè)計 數(shù)碼產(chǎn)品 交互設(shè)計 目 錄 第一章 手機交互式設(shè)計的概念及發(fā)展 . 2 機的概念 . 2 互設(shè)計的概念和發(fā)展 . 2 面設(shè)計的概念 . 3 互設(shè)計和界面設(shè)計的區(qū)別 . 4 第二章 手機圖標(biāo)交互設(shè)計的發(fā)展前景 . 4 互的概念及交互設(shè)計的原則 . 4 機圖標(biāo)交互式設(shè)計的發(fā)展前景 . 8 第三章 手機交互設(shè)計 . 9 題背景 . 9 題確定 . 10 題制作的難點及解決方案 . 11 第四章 手機圖標(biāo)的設(shè)計過程 . 11 制 草圖 . 11 意思維 . 11 制整體界面 . 12 考市面上的各種手機菜單 . 14 納要設(shè)計的菜單內(nèi)容，分別對其選項進行繪制 . 14 終效果 . 16 結(jié)論 . 19 致 謝 . 20 參考文獻 . 21 1 引 言 現(xiàn)在的社會，處于知識經(jīng)濟時代，在滿足了物質(zhì)需求的情況下，人 們逐漸開始追求自身個性的發(fā)展和情感訴求，設(shè)計必須要著重對人的個性需求進行考慮。人的個性 不只是表現(xiàn)在審美、價值觀方面，還要深入研究生理、 心理、環(huán)境對人的影響，從而做到真正的設(shè)計以人為本。手機設(shè)計的個性 化已經(jīng)不僅僅局限于手機硬件的外觀，用戶的直接操作和應(yīng)用才是主體。界面的設(shè)計已也不只 是皮膚的變化這么簡單，人機逐漸滲透到其中，個性 化界面正日漸成為該款手機是否具有競爭優(yōu)勢的重要條 件。 2 第一章 手機交互式設(shè)計的概念及發(fā)展 機的概念 我們所用的移動電話，通常稱為手機，是可以在較廣范圍內(nèi)使用的便攜式電話終端，目前已發(fā)展至 4G。手機日日隨身備用，在數(shù)碼產(chǎn)品當(dāng)中使用率是最高的。手機已成為時代的必須品，隨著技術(shù)水平的提高，人們在對手機需求的同時，對它的造型以及款式的要求也很高，當(dāng)然也少不了手機的操作界面，較以往更加人性化，各種手機界面圖標(biāo)主題層出不窮，方便使用人員的操作以及視覺上的享受不一樣的效果。 互設(shè)計的概念和發(fā)展歷史 具 體來說，人機交互用 戶與含有計算機機器之間的雙向通信，以一定的符號和動作來實現(xiàn)，如擊鍵，移動鼠標(biāo)， 觸屏、傳感、 顯示屏幕上的符號 /圖形等。這個過程包括幾個子過程：識別交互對象 把握對象情態(tài) 人機界面是指用戶與含有計算機的機器系統(tǒng)之間的通信媒體或手段，是人機雙向信息交互的支持軟件和硬件。這里界面定義為通信的媒體或手段，它的物化體現(xiàn)是有關(guān)的支持軟件和硬件，如帶有鼠標(biāo)的圖形顯示終端等。交互式設(shè)計與其他元素的關(guān)系如下圖 3 示說明 面設(shè)計的概念 界面設(shè)計是人與機器之間傳遞 和交換信息的媒介，包括硬件界面和軟件界面，是計算機科學(xué)與心理學(xué)、設(shè)計藝術(shù)學(xué)、認知科學(xué)和人機工程學(xué)的交叉研究領(lǐng)域。近年來，隨著信息技術(shù)與計算機技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)技術(shù)的突飛猛進，人機界面設(shè)計和開發(fā)已成為國際計算機界和設(shè)計界最為活躍的研究方向。軟件用戶界面（ 指軟件用于和用戶交流的外觀、部件和程序等等。如果你經(jīng)常上網(wǎng)的話，會看到很多軟件 設(shè)計 很樸素，看起來給人一種很舒服的感覺；有點軟件很有創(chuàng)意，能給人帶來意外的驚喜和視覺的沖擊；而相當(dāng)多的軟件頁面上充斥著怪異的字體， 花哨的色彩和圖片，給人網(wǎng)頁制作粗劣的感覺。軟件界面的設(shè)計，既要從外觀上進行創(chuàng)意以到達吸引眼球的目的，還要結(jié)合圖 4 形和版面設(shè)計的相關(guān)原理，從而使得軟件設(shè)計變成了一門獨特的藝術(shù)。 互設(shè)計和界面設(shè)計的區(qū)別 從廣義上來說，也可以認為界面設(shè)計包含交互設(shè)計，在這樣的情況下，它同時還包含另外的部分例如外觀設(shè)計或平面設(shè)計，這些都是可以單獨進行研究的更細的分支。交互設(shè)計更加注重產(chǎn)品和使用者行為上的交互以及交互的過程 。而 界面是一個靜態(tài)的詞，當(dāng)進行界面設(shè)計的時候，我們關(guān)心的是界面本身，界面的組件，布局，風(fēng)格，看它們是否能 支撐有效的交互，但是，交互行為是界面約束的源頭，當(dāng)產(chǎn)品的交互行為清清楚楚地定義出來時，對界面的要求也就更加清楚了，界面上（如果存在可視界面的話）的組件是為交互行為服務(wù)的，它可以更美，更抽象，更藝術(shù)化，但不可以為了任何理由破壞產(chǎn)品的交互行為。 第二章 手機圖標(biāo)交互設(shè)計的發(fā)展前景 互的概念及交互設(shè)計的原則 人機交互是指人與計算機之間使用某種對話手段，以一定方式，為完成確定任務(wù)而進行的人機之間信息交換的過程。人機交互方式是指人機之間交互信息的組織形式或語言方式，又稱對話方式，交互技術(shù)等。人機通過不同的人 機交互方式實現(xiàn)成人向計算機輸入信息以及計算機向人輸出信息的工作，常用的人機交互方式有：問答式對話、菜單技術(shù)、命令語言、填表技術(shù)、查詢語言、自 5 然語言、圖形方式及直接操縱等。交互設(shè)計時應(yīng)該遵循以下的原則 。 友好性是指用戶操作系統(tǒng)時主觀操作的復(fù)雜性，如果主觀操作復(fù)雜性越低即系統(tǒng)越容易使用，則說明系統(tǒng)的用戶友好性越好。例如在設(shè)計幼兒課件時，由于兒童的手的活動還不是很靈活，難以通過拖動鼠標(biāo)來完成屏幕對象的移動，因此盡量避免設(shè)計這一類的游戲活動，而多采用單擊鼠標(biāo)左鍵等方法來進行游戲。如果交互界面友好，系統(tǒng)能容易地處理各種基本交互：例如各種輸入、輸出功能、通信功能以及擴展功能等。 交互系統(tǒng)靈活性是指系統(tǒng)能用不同的交互方式去完成某一特定目標(biāo)，也就是說，交互方式不應(yīng)該是死板的、不可改變的。 交互系統(tǒng)靈活性應(yīng)該包含以下含義： （ 1） 系統(tǒng)能完全適應(yīng)各類用戶（從偶然型用戶、生疏型用戶到熟練型用戶，直至專家型用戶）的使用需要，提供滿足各種要求的界面形式，但是不同的界面形式?jīng)Q不會影響系統(tǒng)任務(wù)的完成，因為系統(tǒng)完成的任務(wù)僅由用戶及其目標(biāo)決定，而不應(yīng)由交互方式?jīng)Q定。 （ 2） 用戶可以根據(jù)需要 制定或修改交互方式，在需要修改、擴充系統(tǒng)功能的情況下，也可以提供動態(tài)的交互方式，如修改命令、設(shè)置動態(tài)菜單等。 6 （ 3） 系統(tǒng)能按照用戶的希望和需要提供不同詳細程度的系統(tǒng)響應(yīng)信息（包括反饋信息、 提示信息、幫助信息、出錯信息等）。為使交互系統(tǒng)靈活，不能簡單地提供大量界面去對付每一種可能情況，較好的方法是通過動態(tài)分析用戶狀態(tài)和模型，把用戶模型作為系統(tǒng)設(shè)計的一個因素，從而建立起靈活的系統(tǒng)，當(dāng)然使系統(tǒng)有高靈活性是要付出代價的，它將導(dǎo)致程序復(fù)雜化和運行效率的下降。 交互系統(tǒng)的功能是指交互系 統(tǒng)對每一用戶命令所能完成的工作量，如果一條命令能完成許多任務(wù)，則說明它的功能強。使用者都希望系統(tǒng)提供強有力的命令，然而同時應(yīng)考慮與用戶具有的知識和能力相符合。 交互系統(tǒng)的明確性是指系統(tǒng)功能和行為對用戶是明確、清楚的，這意味著不管系統(tǒng)本身是多么復(fù)雜，用戶心目中的系統(tǒng)都具有清晰的、一致性的模型，用戶可清楚地了解系統(tǒng)的功能并隨時預(yù)測系統(tǒng)的行為。 交互系統(tǒng)的一致性首先是指系統(tǒng)采用一致的方式工作，要求系統(tǒng)工作方式或處理問題的步驟盡可能和人的思維方式一致；其次是指系統(tǒng)不同部分及不同系統(tǒng)之間有相似的交互顯示格式和相似的人機操作方式。一致性的交互系統(tǒng)可幫助用戶把他們當(dāng)前知識 7 經(jīng)驗推廣運用到新系統(tǒng)、新命令、新操作中去，從而減輕用戶重新學(xué)習(xí)和記憶的負擔(dān)。 交互系統(tǒng)的可靠性是指系統(tǒng)正常（無故障）工作的能力。交互系統(tǒng)應(yīng)使用戶能正確地使用系統(tǒng)，保證有關(guān)程序和數(shù)據(jù)的安全。另外，系統(tǒng)應(yīng)具有一定的容錯能力。 圖形 具有直觀形象、信息量大等優(yōu)點，因此使用圖形和比喻來表示程序、實體和操作，使用戶的操作及響應(yīng)直接可視和逼真。 使用圖形和比喻設(shè)計交互時應(yīng)做到以下幾點： （ 1） 用戶控制軟件及運行。由用戶決定、定義應(yīng)用程序以何種交互方式進行工作，用戶可以選擇軟件的交互方式。 （ 2） 用戶直接操控，用戶通過借助直觀、可視的屏幕對象，直接控制軟件的運行。 （ 3） 保持應(yīng)用系統(tǒng)交互與現(xiàn)實世界的一致性，不同系統(tǒng)之間和應(yīng)用系統(tǒng)內(nèi)部交互的一致性，使它們有相似的外觀和操作。 （ 4） 使用可分辨的比喻，增加系統(tǒng)的可理解性和易學(xué)易用性 （ 5） 適應(yīng) 和認識人類的能力及弱點，使交互活動滿足人的認知、行為因素的要求，充分發(fā)揮人、機兩方面的特長。 8 機圖標(biāo)交互式設(shè)計的發(fā)展前景 當(dāng)今社會，科學(xué)技術(shù)突飛猛進，新興產(chǎn)業(yè)的興起主要靠的是知識的創(chuàng)新。例如諾基亞企業(yè)憑借充滿靈感的設(shè)計迅速從強大的競爭對手中奪取自己的市場份額，而創(chuàng)新是提高競爭力的有效手段。當(dāng)那些市面上琳瑯滿目功能齊全的手機出現(xiàn)在消費者面前時，越來越多的人開始注重手機的美化。這其中也包括了手機美容這種新興行業(yè)的發(fā)展。 機，在改變越來越多傳統(tǒng)的人對于手機使用的觀念，尤其是時下的年輕人。他們對于個 性的追求更加強烈。手機美容正是在這種背景下產(chǎn)生的，早在 2000 年初日韓等國便已開始，現(xiàn)已發(fā)展成為市場炙手可熱非常成熟的一個服務(wù)產(chǎn)業(yè)。如飾品、鍍膜、實物彩色快印，而現(xiàn)在發(fā)展最快，賺得利潤最高的是手機貼膜，裝在手機機身表面、屏幕及其他有形物體的一種冷裱膜，這樣手機可以煥然一新、光亮奪目，不僅可以起到舊機翻新的效果，而且可以防水、防止灰塵進入鍵盤、屏幕，起到保護的作用?，F(xiàn)在，這種行業(yè)在大街熱鬧的地方或者流行的區(qū)域頻頻出現(xiàn)。不過手機美容僅僅是局限于手機外觀的美化，對于手機界面圖標(biāo)的美化，這種卻出現(xiàn)的很少。很多商家只 是注重產(chǎn)品開發(fā)的形態(tài)以及功能，數(shù)碼產(chǎn)品，其外觀及功能越來越趨向同化，很難有更大的突破。即使產(chǎn)品出現(xiàn)新技術(shù)新功能新形態(tài)設(shè)計，也會被同類產(chǎn)品爭先模仿，往往難以突破這一瓶頸。而市場上對于手機交互式設(shè)計這一塊涉及的領(lǐng)域卻不多。人們?yōu)榱俗非笫謾C個性化總是喜歡去網(wǎng)上下載一些主題圖標(biāo)，除此之外很少有別的渠道進行美化手機固件。但往往手機主題下的都是千篇一律，出現(xiàn)重復(fù)的現(xiàn)象也并不稀奇。要是有種專門為自身喜好訂做的手機主題，那無疑是時尚的領(lǐng)軍人物，而專門從事這種行業(yè)的人少之又少。對于手機的交互式設(shè)計，所用到的技術(shù)也是很簡單的， 無非就是平面軟件的設(shè)計。而平面軟件，它往往上手難度相對不是很高，只要用心去做，并富有 9 一定的創(chuàng)造力和想象力，并把握時下流行的方向，就能制作出一款很棒的手機主題。比起對數(shù)碼產(chǎn)品設(shè)計那種冗長的三維造型，對尺寸結(jié)構(gòu)的精密分析，平面軟件的設(shè)計相對有趣味性。市場決定設(shè)計開發(fā)的方向及理念，只有用創(chuàng)新的思想做產(chǎn)品設(shè)計，才可使自己與其他人處于同一起跑線上甚至領(lǐng)先于其他人之前，置自己于絕對的競爭優(yōu)勢地位。 第三章 手機交互設(shè)計 題背景 一個設(shè)計師 ,首先應(yīng)以創(chuàng)新求變?yōu)樽约旱脑O(shè)計理念 ,以產(chǎn)品的不斷革新發(fā)明為自身的宗旨。從 這個意義說 ,工業(yè)設(shè)計體現(xiàn)了人類精神積極進取的一面。要給予想象，給予創(chuàng)造。 好的構(gòu)思就能造就好的產(chǎn)品，供世人賞析。 目前，市面上的手機大致分為商務(wù)手機、相機手機 、學(xué)習(xí)手機 、老人手機 、音樂手機 、電視手機 、游戲手機 、隱形手機 、智能手機。每種手機均能滿足不同身份的人使用。例如學(xué)習(xí)手機，適合學(xué)生使用，商務(wù)手機則適合辦公的人使用。各個年齡段使用的手機也有所不同，像年輕人比較傾向于音樂手機，游戲手機，而老年人則喜歡使用老年手機。也可以根據(jù)愛好的不同手機類別的受眾也有所區(qū)別，如愛好攝影的用相機手機等等。市面上 的這些手機外觀顏色上上往往或多或少地接近符合手機定位的主要人群。 因此，手機圖標(biāo)的設(shè)計也要符合以上所述的。首先，不用急著去想主題的內(nèi)容，而是去思考設(shè)計的主題到底符合那種類型的手機，甚至是哪個公司的何款手機。 10 題確定 本人制作一款手機圖標(biāo)主題，比較符合音樂手機的主題。音樂手機，顧名思義，是 手機的相加，但并非簡單的疊加，其同時還必須擁有一個可靠的數(shù)字音樂播放器，能夠支持 開放的標(biāo)準(zhǔn)音樂格式，并且產(chǎn)品的容量需求等方面均有一定的要求。同時，音樂手機還需要具備音樂搜索、音樂下載和從其他 設(shè)備上傳輸音樂文件的功能。鑒于音樂手機在產(chǎn)品、價格、技術(shù)、使用以及業(yè)務(wù)應(yīng)用方面有很大的突破點，因而在短期內(nèi)能夠擔(dān)當(dāng)市場主流的重任，并得到迅速普及與發(fā)展。音樂娛樂功能得到大力推廣，個性化及時尚非常受年輕人的歡迎。年輕人雖是手機用戶的主要受眾，但它不僅適合年輕人，只要喜歡音樂的人都適合使用。不像一些如商務(wù)手機那樣有局限性。 主題有很多可以考慮的方向，也結(jié)合音樂手機的特點進行選擇。我選擇以復(fù)古為主調(diào)的手機圖標(biāo)。此外，設(shè)計的方向主要走歐 11 式風(fēng)格的，與主題的形象相一致。 題制作的難點及解決方案 確立好主題 后，仔細分析其制作存在的問題。盡管主題的制作簡單，不用太過復(fù)雜的工具，僅僅使用一些 平面軟件具可以了，但簡單有時也意味著設(shè)計的單調(diào)性，如何在主題簡單的情況下設(shè)計出富有創(chuàng)造力時尚感的圖標(biāo)，這是本人要認真去探索的?？梢匀ソ梃b網(wǎng)上的一些素材圖片，尋求靈感?？梢砸牒芏嗨夭模诓挥绊懻w性的情況下，盡可能避免直接使用其形象，要對它的組成進行細致的分析，進行夸張的變形，甚至直接取用形象的整體顏色，但給使用者直觀地感受到主題。這是難點，也是值得挑戰(zhàn)的地方。 第四章 手機圖標(biāo)的設(shè)計過程 制草 圖 意思想 先市場上大多都是智能手機，而智能手機大多都是年輕人在使用， 12 年輕人是一群比較張揚個性的群體，因此在設(shè)計時考慮的是年輕人這一大群體的心理?，F(xiàn)代經(jīng)濟飛速發(fā)展，人們的生活節(jié)奏越來越快，也就越來越感懷懷舊，就我個人而言也是非常喜歡有材質(zhì)感有復(fù)古感的東西，所有首先就被復(fù)古這個詞牽引了。瀏覽了一個主題的軟件，發(fā)現(xiàn)復(fù)古的圖標(biāo)界面和有材質(zhì)感的圖標(biāo)界面是下載的非常多的，但是同時具有材質(zhì)感和復(fù)古兩種元素的圖標(biāo)界面卻是很少的。因此更加確定了這一設(shè)計方向。 制整體界面 桌面底部圖片 如圖 44示，先用 好外框，然后導(dǎo)出，導(dǎo)出的是矢量圖，再導(dǎo)入 ，進行一定的后處理，圖 4完成后的手機底部圖片。 圖 413 圖 4 414 考市面上的各種手機菜單 圖 4納要設(shè)計的菜單內(nèi)容，分別對其選項進行繪制 先用 畫草圖，并貼上顏色， 再用 添加材質(zhì)，添加圖層樣式，使圖標(biāo)具有復(fù)古材質(zhì)感（如圖 44 圖 415 圖 4 416 終效果 圖 4部圖標(biāo)如下 17 全部功能欄圖標(biāo)歸類整理如下圖 18 19 結(jié)論 本文通過對手機界面圖標(biāo)分析和設(shè)計，得出以下結(jié)論： （ 1）通過此次設(shè)計