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