1、個性化手機(shu j)UI設(shè)計(shj)與研究(ynji)目 錄 TOC o 1-3 h z u HYPERLINK l _Toc377576650 摘 要 PAGEREF _Toc377576650 h 2 HYPERLINK l _Toc377576651 第 1 章緒論 PAGEREF _Toc377576651 h 3 HYPERLINK l _Toc377576652 第 2 章UI設(shè)計的相關(guān)理論 PAGEREF _Toc377576652 h 3 HYPERLINK l _Toc377576653 2.1UI的定義和含義 PAGEREF _Toc377576653 h 3 HYP

2、ERLINK l _Toc377576654 2.2UI設(shè)計的分類 PAGEREF _Toc377576654 h 4 HYPERLINK l _Toc377576655 2.3UI設(shè)計的原則 PAGEREF _Toc377576655 h 4 HYPERLINK l _Toc377576656 2.4手機UI的設(shè)計原則和基本要素 PAGEREF _Toc377576656 h 5 HYPERLINK l _Toc377576657 2.4.1手機UI要遵循的基本原則 PAGEREF _Toc377576657 h 5 HYPERLINK l _Toc377576658 2.4.2手機UI設(shè)計

3、的要素 PAGEREF _Toc377576658 h 10 HYPERLINK l _Toc377576659 第 3 章目前手機UI的現(xiàn)狀和優(yōu)劣勢分析 PAGEREF _Toc377576659 h 11 HYPERLINK l _Toc377576660 3.1目前手機UI的現(xiàn)狀 PAGEREF _Toc377576660 h 11 HYPERLINK l _Toc377576661 3.2目前手機市場份額統(tǒng)計 PAGEREF _Toc377576661 h 11 HYPERLINK l _Toc377576662 3.3用戶需求 PAGEREF _Toc377576662 h 11 H

4、YPERLINK l _Toc377576663 3.4在手機UI中整體性與個性的統(tǒng)一 PAGEREF _Toc377576663 h 12 HYPERLINK l _Toc377576664 第 4 章總結(jié) PAGEREF _Toc377576664 h 12 HYPERLINK l _Toc377576665 參考文獻 PAGEREF _Toc377576665 h 13摘 要本文(bnwn)首先對手機(shu j)UI的設(shè)計原則(yunz)和要素進行了探討，并對目前在售的在售的各類型系統(tǒng)手機的主要產(chǎn)品界面進行分析與對比。其次對不同消費人群購買和使用手機的意向進行了分析，以此為基礎(chǔ)對各個主

5、流的手機界面進行了分析。最后通過對比得出了個性化手機界面的特點，從而設(shè)計了個性的手機界面。關(guān)鍵詞：手機UI，個性化，用戶友好性緒論(xln) 步入21世紀(jì)后，電子產(chǎn)業(yè)的發(fā)展日新月異，技術(shù)的進步使得(sh de)成本下降，各種電子產(chǎn)品開始(kish)由昂貴的奢侈品成為人們?nèi)粘５南M品。手機、平板電腦等各類電子產(chǎn)品層出不窮，在這些產(chǎn)業(yè)中，無法方便攜帶的計算機在消費市場上早已是日暮黃昏，移動終端正在漸漸的侵蝕著曾經(jīng)計算機領(lǐng)域許許多多的市場。在企業(yè)市場中，雖然便攜式多功能的多媒體終端還未真正成為一名合格的員工，但是可便攜性使得人們可以隨時隨地的使用它們處理簡單企業(yè)實例問題等，這也使得移動終端更為迅猛的

6、發(fā)展。而在這些品類繁多移動終端中，手機尤其是智能手機可謂是最耀眼的明星，它的發(fā)展與壯大是隨著人們對生活品質(zhì)的要求飛躍式的發(fā)展的。在經(jīng)歷的低潮后，手機產(chǎn)業(yè)會如井噴一樣快速的成長，目前已經(jīng)成為如今的消費市場中的支柱產(chǎn)業(yè)。本文主要從手機UI的設(shè)計的發(fā)展來闡述用戶界面的設(shè)計對使用人群影響進行研究，通過運用比較分析的方法進行分析和例證。本課題以手機的UI為研究的對象，UI的設(shè)計基本的理論入手，尋求探討在以信息為代表的21世紀(jì)，在產(chǎn)品的設(shè)計逐步走向多層次化、個性化的基調(diào)下，手機UI的相關(guān)概念?？紤]UI設(shè)計時所要準(zhǔn)尋的原則，選擇時考慮的因素，使用時形成的習(xí)慣等，探求其未來發(fā)展的趨勢。本文著重于手機UI設(shè)計的

7、實用性和易用性，兼顧可視化的效果和美觀，從不同系統(tǒng)的手機的比較到同系統(tǒng)不同系統(tǒng)版本的UI以及同系統(tǒng)同版本不同廠商的定制后的UI進行對比。從各類型UI的差異化設(shè)計入手，分析各個智能操作系統(tǒng)的手機UI設(shè)計案例，從而研究差異化中的相似性與人性化，并對手機UI的差異化設(shè)計進行了展望。UI設(shè)計的相關(guān)理論UI的定義和含義 UI即User Interface( HYPERLINK /view/362528.htm t _blank 用戶界面)的簡稱。在人和機器的互動過程中，有一個層面，即我們所說的 HYPERLINK /view/240704.htm t _blank 界面（ HYPERLINK /view

8、/334756.htm t _blank interface）。從 HYPERLINK /view/4268.htm t _blank 心理學(xué)意義來分， HYPERLINK /view/240704.htm t _blank 界面可分為感覺（視覺、觸覺、聽覺等）和情感兩個層次。 HYPERLINK /view/440933.htm t _blank 用戶界面設(shè)計是屏幕產(chǎn)品的重要組成部分。界面設(shè)計是一個復(fù)雜的有不同學(xué)科參與的 HYPERLINK /view/48840.htm t _blank 工程，認知 HYPERLINK /view/4268.htm t _blank 心理學(xué)、設(shè)計學(xué)、 HY

9、PERLINK /view/9995.htm t _blank 語言學(xué)等在此都扮演著重要的 HYPERLINK /view/60371.htm t _blank 角色1。 HYPERLINK /view/43210.htm t _blank 軟件界面設(shè)計就像工業(yè)產(chǎn)品中的 HYPERLINK /view/1708895.htm t _blank 工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要賣點。一個友好美觀的 HYPERLINK /view/240704.htm t _blank 界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點。 HYPERLINK /view/119481.htm t _b

10、lank 界面設(shè)計不是簡單的畫畫，他要求確定使用人群、方式、環(huán)境并且為設(shè)計的目的是為了用戶，是一種科學(xué)而又藝術(shù)的設(shè)計。對于最終界面的檢驗要以用戶的滿意度為標(biāo)準(zhǔn)，因此UI在設(shè)計時始終應(yīng)該貫穿的思想就是用戶要什么我們就做什么。UI設(shè)計(shj)的分類源于對用戶設(shè)計的各種原因的考察，界面設(shè)計往往被分為(fn wi)三類。UI設(shè)計不是(b shi)完全獨立的，三類界面設(shè)計之間往往交叉進行2。一、功能性界面。對其來說，它實現(xiàn)的是使用性內(nèi)容，功能性UI界面設(shè)計要建立在符學(xué)的基礎(chǔ)上。二、情感性界面。主要任務(wù)是向人傳遞情感，任何一個產(chǎn)品或者作品只有與人的情感產(chǎn)生共鳴才能為人所接受。三、環(huán)境性界面。不論何種設(shè)計

11、都與環(huán)境密切相關(guān)，這里的環(huán)境是只我們所處的社會與文化的大環(huán)境。于外部環(huán)境之中而言，面對的是群體，因此不能只關(guān)注個體。UI的設(shè)計和信息的傳達都不能是于環(huán)境之外獨立存在的，現(xiàn)實條件與精神條件是界面設(shè)計組成的重要因素?？梢哉f，功能性界面是基礎(chǔ)，而環(huán)境性界面前提，核心則是情感性界面。三者之間相互依存，從而讓界面設(shè)計從形式和內(nèi)容上都得到提升。交互界面的分類可以說是不存在完全對立的，這三類設(shè)計之間有著這樣那樣的交叉，就像簡單的問候是一種功能性界面可以說，但是更多的是給用戶帶來情感上的歸屬。UI設(shè)計的原則 = 1 * GB2 置界面于用戶的控制之下，以用戶為主體所謂置界面于用戶的控制之下就是要了解用戶的需求

12、，要知道他所要在UI下需要獲得的功能，尋找出用戶喜好的UI，只有把用戶的目的當(dāng)作自己的目標(biāo)進行設(shè)計，充分的關(guān)注使用的群體，這樣才能夠設(shè)計出一個可以完成用戶需求的UI界面。UI并不是程序而是使用者與程序交流的途徑，因此要求其能夠通過UI向用戶傳達信息進行服務(wù)。界面的設(shè)計為的是用戶而不是程序員。 = 2 * GB2 減少 HYPERLINK /view/200012.htm t _blank 用戶的記憶負擔(dān)，保持一致性使用者是UI的設(shè)計的使用主體，較為統(tǒng)一的風(fēng)格可以減少用戶所要記憶的特征，于用戶而言就可以說是簡易好用。相反，一個界面設(shè)計時如果不能保持界面的一致性，就會讓用戶覺得雜亂，無從使用，最終

13、使得使用者不知道設(shè)計者要向其傳達的使用信息而無法使用。包括設(shè)計目標(biāo)一致、元素外觀一致、交互行為一致三個方面是UI設(shè)計要遵循的重要原則之一。 = 3 * GB2 重視模型對于用戶而言，沒有什么比現(xiàn)有的UI更讓自己熟悉的了，對于現(xiàn)有的UI無需在去適應(yīng)學(xué)習(xí)使用，因此我們要學(xué)會利用現(xiàn)有的界面模型，通過對其功能的改變就可以達到相應(yīng)的目的。 = 4 * GB2 運用視覺(shju)等級“設(shè)計(shj)師可以從混亂中找到統(tǒng)一；他們可以通過組織操控文字、圖片從而清晰地傳達設(shè)計意圖。”設(shè)計時，要讓用戶的注意力集中(jzhng)在重要的地方。用戶注意的地方要完整而清晰的表達設(shè)計者所要傳達的信息，而每一個元素的大小

14、、顏色還有位置都會影響到用戶對設(shè)計者要表達的信息的理解。 = 5 * GB2 保持簡潔界面簡介可以讓用戶更為簡易的使用操作和理解設(shè)計者所要傳達的信息。因此UI的設(shè)計要以用戶最少的操作達到最大的目標(biāo)作為設(shè)計的原則，所以設(shè)計者不要試圖在設(shè)計中加入自我喜好的元素。手機UI的設(shè)計原則和基本要素手機UI要遵循的基本原則通過上一節(jié)關(guān)于UI設(shè)計的原則分析，我們了解到UI設(shè)計時要遵循的基本原則。然而作為典型的移動終端工具來說，手機UI設(shè)計更要遵循一定的原則3。大體上講，手機UI或者說UI的一般都要準(zhǔn)尋結(jié)構(gòu)、交互、視覺這幾個方面的設(shè)計才能呈現(xiàn)在用戶眼前。 = 1 * GB2 結(jié)構(gòu)設(shè)計巍巍高聳的高樓得以不倒，其主

15、要的原因是地基和大樓的結(jié)構(gòu)。同樣的，一個交互界面發(fā)展的長久與否也與界面的結(jié)構(gòu)有莫大的關(guān)系，結(jié)構(gòu)是設(shè)計的框架，是設(shè)計的基礎(chǔ)。它決定了界面下有怎樣的功能，使用者如何操控使用它，因此結(jié)構(gòu)的設(shè)計可謂是最為基礎(chǔ)的工作，卻又是相當(dāng)重要的工作，因為它能為我們設(shè)計提供更為廣闊的空間，也是設(shè)計好壞的重要判斷依據(jù)。我們以三大手機智能操作系統(tǒng)的UI結(jié)構(gòu)為例來討論，手機UI是要向使用者傳達用戶所要使用的信息4。因此是數(shù)據(jù)的流動，而信息傳遞的載體則是用戶感知和使用信息的基礎(chǔ)，因此結(jié)構(gòu)設(shè)計在此可以分為兩個部分，信息架構(gòu)和信息表達，通過用戶的使用進行信息反饋，從而顯示用戶想要獲得的內(nèi)容。以Windows phone8為例。

16、通過對Windows phone8界面的識別我們可以看到其采用了類似雙屏加磁鐵的設(shè)計。磁鐵是整個界面最具有代表性的元素，其動態(tài)的效果是WP系列手機的一大特點。首先就是更多不同顏色方案，多大二十種不同主題色彩可以很好的為整體的界面帶來個性化的東西，這代表了每個人內(nèi)心的動。統(tǒng)一(tngy)中暗藏“動”的元素(yun s)其次另一個動的表現(xiàn)就是每個動態(tài)磁磚，有些磁磚本身就會產(chǎn)生動，例如人脈、通訊錄、圖庫這些磁磚外表是跟其他的沒有區(qū)別，但它顯示時會本身應(yīng)用內(nèi)部的一些信息。圖庫呈現(xiàn)為最大圖標(biāo)時，它可以以幻燈片方式(fngsh)緩慢的滾動著照片。通訊錄則會將聯(lián)系人的頭像翻轉(zhuǎn)顯示，讓聯(lián)系人富有了一定的生機。

17、可以說動態(tài)磁磚是WP8系統(tǒng)結(jié)構(gòu)的基礎(chǔ)，正是基于這樣的結(jié)構(gòu)才有了界面這樣的布局，通知在磁磚中提示讓用戶可以不用打開應(yīng)用就可以了解到用戶所需要的信息，使得用戶可以更簡單明了的操作這個系統(tǒng)?；谶@樣的結(jié)構(gòu)設(shè)計下，相關(guān)配套的設(shè)計也應(yīng)運而生，如鎖屏、設(shè)置等等。就鎖屏來說，Windows phone8選擇了和Windows8一樣的向上滑動解鎖的方式，簡單明了是我唯一能想到的詞匯。WP8鎖屏界面WP8的鎖屏界面除了一般的手機狀態(tài)信息外還提供了多種應(yīng)用信息的推送顯示，例如消息，郵件等等，相信這也是和WP8的磁磚界面構(gòu)架有相當(dāng)大的關(guān)系的，在此類界面下，沒有通知欄，加入鎖屏界面不能很好的推送消息，那么用戶在使用時

18、簡單的應(yīng)用也要進行解鎖操作是相當(dāng)不簡便的，這不符合UI設(shè)計的基本原則。鑒于WP8手機沒有設(shè)計(shj)功能鍵這一設(shè)計結(jié)構(gòu)，我們(w men)通過使用發(fā)現(xiàn)在每個單獨(dnd)的應(yīng)用中，它還有相應(yīng)的二級頁面或者三級頁面設(shè)置。因此當(dāng)我們進入一個應(yīng)用后，可以直觀的看到它還會分裂出一些二級設(shè)置頁。對于 HYPERLINK / 相機的設(shè)計這個有些特殊，它將設(shè)置以及切換都放置在底部，當(dāng)我們需要進行設(shè)置時可以向上滑動來進行設(shè)置的選擇，如果你知道每個圖標(biāo)的功能那也可以直接點擊進行設(shè)置切換。顯然，正是由這些顏色各異互不相同的磁磚組成了我們現(xiàn)在眼中的WP8系統(tǒng)整體的界面，也正是由于這樣設(shè)計的架構(gòu)使得界面的設(shè)計呈現(xiàn)出

19、多層次、多級別動態(tài)顯示的特點。從WP8系統(tǒng)界面開發(fā)的原則來看，手機UI結(jié)構(gòu)的設(shè)計原則就是將目標(biāo)任務(wù)層次化，多級展開來進行設(shè)計，這樣一步步的構(gòu)建整個系統(tǒng)的架構(gòu)。 = 2 * GB2 交互設(shè)計產(chǎn)品的設(shè)計的目標(biāo)客戶是人類，在進行UI設(shè)計時，人-機如何交互是產(chǎn)品世紀(jì)的重要環(huán)節(jié)之一，交互設(shè)計的優(yōu)劣也直接關(guān)系到整個產(chǎn)品設(shè)計的成敗。對于硬件界面這里我們不過多闡述，這里主要以安卓系統(tǒng)界面上的人機交互為例來說明人機交互在設(shè)計時要準(zhǔn)尋的一些原則。對于軟件UI的設(shè)計，其根本目標(biāo)就是(jish)為了讓用戶更加簡單的完成所要達成的任務(wù)，用戶在操作使用時一定要作為使用的主體，使用戶感覺到是自己在操控手機而不是被手機所操控

20、。安卓4.4原生(yun shn)界面可以(ky)看到，安卓系統(tǒng)主頁面和鎖屏頁面都有一個重要的特點-看上去干凈明亮，這個格調(diào)貫穿著整個系統(tǒng)。此外，從前標(biāo)志性的藍色色調(diào)也不見了蹤影，被換成了更淺的色調(diào)。谷歌還改變了透明度的處理，將深黑色的背景換成了半透明的白色?？傮w上看，整個系統(tǒng)感覺上更加簡單、漂亮、機械化。從上圖中我們可以簡單的總結(jié)一下手機UI開發(fā)過程中交互界面設(shè)計時要遵循的幾個原則： = 1 * GB3 界面效果的整體性、一致性手機軟件運行于手機操作系統(tǒng)的軟件環(huán)境，界面的設(shè)計應(yīng)該是基于這個應(yīng)用平臺的整體風(fēng)格，這樣有利于產(chǎn)品外觀的整合。 = 2 * GB3 界面效果的個性化那么我們追求界面的整

21、體性以及一致性，是不是就是說就可以忽視軟件界面的個性化的特征呢？整體性和一致性是基于手機系統(tǒng)視覺效果的和諧統(tǒng)一而考慮，個性化是基于軟件本身的特征和用途而考慮。 = 3 * GB3 界面視覺元素的規(guī)范盡量使用較少的色深表現(xiàn)色彩豐富的圖形圖像，既確保數(shù)據(jù)量小又確保圖形圖像的效果完好，使圖形圖像在軟件系統(tǒng)中所占數(shù)據(jù)量盡量減小，提高程序的工作效率。界面上的線條和色塊后期都會用程序來實現(xiàn)，這就需要考慮程序部分和圖像部分的結(jié)合，需要自然的結(jié)合才能協(xié)調(diào)界面效果的整體感，所以需要程序員與界面設(shè)計人員的密切溝通，達成一致。整體是holo風(fēng)格富有(fyu)科技感 = 3 * GB2 視覺(shju)設(shè)計（IOS7

22、為例）界面(jimin)的視覺元素有很多，例如布局、語言、文字、圖標(biāo)和色彩等，而這些單位的元素整體組合出設(shè)計者想要給用戶展示的內(nèi)容，以期能夠向用戶傳達有用的信息，這就是視覺設(shè)計的整體意義。那么這些單元要如何設(shè)計呢？這就是下面我們要討論的內(nèi)容。 = 1 * GB3 布局就屏幕的布局來說，設(shè)計者在設(shè)計時應(yīng)當(dāng)站在用戶的角度不僅要考慮界面的實用性，也要考慮用戶可能會長期使用這個界面，因此大方得體美觀的界面布局又顯得尤為重要。在布局中要把握幾個原則：對稱原則、可預(yù)測原則、清晰原則、規(guī)范化。對稱原則指的是注意界面顯示的內(nèi)容要左右相對稱，不能夠在一方或上下的一邊顯得過為擁擠，以免用戶在使用時產(chǎn)生視覺疲勞和識

23、別錯誤信息?？深A(yù)測原則指的是界面的內(nèi)容顯示要能夠上下連貫，不宜又過大的視覺變換。清晰原則指的是內(nèi)容清晰可讀是使用的最基本保證。規(guī)范化原則指的是規(guī)劃的設(shè)計有利于系統(tǒng)的二次開發(fā)。IOS7整體扁平化格式化的圖標(biāo)布局 = 2 * GB3 語言和文字語言和文字可以說是UI設(shè)計中最為重要的環(huán)節(jié)之一，使用者想要獲得的信息大部分是通過語言文字獲得的，因此在設(shè)計時盡可能使用標(biāo)準(zhǔn)的用語和容易識別的文字。 = 3 * GB3 圖標(biāo)和色彩(sci)圖片標(biāo)識的功能是手機(shu j)功能在顯示世界中的反映，用戶(yngh)通過它了解使用圖標(biāo)所代表的功能，因此圖片和標(biāo)識的設(shè)計要能完整而清晰的表達該其背后程序的功能。因此設(shè)

24、計要遵循清晰明了、意義明確、協(xié)調(diào)一致的設(shè)計要求。對于界面色彩的使用來說，首先色彩要滿足人們對功能的要求，在此基礎(chǔ)上盡量設(shè)計的更為協(xié)調(diào)，這里的協(xié)調(diào)不僅僅是同一界面上，在進入不同程序時也希望能夠有統(tǒng)一的色調(diào)。對于不同的人群可以設(shè)置不同的界面色彩基調(diào)，從而讓不同用戶在使用時都能滿意。例如，青年人喜歡更為靚麗的色彩，中年消費者喜歡沉重的色彩，女性消費者喜歡粉嫩的色彩等。最后，可以說結(jié)構(gòu)設(shè)計構(gòu)成了UI設(shè)計的基本框架，是交互設(shè)計和視覺設(shè)計的基礎(chǔ)，而交互設(shè)計是結(jié)構(gòu)設(shè)計和視覺設(shè)計之間的橋梁，視覺設(shè)計能夠讓結(jié)構(gòu)設(shè)計在交互設(shè)計上得到內(nèi)在和外表雙方面的升華5。手機UI設(shè)計的要素手機UI設(shè)計的要素包括視覺要素和使用要

25、素兩類，視覺要素是顯示傳遞有用的信息所要使用的要素，其包括文字、圖形、媒體等，使用要素是使用時界面被控制和控制后的反饋信息，使用要素都通過視覺要素來進行表達。手機UI的設(shè)計要素也是手機設(shè)計環(huán)節(jié)重要的內(nèi)容之一。目前手機(shu j)UI的現(xiàn)狀和優(yōu)劣勢分析(fnx)目前(mqin)手機UI的現(xiàn)狀從目前市場上在售的手機來看，谷歌的安卓、微軟的Windows phone系列以及蘋果的IOS系列占據(jù)了市場銷售手機90%以上的市場份額，因此這三種界面UI最具有代表性，而安卓和蘋果又占據(jù)著絕對主導(dǎo)的地位。WP8、IOS、安卓系統(tǒng)解鎖界面通過對比使用我們可以發(fā)現(xiàn)，原生的安卓和IOS目前在系統(tǒng)布局上都走的是扁平

26、化界面的路線，兩者都有下拉的通知欄，都有通知中心，可以說二者有許許多多相似的地方。但是在可定制化上，安卓的確更走在了前列，不管是界面的元素還是界面的功能相比IOS都有很大的進步。目前手機市場份額統(tǒng)計在剛過去的2013年，蘋果公司的iPhone獲得了美國40.6%的手機市場份額，相比前一季度的40.4%有略微上漲。谷歌的安卓的份額從51.8%增長至52.2%，目前仍是美國市場第一的操作系統(tǒng)，微軟的WP系統(tǒng)則獲得了3.2%的份額。用戶需求用戶的需求往往是多方面的、不確定的，需要去分析和引導(dǎo)。用戶的需求是指通過買賣雙方的長期溝通，對用戶購買產(chǎn)品的欲望、用途、功能、款式進行逐步發(fā)掘，將客戶心里模糊的認

27、識以精確的方式描述并展示出來的過程。智能手機的出現(xiàn)使得它無時無刻的侵入著我們的生活，從普通的電話短信，到購物消費等，生活的各個方面。一款智能手機是否合用我們首先要看一下他的系統(tǒng)是否符合使用者的要求，手機的外表多種多樣，但是對于系統(tǒng)來說，世界也不過寥寥幾種，硬件以外真正核心的東西就是軟件-系統(tǒng)。通過調(diào)查發(fā)現(xiàn)，消費者在選購手機時首先會了解產(chǎn)品的口碑，界面的美觀程度，使用的人群，軟件的數(shù)量以及質(zhì)量，價格，操作的簡易程度，硬件配置的高低等幾個方面。我們通過一個表格來識別一下這三大系統(tǒng)間有怎樣的關(guān)系。通過把各項細分，每項以10分為滿分進行(jnxng)打分，分別(fnbi)得出各系統(tǒng)的總分，這與目前市場對這三大系統(tǒng)的認可度基本一致。這與先前我們(w men)看到的市場份額情況基本吻合，去除價格因素以后，IOS