智能手機(jī)UI主題界面交互設(shè)計

1、智能手機(jī)UI主題界面交互設(shè)計摘 要現(xiàn)如今，智能手機(jī)已經(jīng)成為我們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠?。年輕消費群體更是將大量時間耗費在手機(jī)上。技術(shù)的進(jìn)步與市場的需求，合理設(shè)計智能手機(jī) UI 交互界面的重要性顯得格外突出，以用戶為中心的體驗設(shè)計也越來越被重視。手機(jī)主題設(shè)計作為界面交互設(shè)計中的一個新興領(lǐng)域，滿足用戶追求個性化的需求，受到越來越多 UI 設(shè)計師的關(guān)注。如何合理制定交互方式、確定用戶界面風(fēng)格、布局結(jié)構(gòu)與信息展示方式，如何將手機(jī)主題界面設(shè)計與用戶交互體驗有機(jī)的結(jié)合在一起，是當(dāng)下非常值得探討研究的問題。論文通過研究智能手機(jī) UI 主題界面的設(shè)計，在遵循手機(jī)主題設(shè)計的原則基礎(chǔ)上，進(jìn)行手機(jī)主題的系列設(shè)計，

2、完成了本次的設(shè)計方案。希望通過該系列設(shè)計擴(kuò)大設(shè)計手法的使用價值，為手機(jī)主題市場的蓬勃發(fā)展貢獻(xiàn)力量。關(guān)鍵詞： UI 設(shè)計；智能手機(jī)；手機(jī)主題設(shè)計 AbstractNowadays, smart phones have become an indispensable part of our daily life. Young consumers spend a lot of time on mobile phones. With the development of technology and the demand of the market, the importance of reasona

3、bly designing the UI interface of smartphone becomes more and more prominent. User-centered experience design has also been paid more and more attention. As a new field of interface interaction design, mobile phone theme design has attracted more and more attention from UI designers to meet the need

4、s of users in pursuit of personalization. How to reasonably formulate the interaction mode, determine the user interface style, layout structure and information display mode, and how to organically integrate the mobile phone theme interface design and user interaction experience, are currently very

5、worthy of discussion and research. By studying the design of UI theme interface of smartphone, this paper designs a series of mobile phone theme based on the principle of mobile phone theme design, and completes the design scheme. It is hoped that this series of designs will expand the use value of

6、design techniques and contribute to the vigorous development of the mobile phone theme market.Key words: UI design; smartphone; mobile theme design目 錄第一章 緒論31.1 課題來源31.2 課題研究的目的及意義31.3 課題研究內(nèi)容及方法41.3.1 調(diào)查法41.3.2 文獻(xiàn)分析法41.3.3 實證研究法41.3.4 設(shè)計創(chuàng)作法4第二章 智能手機(jī) UI 主題設(shè)計的概況與分析52.1 智能手機(jī) UI 主題設(shè)計的概念52.2 智能手機(jī) UI 主題設(shè)計

7、的國內(nèi)外研究現(xiàn)狀及分析52.2.1 國內(nèi)研究現(xiàn)狀及分析52.2.2 國外研究現(xiàn)狀及分析6第三章 智能手機(jī) UI 主題設(shè)計73.1 手機(jī)壁紙設(shè)計73.2 手機(jī)應(yīng)用圖標(biāo)設(shè)計7第四章 結(jié)論與展望8參考文獻(xiàn)10致謝11天津濱海職業(yè)學(xué)院畢業(yè)設(shè)計（論文）第一章 緒論1.1 課題來源隨著網(wǎng)絡(luò)化和信息化進(jìn)程的加快發(fā)展，現(xiàn)如今，智能手機(jī)已然成為我們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠?。年輕消費群體更是把大量時間耗費在手機(jī)上。有數(shù)據(jù)統(tǒng)計，用戶在使用手機(jī)過程中，兩成時間花費在打電話、發(fā)短信，余下的八成花費在其他事情上，譬如上網(wǎng)瀏覽新聞資訊、觀看視頻節(jié)目、電子閱讀、玩手機(jī)游戲、拍照錄視頻、刷朋友圈等。尤其近幾年運營商應(yīng)用商店和

8、一些獨立的第三方應(yīng)用商店整體呈現(xiàn)蓬勃發(fā)展的趨勢，各類別的 App 層出不窮，將用戶的碎片化時間合理的利用起來，極大豐富了人們的日常生活。技術(shù)的進(jìn)步與市場的需求，合理設(shè)計智能手機(jī) UI 交互界面的重要性顯得格外突出。手機(jī)主題設(shè)計作為界面交互設(shè)計中的一個新興領(lǐng)域，滿足用戶追求個性化的需求，受到越來越多手機(jī)產(chǎn)商與 UI 設(shè)計師的關(guān)注。近幾年各類 UI 設(shè)計大賽的成功舉辦也掀起了智能手機(jī) UI 主題界面交互設(shè)計的熱潮。1.2 課題研究的目的及意義如何合理制定交互方式、確定用戶界面風(fēng)格、布局結(jié)構(gòu)與信息展示方式，如何將手機(jī)主題界面設(shè)計與用戶交互體驗有機(jī)的結(jié)合在一起，是當(dāng)下非常值得探討研究的問題。研究分析手

9、機(jī) UI 主題界面交互設(shè)計風(fēng)格及設(shè)計手法的目的是為了深入了解用戶對智能手機(jī)的需求。滿足用戶需求、優(yōu)化用戶體驗是交互設(shè)計的最終使命。具體說來，我們可以從產(chǎn)品的角度和手機(jī)用戶的角度來分析該課題研究的意義。從產(chǎn)品的角度出發(fā)，研究分析手機(jī) UI 主題界面交互設(shè)計有助于手機(jī)品牌口碑的傳播，促進(jìn)手機(jī)銷售，增大市場份額。試想如果兩款手機(jī)的硬件、外觀、內(nèi)部功能基本相同，那么界面設(shè)計美觀、交互人性合理的那款手機(jī)無疑更能贏得消費者的青睞。只有真正做到讓用戶使用產(chǎn)品時產(chǎn)生情感上的認(rèn)同，品牌之路才能順暢而高遠(yuǎn)。從手機(jī)用戶的角度出發(fā)，美觀的界面設(shè)計和合理的交互設(shè)計是衡量手機(jī)是否值得購買的標(biāo)準(zhǔn)之一。在長期的使用過程中，優(yōu)

10、秀的 UI 主題界面交互設(shè)計能帶給用戶感官上的愉悅和操作上的舒適，讓手機(jī)的使用價值最大化。1.3 課題研究內(nèi)容及方法1.3.1 調(diào)查法調(diào)查法，顧名思義，是為了達(dá)到設(shè)想的目的而進(jìn)行事先制定的研究計劃，通過各種渠道收集到有針對性的圖文信息、音頻視頻、實物信息等進(jìn)行認(rèn)真詳細(xì)的分析、綜合和比對，去了解研究對象某一方面的情況并得出相應(yīng)結(jié)論的科學(xué)研究方法。其目的可以是全面把握當(dāng)前的情況，或是為了揭示某個存在的問題，理清脈絡(luò)，為進(jìn)一步深入的研究和創(chuàng)作提供科學(xué)的觀點和論據(jù)。本文便是通過前期有針對性的研究智能手機(jī)主題設(shè)計的概況，探討主題設(shè)計原則和設(shè)計流程，為后期創(chuàng)作設(shè)計手機(jī)主題提供理論依據(jù)和大致方向。1.3.2

11、 文獻(xiàn)分析法文獻(xiàn)分析法，指查閱搜集、區(qū)分、整理與主題相關(guān)的文獻(xiàn)報告，通過對這些文獻(xiàn)的深入研究分析，形成對事實科學(xué)認(rèn)識的辦法。文獻(xiàn)分析法是一種經(jīng)濟(jì)有效的信息收集方式，通過對相關(guān)對象的現(xiàn)有文獻(xiàn)進(jìn)行定量分析、統(tǒng)計描述進(jìn)而實現(xiàn)對目標(biāo)事物的科學(xué)認(rèn)識。在針對主題設(shè)計這一對象，我們通過查閱相關(guān)文獻(xiàn)來分析并整理歸納出手機(jī)主題設(shè)計涉及到的構(gòu)成元素、國內(nèi)外在手機(jī)主題領(lǐng)域的現(xiàn)狀、擬物化與扁平化風(fēng)格設(shè)計的優(yōu)缺點等。對手機(jī)主題設(shè)計進(jìn)行深入的剖析，利用相關(guān)設(shè)計軟件將主題的構(gòu)成元素制作出來組合在一起，最終展示在用戶的手機(jī)屏幕上。1.3.3 實證研究法實證研究法是通過提供不虛假、有效、確切、精準(zhǔn)的信息去真正認(rèn)識客觀事實的知識

12、研究方法，其重點是研究現(xiàn)象本身的內(nèi)在邏輯及其規(guī)律。以滿足用戶需求、增加手機(jī)主題可用性為出發(fā)點，同時結(jié)合市場調(diào)查問卷，進(jìn)一步確定設(shè)計手法，進(jìn)行智能手機(jī)主題的創(chuàng)作。1.3.4 設(shè)計創(chuàng)作法采取多樣的設(shè)計手法創(chuàng)作獨樹一幟的手機(jī)主題，重點在于把握界面設(shè)計的流行趨勢，恰當(dāng)融入自己構(gòu)想的主題方向，將扁平風(fēng)與擬物風(fēng)合適地調(diào)配在一起。采用合理、有邏輯的排版布局方式，使整體界面美觀大方。通過手繪草圖、軟件設(shè)計、產(chǎn)出主題包等一系列步驟進(jìn)行圖標(biāo)和界面的設(shè)計和創(chuàng)作，讓手機(jī)圖標(biāo)得以在不同的壁紙狀態(tài)下都能很好的突顯出來，手機(jī)主題得以在不同品牌的手機(jī)上完美的應(yīng)用。盡最大努力滿足手機(jī)用戶的個性化需求，為豐富多彩的智能手機(jī)主題世

13、界添磚加瓦。第二章 智能手機(jī) UI 主題設(shè)計的概況與分析2.1 智能手機(jī) UI 主題設(shè)計的概念智能手機(jī)主題的運行是基于其本身的操作系統(tǒng)。當(dāng)前智能手機(jī)操作平臺大致分為三大陣營，安卓陣營、i OS 陣營、Windows Phone 陣營。其中，由 Google公司與開放手機(jī)聯(lián)盟領(lǐng)導(dǎo)及開發(fā)的開源移動 OS安卓系統(tǒng)已然成為全球最大的智能手機(jī)操作平臺，國產(chǎn)品牌智能手機(jī)的操作系統(tǒng)也全部是基于安卓。i OS操作系統(tǒng)是由蘋果公司開發(fā)的手持設(shè)備操作系統(tǒng)，僅支持蘋果公司的電子產(chǎn)品。Windows Phone 操作系統(tǒng)由微軟公司開發(fā)，主要應(yīng)用于諾基亞手機(jī)，也支持三星、LG、宏碁等廠商的部分型號手機(jī)。而手機(jī)主題便是基

14、于這幾個操作平臺運行的應(yīng)用程序。目前國內(nèi)不同廠商基于安卓開發(fā)的手機(jī)操作系統(tǒng)不盡相同，比如小米開發(fā)的是 MIUI（米柚），華為開發(fā)的是 EMUI（Emotion UI），聯(lián)想開發(fā)的是 VIBE UI。但本質(zhì)上，設(shè)計師制作的手機(jī)主題都是基于安卓操作系統(tǒng)（目前已更新至 7.0 版本）。手機(jī)主題作為一種美化智能手機(jī) UI 界面的應(yīng)用程序，出現(xiàn)在各廠商自帶的出廠軟件中。安卓用戶打開主題商城，即可挑選下載到自己喜歡的界面主題進(jìn)行安裝。一般說來，手機(jī)主題的設(shè)計主要包含了以下構(gòu)成元素：壁紙、鎖屏、應(yīng)用圖標(biāo)、系統(tǒng)界面、App Widget 部件?？傊謾C(jī)主題設(shè)計可以滿足用戶追求個性化差異的需求，本質(zhì)上是根據(jù)該

15、手機(jī)自身的配置恰當(dāng)?shù)貙ζ湎到y(tǒng)界面進(jìn)行重新設(shè)計編排抑或?qū)Σ糠忠曈X元素進(jìn)行繪制更換的美化過程，屬于界面設(shè)計范疇，保證用戶的控制能力，進(jìn)一步促進(jìn)交互作用。一款設(shè)計優(yōu)良的手機(jī)主題可以激發(fā)喚醒甚至加強(qiáng)使用者與互聯(lián)網(wǎng)世界的聯(lián)系。2.2 智能手機(jī) UI 主題設(shè)計的國內(nèi)外研究現(xiàn)狀及分析2.2.1 國內(nèi)研究現(xiàn)狀及分析隨著近年來智能手機(jī)以迅雷不及掩耳之勢席卷整個信息世界，智能手機(jī)的用戶在熟悉操作系統(tǒng)后，對于手機(jī) UI 的美觀程度有了更高的追求，于是手機(jī)主題設(shè)計行業(yè)就此應(yīng)運而生，并受到越來越多從事界面設(shè)計領(lǐng)域的設(shè)計師的關(guān)注。一款美觀的手機(jī)主題在滿足用戶對于手機(jī)差異化追求的背后，無疑是在給手機(jī)廠商帶來更多的銷售與收入

16、來源?？v觀國內(nèi)智能手機(jī)市場，基本所有知名的手機(jī)品牌廠商都開發(fā)出自己的手機(jī)主題平臺與配套的主題設(shè)計師登錄系統(tǒng)。譬如，小米手機(jī)主題商店便向用戶提供上千款百變主題，上萬種個性搭配，通過獨創(chuàng)的個性主題、百變鎖屏與自由桌面，增強(qiáng)用戶與 MIUI 之間的黏性，滿足顧客的個性化需求。華為、聯(lián)想、奇酷、魅族、OPPO、步步高 vivo、康佳手機(jī)也在各自的主題商店里提供眾多的主題樣式，行業(yè)里甚至催生出許多第三方手機(jī)主題美化 APP，并且近年來它們都先后和一線國內(nèi)設(shè)計師互動平臺聯(lián)合舉辦規(guī)模大型的手機(jī)主題設(shè)計賽事。譬如與站酷網(wǎng)聯(lián)合策劃的“輕主題 心出發(fā)vivoFuntouch 全局主題設(shè)計大賽”“ 為夢想設(shè)計魅族

17、flyme 手機(jī)主題設(shè)計征集”“全世界看你的華為 EMUI 第二屆全球手機(jī)主題設(shè)計大賽”“ 潮范兒檬出色聯(lián)想樂檬 VIBE UI 手機(jī)主題設(shè)計大賽”；與創(chuàng)意設(shè)計社區(qū)視覺中國網(wǎng)站策劃的“聯(lián)想主題小店，你是掌柜！聯(lián)想主題大賽”、“你酷你就秀酷派手機(jī)主題大賽”等，這些獎金高額的大賽不僅在設(shè)計師群體里征集到了大量出色的手機(jī)主題設(shè)計作品，更對智能手機(jī)主題設(shè)計行業(yè)未來的發(fā)展起到了非常積極的推動作用。因為手機(jī)主題設(shè)計的門檻并不高，對人機(jī)交互技術(shù)有所了解并能恰當(dāng)把握設(shè)計風(fēng)格，基本上就擁有了設(shè)計手機(jī)主題的能力。所以，當(dāng)下絕大部分優(yōu)秀的手機(jī)主題設(shè)計師是從視覺傳達(dá)設(shè)計、平面設(shè)計、動漫專業(yè)跨界到智能手機(jī)主題界面設(shè)計。

18、設(shè)計經(jīng)驗也大多是從以往的設(shè)計工作中積累而來。雖然目前國內(nèi)各大院校的界面設(shè)計相關(guān)專業(yè)的課程不盡完善，但值得相信的是，未來移動端主題設(shè)計行業(yè)將涌現(xiàn)出一大批專業(yè)人才，手機(jī)主題市場也將日益專業(yè)和繁榮。2.2.2 國外研究現(xiàn)狀及分析通過在谷歌頁面與設(shè)計界頂尖的設(shè)計社區(qū) Behance、Dribbble 網(wǎng)站上搜索關(guān)鍵詞“mobile phone theme design”，不難發(fā)現(xiàn)搜索出來的關(guān)于智能手機(jī)主題界面設(shè)計的佳作絕大多數(shù)來自中國，當(dāng)然這并不意味著國外極少數(shù)設(shè)計師會關(guān)注手機(jī)主題設(shè)計這個領(lǐng)域，只是相對而言，國內(nèi)的手機(jī)主題設(shè)計風(fēng)潮更盛，這無疑與國內(nèi)手機(jī)廠商高額的設(shè)計獎金與健全的主題分成制度息息相關(guān)。而

19、國外設(shè)計師們更多是在 APP 界面領(lǐng)域上大顯身手。- 6 -第三章 智能手機(jī) UI 主題設(shè)計 本人是以漫威動漫中的美國隊長為主題進(jìn)行設(shè)計的，將美國隊長的標(biāo)志性物品及海報進(jìn)行優(yōu)化，加入到本次的設(shè)計之中。3.1 手機(jī)壁紙設(shè)計手機(jī)壁紙按用途可分為兩類，一類是鎖屏壁紙，另一類是主屏幕壁紙（在蘋果手機(jī)中，壁紙亦稱作墻紙）。一、鎖屏壁紙指的是手機(jī)在未解鎖狀態(tài)下屏幕顯示的畫面，可分為靜態(tài)圖與動態(tài)圖。尺寸根據(jù)手機(jī)產(chǎn)品自身的屏幕大小參數(shù)來設(shè)定，一般設(shè)計的默認(rèn)尺寸為 19201080 像素，廠商提供的制作工具大多可以根據(jù)該尺寸進(jìn)行上下裁剪或等比例縮放來適配不同規(guī)格的手機(jī)。二、主屏幕壁紙，也稱為桌面壁紙，指的是手機(jī)

20、在解鎖后屏幕顯示的畫面，根據(jù)手機(jī)設(shè)置的不同可分為單屏和多屏，區(qū)別在于：單屏壁紙不會根據(jù)用戶切換各屏界面圖標(biāo)而改變，圖片中的所有內(nèi)容在屏幕上全部呈現(xiàn)；多屏壁紙則相反，會追隨用戶滑動切換屏幕而移動，即每個定格的屏幕上只顯示出多屏壁紙橫向的一個局部，設(shè)計的尺寸根據(jù)手機(jī)品牌不同而異。在手機(jī)壁紙的創(chuàng)作過程中，為了保證后期主題顯示在手機(jī)屏幕上的色調(diào)統(tǒng)一，本次設(shè)計將每個主題的鎖屏壁紙與主屏幕壁紙設(shè)成一致。唯一的小小區(qū)別在于主屏幕的壁紙較之鎖屏?xí)狄恍?，這樣做的目的是為了更加凸顯主屏幕上的圖標(biāo)顯示，避免圖標(biāo)與壁紙因缺乏層次感而融為一體。3.2 手機(jī)應(yīng)用圖標(biāo)設(shè)計手機(jī)應(yīng)用圖標(biāo)是指解鎖屏幕后呈現(xiàn)在桌面壁紙上的一個

21、個代表不同應(yīng)用程序的圖標(biāo)。圖標(biāo)需要在規(guī)定像素的正方形區(qū)域內(nèi)進(jìn)行設(shè)計，不同廠商規(guī)定的像素不盡相同，所以圖標(biāo)大小與形狀也不是一成不變的，主題創(chuàng)作需要根據(jù)創(chuàng)意發(fā)揮設(shè)計出與眾不同的甚至可以是異形的圖標(biāo)，但設(shè)計一套完整主題的過程中需要保證所有應(yīng)用圖標(biāo)在視覺上要處于同一種風(fēng)格，即要保持設(shè)計風(fēng)格的一致性。唯有如此，才能使不同圖標(biāo)呈現(xiàn)在同一個屏幕上時不顯得零亂無序，能融為一體。圖3-1 智能手機(jī) UI 主題設(shè)計第四章 結(jié)論與展望智能手機(jī)作為互聯(lián)網(wǎng)時代主流的終端載體，已然融進(jìn)人類的社交生活中，成為不可或缺的一部分。在滿足了基本通訊用途的基礎(chǔ)上，越來越多的功能在智能手機(jī)上得以實現(xiàn)，給人類帶來無盡便捷舒適的享受。正

22、因為如此，美觀的界面設(shè)計與良好的交互體驗扮演著愈發(fā)重要的角色，直接影響到了用戶的使用與產(chǎn)品的銷售業(yè)績?？v觀設(shè)計史，所有設(shè)計風(fēng)格的出現(xiàn)都不是憑空而來，其背后一定有著深刻的規(guī)律性因素推動。擬物風(fēng)、扁平風(fēng)在移動互聯(lián)網(wǎng)時代輪流登臺亮相亦有更深層的時代背景原因。在近些年，為了更好地適應(yīng)層出不窮的屏幕尺寸，扁平風(fēng)秉承著極簡主義設(shè)計理念，引起了設(shè)計界的廣泛關(guān)注，成為當(dāng)下最為流行的界面設(shè)計風(fēng)格。一方面，扁平化風(fēng)格的 UI 界面簡潔干凈，視覺上營造更輕快的操作體驗。另一方面，可以最大化突出內(nèi)容主題，使信息本體作為核心凸顯出來，緩解信息負(fù)載，讓用戶在操作過程中更專注于內(nèi)容本身，降低用戶在界面上的導(dǎo)航成本。這些都是

23、扁平化風(fēng)格能夠受到熱捧的原因。當(dāng)然，所有風(fēng)格都不可能是完美無瑕的，扁平化在發(fā)展過程中順應(yīng)時代的變化也在悄然進(jìn)化，在極端的邊緣走了回來，重拾起若干曾經(jīng)擯棄的效果并加以優(yōu)化，只為了更好的用戶體驗。我們難免會聽到周遭人群抱怨科技產(chǎn)品造成了人與人之間越來越多的冷漠與隔閡。可是我們也不能否認(rèn)曾經(jīng)或正在感受著來自科技產(chǎn)品的人文關(guān)懷，它們讓我們的生活變得更美好。而手機(jī)主題，便扮演著其中一個微乎其微的角色，它通過眾多可選擇的界面視覺滿足我們追求個性差異化的需求，通過良好的交互方式消除了使用過程中未曾言明的不便，通過種種人性化細(xì)節(jié)引起我們對手機(jī)品牌理念的共鳴，通過以上形式來激發(fā)我們藏匿在心底不曾離去的生活熱忱。

24、所有這些，都是在說手機(jī)產(chǎn)品所代表的科技可以和我們更好的溝通交流，而設(shè)計師作為一條連接用戶與產(chǎn)品間的橋梁，在當(dāng)下正發(fā)揮著越來越重要的作用?？傊?，從事主題設(shè)計行業(yè)的設(shè)計師，應(yīng)當(dāng)基于用戶需求和程序本身去探索智能手機(jī) UI 主題界面交互設(shè)計的創(chuàng)作技巧與風(fēng)格表現(xiàn)，把握當(dāng)前流行趨勢同時不盲目跟風(fēng)隨大流，熟練掌握設(shè)計風(fēng)格技巧，從生活中汲取創(chuàng)作靈感，尊重用戶意見，勇于實踐，為手機(jī)主題市場的美好未來貢獻(xiàn)力量。參考文獻(xiàn)1 韓曉墨. 繼承與發(fā)展并重論扁平化設(shè)計的席卷J. 深圳：現(xiàn)代裝飾(理論)，2013(07):90.2 馬海港. 少即是多論扁平化界面設(shè)計風(fēng)格的優(yōu)勢J. 深圳：現(xiàn)代裝飾(理論)，2013(12):87、88.3 李佳. 界面設(shè)計中的扁平化設(shè)計與擬物化設(shè)計之探議J. 藝術(shù)與設(shè)計(