畢業(yè)設(shè)計基于Photoshop和Axure的手機圖形交互界面設(shè)計學生姓名指導教師2016年5月16日基于Photoshop和Axure的手機圖形智能手機因其人性化的設(shè)計、開放性的操作系統(tǒng)、強大的擴展性功能、方便快捷的使用方式備受人們的青睞。用戶也越來越注重手機的外觀設(shè)計以及界面交互設(shè)計。如今全球各大手機公司硬件設(shè)備的發(fā)展并駕齊驅(qū)，在此背景之下，更加突顯了移動端交互界面設(shè)計的重要性，把用戶的體驗作為設(shè)計的出發(fā)點和重點已經(jīng)成為交最后以HTML格式的文件進行實踐操作，這幾個軟件相結(jié)合能夠在短時間內(nèi)達到較Smartphonesbecauseofitshumanizeddesigexpansibility,convenientandquickwayofusebecometheispayingmoreandmoreattentpacewiththedevelopmentofhardwareequipment,inthisimportanceofthemobileterminalinterfacedesign.Desiggraphicalinterfacedesofdesigncostisnottoohigh,itisconcludedthattheoptimaldesignmodel.鹽城師范學院畢業(yè)設(shè)計1緒論 1.1研究背景及意義 1.2研究的目的與內(nèi)容 1.3相關(guān)技術(shù)發(fā)展狀況 2系統(tǒng)開發(fā)環(huán)境及相關(guān)技術(shù)介紹 22.1開發(fā)環(huán)境 22.2關(guān)鍵軟件 2 2 23需求分析 33.1系統(tǒng)可行性分析 33.1.1經(jīng)濟的可行性 33.1.2技術(shù)的可行性 34系統(tǒng)總體設(shè)計 34.1設(shè)計原則 34.2界面體系結(jié)構(gòu) 44.3設(shè)計流程 44.4概念界面原型設(shè)計 54.4.1紙上原型 54.4.2交互原型設(shè)計 75詳細設(shè)計與交互實現(xiàn) 75.1Photoshop界面制作 75.1.1圖標設(shè)計及其制作 75.1.2手機視覺界面設(shè)計 85.2低保真原型設(shè)計 5.2.1Axure低保真原型實現(xiàn) 5.3高保真原型設(shè)計及實現(xiàn) 5.3.1Axure中獲取當前時間和日期 5.3.2界面交互設(shè)計 5.4測試運行 5.5設(shè)計小結(jié) 計算機問世以來界面設(shè)計一直存在，從最初的人機交互設(shè)計發(fā)展為現(xiàn)在的用戶采用擬物化的設(shè)計。而隨著智能移動終端的問世，用戶涉獵的同類產(chǎn)品越來越多，再加上這些設(shè)備的顯示屏越來越小，扁平化的設(shè)計風格已經(jīng)成為設(shè)計的主流。隨著智能手機的普及，更多的軟件產(chǎn)品展現(xiàn)在用戶面前，紛繁的軟件系統(tǒng)和復雜的操作方式導致部分用戶尤其是中老年用戶在面對產(chǎn)品時無從下手，這要求生產(chǎn)廠商更加重視手機系統(tǒng)圖形設(shè)計對手機綜合指標的影響。因此在全民使用智能手機、手機更1.2研究的目的與內(nèi)容手機系統(tǒng)圖形界面設(shè)計不僅為用戶提供了良好的視覺體驗，而且也滿足了人們對于手機交互界面的多項需求。本課題對手機系統(tǒng)圖形界面進行了設(shè)計，用戶在本系統(tǒng)中可以通過Axure所生成的高保真模型模擬界面設(shè)計所產(chǎn)生的不必要的歧義，為用戶提供了最直接的體驗方式。本課題的研究符合開發(fā)軟件的正常步驟，包含了課題研究、用戶需求分析、前景分析等步驟，本交互界面設(shè)計在信息技術(shù)行業(yè)的影響下迅速發(fā)展，與此同時智能移動終端的逐郵件、地圖等功能融為一體。中國市場上85%的手機采用的都是Android操作系統(tǒng)，第2頁共18頁2系統(tǒng)開發(fā)環(huán)境及相關(guān)技術(shù)介紹系統(tǒng)開發(fā)環(huán)境：在WIN1064位操作系統(tǒng)下，以PhotoshopCC和AxureRP8.0僅可以處理單個攝影作品，更能夠?qū)Χ鄰垐D片進行合成、編輯和設(shè)計，所得到的效果以假亂真，因此受到很多攝影師的青睞，又因為其強大的排版功能成為各類設(shè)計夠在代碼完成之前實現(xiàn)設(shè)計產(chǎn)品的快速原型設(shè)計。它能夠高效的實現(xiàn)設(shè)計界面的鏈圖上定義簡單連接和高級交互。在線框圖的基礎(chǔ)上，可以自動生成HTML原型。XMind采用Java語言開發(fā)，具備跨平臺運行的性質(zhì)可支持插件，插件通過編寫XML清單文件可以擴展系統(tǒng)定義好的擴展點。XMind是一款方便快捷的思維導圖繪制軟件，可以隨時記錄下設(shè)計師所產(chǎn)生的各種聯(lián)想，PencilProject是基于Firefox的草圖繪制和圖形化原型機設(shè)計軟件。Pencil具有文檔內(nèi)超鏈接跳轉(zhuǎn)，富文本功能的文字處理，導出為多種格式文檔，跨平臺，添加外部對象等功能。在移動互聯(lián)網(wǎng)時代，應用信息集成體現(xiàn)突出了其表達信息分類精準豐富、沒有使用歧義、用戶體驗良好等優(yōu)勢，可以做到準確的向用戶表達圖形所代表的意義，本手機圖形交互界面的研發(fā)是在指導老師的指導下獨立完成的，遇到困難時可在網(wǎng)上查詢資料，開發(fā)設(shè)備僅僅需要一臺電腦，經(jīng)濟上并不需要很多的支出。在手機圖形交互界面技術(shù)成熟之后，可免費投入手機界面主題市場，界面設(shè)計的下載量手機圖形交互界面設(shè)計是以Photoshop作為主要的界面開發(fā)工具，在Axure的模擬環(huán)境下設(shè)計交互，通過HTML原型實現(xiàn)，還使用了Pencil和Xmind等很多功能較用完成界面的模擬實現(xiàn)，用來檢測手機圖形界面的各項功能是否能正常運行，因此4系統(tǒng)總體設(shè)計在相同界面上不同的按鈕有明顯的區(qū)別，能夠望圖知意。設(shè)計能在用戶不查閱任何(3)幫助設(shè)施原則：設(shè)計提供盡可能詳盡準確的幫助容易吸引用戶注意力的位置是交點正上方四分之一處1,本設(shè)計很注重這兩個位置的運用。界面的大小符合美學觀點，給人感覺舒適協(xié)調(diào)，能在最短的時間內(nèi)吸引用戶第4頁共18頁的注意力。4.2界面體系結(jié)構(gòu)界面體系結(jié)構(gòu)，如圖4-1所示。界面體系結(jié)構(gòu)界面體系結(jié)構(gòu)圖標顯示聽筒頂部菜單信息構(gòu)架菜單標簽界面風格操作順序屏幕布局整體尺寸按鍵形狀布局種類圖標圖4-1界面體系結(jié)構(gòu)圖用戶需求階段就是采用調(diào)查研究的手段對目標人群進行調(diào)查研究，搜集整理設(shè)計所需的數(shù)據(jù)。了解受眾人群的使用特點，根據(jù)調(diào)查階段的用戶需求進行設(shè)計及改進。改進市面上已近存在的設(shè)計并不僅僅是簡單的修改其配色或者布局，更重要的界面設(shè)計階段是在用戶需求分析階段的基礎(chǔ)上進行的最直接的界面的設(shè)計。以用戶需求為中心來進行整體構(gòu)架，設(shè)計師會注重對用戶需求的實現(xiàn)和分析，所有用界面測試是通過反復的測評來改進完成手機界面設(shè)計，最后對手機界面風格進第5頁共18頁圖4-2系統(tǒng)流程框架圖4.4概念界面原型設(shè)計迄今為止，雖然計算機工具的使用已經(jīng)非常廣泛，然而在原型開發(fā)領(lǐng)域，使用紙質(zhì)作為介質(zhì)來傳達信息的方式仍然是最為迅速和便捷的。紙上原型設(shè)計可以讓設(shè)計師快速找到設(shè)計中存在的問題，借助紙上原型設(shè)計，我們可以準確的判斷設(shè)計的方向是否正確。紙上原型是一種原型的設(shè)計方法，它能夠?qū)崿F(xiàn)快速構(gòu)建，而且成本較低，主要適用于交互界面設(shè)計的初始階段。使用紙上原型的是為了更快的解決不確定因素所產(chǎn)生的問題。要盡可能的讓他保持簡單，但又不要過于簡單3。紙上原型是一種原型設(shè)計方法，可以通過Pencil軟件來快速實現(xiàn)，并不僅僅是手機模型以及貼圖可以幫助我們快速的實現(xiàn)原型設(shè)計，并且其形態(tài)幾乎等同于產(chǎn)品界面。為了使紙上原型更貼近最后的交互界面，本人選擇用Pencil軟件設(shè)計紙上原型，避免的了手繪紙上原型所產(chǎn)生的尺寸的偏差，避免了不專業(yè)的手繪效果對下一步設(shè)計產(chǎn)生不利影響。另一方面，手繪原型所需要的時間周期較長，而且手繪紙張不易第6頁共18頁保存。在真正的團隊設(shè)計中，合作往往比一個人的創(chuàng)意更重要，這時候就需要設(shè)計師直接相互交流自己的紙上原型設(shè)計原稿。使用Pencil所制作的紙上原型比手繪原型原稿更加規(guī)范整潔，便于設(shè)計師之間的交流。并且，在本人進行整個界面交互設(shè)計的過程中，會根據(jù)不同階段的設(shè)計效果對設(shè)計原型進行不斷的調(diào)整，如果采用手繪原型設(shè)計，就無形中加大了修改原型的工作量，相反pencil紙上原型設(shè)計可以根據(jù)以往設(shè)計的.ep文件隨時修改，大大降低了不必要的工作量。雖然Axure也可以進行紙上原型設(shè)計，但是由于其系統(tǒng)不包含自帶的手機原部件，利用Axure設(shè)計將會耗費大量的設(shè)計時間，因此在這一階段最后選用Pencil作為紙上原型繪制工具。Pencil原型和手繪原型的對比如圖4-3所示。紙上原型設(shè)計是其他一切細化設(shè)計的前提，界面詳細設(shè)計、交互設(shè)計都是在紙上原型設(shè)計的基礎(chǔ)之上進行的。在Pencil軟件的“Collections”欄中選擇“AndroidICS”框中的控件，拖拽至“Page”,形成不同界面的紙上原型設(shè)計，清楚的表達各個界面之間的邏輯關(guān)系。第7頁共18頁聯(lián)系人周曉曉彤周曉彤黃曉明江蘇省鹽城幣亭潮區(qū)開放大道黃噴明△通訊地址手機號碼添加信息NYAsp?交互設(shè)計作為設(shè)計學科中的新興領(lǐng)域，源于計算機學科中的人機交互研究。所謂‘交互設(shè)計’指的是：設(shè)計支持人們?nèi)粘９ぷ髋c生活的交互式產(chǎn)品。智能設(shè)備的數(shù)字化程度越來越高，設(shè)備的設(shè)計風格日趨于扁平化。由于交互產(chǎn)品的設(shè)計不僅僅重視視覺上的效果，更要強調(diào)交互使用中全方位的體驗，所以在交互產(chǎn)品的設(shè)計過程中，交互原型的設(shè)計是最為關(guān)鍵的一部分。交互設(shè)計師可以逐步的完善設(shè)計概念，判斷產(chǎn)品是否可行并成為初期市場推廣最重要的依據(jù)。交互設(shè)計所要解決的不單單是橫向的界面的美觀問題，更重要的是縱向的行為設(shè)計。圖形界面所指的就是橫向的界面設(shè)計，交互設(shè)計就是用戶操作的縱向設(shè)計，兩者都是設(shè)計中不可或缺的組成成分[4]。圖標是具有指代意義的具有標識性質(zhì)的圖形，是一種標識，它可以用最濃縮的第8頁共18頁方式傳達所要表達的意義，并且給人留下深刻的印象5。始發(fā)展了，迄今為止圖標已經(jīng)遍布我們生活的各個角落。手機圖標就像電腦圖標一樣，是一個應用程序的標記。如：照相機、設(shè)置、信箱、通訊錄等。通常為透明背景的圖片如PNG格式。這樣繪制出來的圓角矩形相比于軟件自帶的圓角矩形有一個最大的優(yōu)點就是不含直角邊。過度尖銳的直角設(shè)計時常會給用戶一種緊張嚴肅的感覺，本設(shè)計降低了“尖銳”元素出現(xiàn)的頻率，圖標設(shè)計更加飽滿，使整個界面設(shè)計更具有親和力，因此使但是本人認為擬物化設(shè)計的優(yōu)點能在設(shè)計中繼續(xù)被使用。相對于扁平化設(shè)計來說，擬物化的設(shè)計更加直觀，面向的用戶更廣。對于接觸電子設(shè)備較少的老人和孩子來說，很難把扁平化的圖標和其所代表的應用程序聯(lián)系在一起，而擬物化圖標就可以輕松的做到這一點，但是擬物化圖標設(shè)計程序繁瑣，設(shè)計感不強，設(shè)計冗余較大，界面時常給人一種沉重感。因此，設(shè)計者結(jié)合了擬物化和扁平化兩者的優(yōu)點，做出半擬物半扁平化的輕擬物化設(shè)計。輕擬物化圖標不僅簡化了制作過程，而且具有很強的設(shè)計感，能夠抓住事物最本質(zhì)的特征，提高圖標的辨識度，面向的對象可以是第9頁共18頁5.1.2手機視覺界面設(shè)計手機視覺設(shè)計是用戶最先體驗到的部分，是整個界面設(shè)計中最重要的一部分，因此，需要在前期做大量的準備工作。整體的界面設(shè)計不僅僅是對應用圖標和已設(shè)定的顏色進行簡單的調(diào)整。設(shè)計者為了真正體現(xiàn)出預想的設(shè)計效果，應該在初步的在概念設(shè)計階段已經(jīng)定義本手機界面圖形系統(tǒng)為輕擬物化的設(shè)計風格，在既有圖標的設(shè)計風格下設(shè)計，能夠使各部分設(shè)計保持整體一致性。成體系的視覺設(shè)計會采用整體模板的形式，以保證格局、色調(diào)和造型的協(xié)調(diào)性，而且要盡可能的減少新從相機界面來看，操作欄和狀態(tài)欄上的小圖標大小都保持一致，1:3的分布符合黃金分割比，這樣的設(shè)計排版方式更符合絕大部分用戶的審美。在進行小圖標設(shè)計時，一定要抓住圖標所指代應用程序最突出的特點，讓用戶使用時不會產(chǎn)生不必要的歧義，如果一個用戶拿到你的設(shè)計不知道該如何操作時，這便是一個不合格的設(shè)計。因此，小圖標設(shè)計時要具體、形象，不能只顧設(shè)計的外觀而忽略了設(shè)計的內(nèi)法濾鏡”、“圖庫”、“快門”、“閃光燈”,每一個小圖標都是線條擬物相結(jié)合，能夠讓用戶在第一時間“望圖生義”。在細節(jié)設(shè)計上，整個界面設(shè)計的小圖標的線條粗細都為2px,符合“做偶不做奇”的原則，整個界面對稱性視圖也更容易被用戶第10頁共18頁圖5-3相機界面操作欄、狀態(tài)欄具有小清新的設(shè)計特點。在傳統(tǒng)的相機界面中，相機的設(shè)置往往是在另一個單獨界面中的，而本人把相機設(shè)置放在與相機主頁相同的界面中，做了半透明的處理。在點擊設(shè)置圖標時，設(shè)置選項會自動懸浮在相機主界面上，在改變相機設(shè)置時，所拍相機背景圖片的線條、布局和顏色的搭配都以簡約為主，過度花哨的背景會喧賓奪主，讓用戶無從下手操作。相機界面背景采用的是暖色系中的淺紅色，給用戶一種溫暖柔和的感覺。信息界面背景采用的是暖色系中的亮黃色，給用戶一種激情澎湃的感覺。而時鐘鬧鐘界面采用的是冷色系中的藍紫色背景，因為用戶一般都是在夜晚睡前使用鬧鐘，符合用戶使用的情境，使用戶圖5-4背景圖片和相機最終界面5.2低保真原型設(shè)計低保真原型一般指功能有限的交互原型設(shè)計。一般被用于實現(xiàn)設(shè)計方案以及界第11頁共18頁面布局。低保真原型能夠早期檢測和發(fā)現(xiàn)和修復主要問題，可以快速接觸到界面交互的反饋，并解決關(guān)于產(chǎn)品的易用性和功能上的核心問題7]。本手機系統(tǒng)圖形界面設(shè)計采用AxureRP8.0來完成低保真原型的實現(xiàn)。在Axure的部件庫中選擇矩形工具，繪制個720px乘1280px的矩形，設(shè)置x和y的值都為0,雙擊矩形可以在矩形中添加文字，形成一個與手機界面尺寸相同的界面，如下圖所示。DD基本交互的實現(xiàn)，選擇操作欄中表示“返回”的矩形，選擇交互欄中的“鼠標單擊時”,在彈出的窗口中選擇“鏈接”這一選項，選擇配置動作中的“返回前一頁”,這樣就實現(xiàn)了返回按鈕的操作，在預覽狀況下可以實現(xiàn)頁面自由跳轉(zhuǎn)。右擊矩形，選擇“交互樣式”,可在鼠標懸停時、鼠標按下時設(shè)置不同樣式來優(yōu)化用戶體驗，不同操作對應不同響應如下圖所示。返回5.3高保真原型設(shè)計及實現(xiàn)高保真原型設(shè)計是仿真程度較高的原型設(shè)計，它可以真實全面的地展示界面的主要工作流程和部分功能，有一定的交互性。高保真設(shè)計原型可以幫助設(shè)計者模擬手機界面的使用場景，盡早對自己設(shè)計的產(chǎn)品有一個全方位的了解，并根據(jù)高保真原型中所發(fā)現(xiàn)的不足進行及時的修改，不斷完善界面交互界面，提升用戶體驗。本第12頁共18頁要進行手機界面高保真原型的設(shè)計，首先要獲取當前的時間日期，時間和日期是靜態(tài)的，因此要使用Axure的函數(shù)和動態(tài)面板來實現(xiàn)首先在工作區(qū)內(nèi)拖入兩個文本標簽，并轉(zhuǎn)化為動態(tài)面板，分別代表時間和日期命名為“時間狀態(tài)1”和“時間狀態(tài)2”。再進行循環(huán)設(shè)置，在動態(tài)面板中添加“載入時”事件，在“設(shè)置面板狀態(tài)”中選中“動態(tài)時間”面板，狀態(tài)為“Next”,選擇“向后循環(huán)”,時間為1000毫秒。完成了循環(huán)的設(shè)置后，面板就會每隔一秒鐘在“時間狀態(tài)1”和“時間狀態(tài)2”直接來回切換并且無限循環(huán)。完成了動態(tài)面板的切換和循環(huán)之后就可以利用函數(shù)來獲取當前系統(tǒng)的時間和日除了日期獲取函數(shù)還要用到以下函數(shù)：LVAR.concat('string'):這個函數(shù)是在字符串后面附加字符串，這里使用的目的，是在月、日、時、分、秒的前面加上0。長度的字符串，起始位置從0開始。加0之后的日期的長度，再用長度減去2作為獲取字符串的起始位置，最后獲取截取長度為2的兩位數(shù)。以秒為例寫出相應函數(shù)：第13頁共18頁[[(0.concat(Now.getSeconds()).substr((0.concat(Now.get因此得時間和日期函數(shù)：[[(0.concat(Now.getHours()).substr((0.concat(Now.ge[[(0.concat(Now.getMinutes()).substr(0.concat(Now.get由于智能手機的普及和使用頻率的提高，手機已經(jīng)在一定程度上取代了手表鬧鐘的功能，因此看時間也是手機的重要功能之一。因為本設(shè)計面向的用戶較廣，所以在鎖屏顯示時間的基礎(chǔ)上，又在手機主界面中添加了模擬的電子表盤。該電子表盤不僅能夠模擬正常表盤指針的跳動，而且能夠根據(jù)白天夜晚的時間自動切換表盤背景和月亮太陽的更替，這樣的設(shè)計，即使對于不會看表的小朋友和對視力較差的老年人都能夠輕松的通過看手機獲取時間。年輕的用戶群體不需要也可以把此控件刪掉，使界面設(shè)計更有針對性。5.3.2界面交互設(shè)計在完成原型界面導入和時間獲取之后，設(shè)計者根據(jù)之前的低保真原型細化界面的交互設(shè)計。本界面交互設(shè)計中含有很多列表，例如聯(lián)系人列表和信息列表，因為最重要的交互就是觸摸屏幕滑動效果。首先創(chuàng)建元件：頭部菜單、內(nèi)容(動態(tài)面板)、底部菜單，并設(shè)置具體的數(shù)值大小，在動態(tài)面板中放入短息列表圖片，添加交互事件“拖動時”選擇“移動”中第14頁共18頁的“拖動動態(tài)面板-沿y軸拖動”。再添加交互事件“拖動結(jié)束時”選擇“移動”中的“回到拖動前動作”。完成上述設(shè)置之后就會實現(xiàn)列表的觸摸滑動功能，界面交互中的列表滑動都可以動過設(shè)置動態(tài)面板的狀態(tài)切換來實現(xiàn)。除此之外還有很多具體的功能的實現(xiàn)，比如自帶播放器的功能以及計算器的功能就以計算器的高保真設(shè)計為例敘述一下制作思路。首先在計算器頁面中添加Photoshop的圖面界面，在每個計算器的按鍵上添加“HotSpot”并在選區(qū)上添加單擊事件，設(shè)置初始化數(shù)據(jù)initialize,把運算符全部賦值。設(shè)置點擊時改變運算符賦值，實現(xiàn)計算的效果。最后要在所有的數(shù)字鍵上添加“加”“減”“乘”“除”四則運算的代碼。計算器的背景設(shè)置是計算器界面最大的亮點。普通手機計算器頁面都是按鍵加白色背景，本設(shè)計在保證計算數(shù)字清晰的前提下，使用了與整體設(shè)計風格統(tǒng)一的背景圖片，更加符合整體性的設(shè)計理念。748748520963+/X=鼠標單擊時8885.4測試運行完成上述所有設(shè)計后在Axure中可以生成HTML文件運行。可以用網(wǎng)頁模擬手機界面的現(xiàn)實和交互，也可以在手機上模擬運行，根據(jù)不同的操作界面會做出不同響應，跳轉(zhuǎn)不同的頁面完成不同的內(nèi)容。打開HTML頁面可以看到當前時間，以及電子鐘表盤模擬時間，白天表盤背景為藍天白云太陽，夜間背景為月亮星空?？梢渣c擊界面中不同的圖標進去應用程序。第15頁共18頁計算器界面能夠?qū)崿F(xiàn)簡單的“+”“-”“*”“1”“歸零”等簡單的數(shù)字運算。相機界面能夠?qū)崿F(xiàn)前置攝像頭和后置攝像頭的切換，設(shè)置界面和濾鏡界面的顯示。自在查看日期時可以隨時添加便簽以及查看已經(jīng)添加的便簽。圖庫和相機二者互相連22.2522.25周曉彤相冊照片風景圖片227回圖庫風景圖片227風景圖片227□圖5-9部分具體界面本手機交互界面圖形設(shè)計遵從以用戶需求為中心的設(shè)計原則，在設(shè)計中把用戶的需求作為出發(fā)點，將產(chǎn)品的可理解性