大慶師范學(xué)院本科畢業(yè)創(chuàng)作（設(shè)計(jì)）全有哦產(chǎn)品APP UI用戶界面設(shè)計(jì)方案 一、設(shè)計(jì)方案的背景及意義 （一）設(shè)計(jì)方案的背景 全有哦產(chǎn)品APP UI用戶界面設(shè)計(jì)方案來源于所在實(shí)習(xí)公司張家港普西信息科技有限公司接觸到的實(shí)際項(xiàng)目。這是公司自主研發(fā)的一款生活服務(wù)類O2O項(xiàng)目手機(jī)客戶端軟件，其專注于本地生活服務(wù)的商城，為用戶提供各種餐飲、休閑、服務(wù)行業(yè)的優(yōu)惠商品。所謂O2O的電子商務(wù)模式，即online to offline,其實(shí)也可以理解成是B2C的一種變相模式，是將線下的商務(wù)機(jī)會(huì)與互聯(lián)網(wǎng)結(jié)合，讓互聯(lián)網(wǎng)成為線下交易的前臺(tái)。我所做的是通過分析用戶體驗(yàn)和需求，對(duì)之前的這款手機(jī)APP界面進(jìn)行改版及再設(shè)計(jì)，這其中就包含了外賣、預(yù)定、家政、車行、零售等服務(wù)項(xiàng)目的設(shè)計(jì)工作。縱觀當(dāng)今社會(huì)，移動(dòng)設(shè)備已經(jīng)成為人們生活?yuàn)蕵返谋匦杵分?，移?dòng)設(shè)備的用戶界面及體驗(yàn)也越來越受到用戶的關(guān)注。這里所說的用戶界面也就是UI，即user interface。字面上看是由用戶與界面兩個(gè)部分組成，實(shí)際上還包括了用戶與界面之間的交互關(guān)系。目前在國內(nèi)UI還是一個(gè)相對(duì)陌生的詞，即使是一些設(shè)計(jì)人員也對(duì)這個(gè)詞不太了解。我們經(jīng)常看到一些招聘廣告上寫著：招聘界面美工、界面美術(shù)設(shè)計(jì)師等等，這表明在國內(nèi)對(duì)UI的理解還停留在美術(shù)設(shè)計(jì)方面，認(rèn)為UI的工作只是描邊畫線，缺乏對(duì)用戶交互的重要性的理解。我國的UI設(shè)計(jì)師市場尚在萌芽階段，人才缺口巨大。目前，中國市場上的手機(jī)、軟件、網(wǎng)站等產(chǎn)品同質(zhì)化程度非常高。過去企業(yè)在設(shè)計(jì)產(chǎn)品的時(shí)候，主要是在功能、質(zhì)量或者產(chǎn)品外觀上和競爭對(duì)手有所區(qū)別，而現(xiàn)在隨著技術(shù)的進(jìn)步和市場的發(fā)展，越來越多的企業(yè)意識(shí)到用戶體驗(yàn)的重要性了，而這種用戶體驗(yàn)的提升則要依賴于UI設(shè)計(jì)師的勞動(dòng)。 （二）設(shè)計(jì)方案的意義 在用戶把軟件下載下來以后，他們和企業(yè)的聯(lián)系，以及該企業(yè)形象在用戶眼中的表現(xiàn)，很大一部分是通過軟件的界面來傳達(dá)的，一個(gè)簡潔美觀的界面會(huì)給用戶帶來舒適的視覺感受，拉近彼此間的距離，為商家創(chuàng)造賣點(diǎn)。信息處理成為消費(fèi)者對(duì)手機(jī)使用的日常功能，而作為手機(jī)人機(jī)交互的平臺(tái)，UI直接影響著用戶的產(chǎn)品選擇。美觀友好的用戶界面對(duì)于宣傳企業(yè)文化，對(duì)用戶灌輸企業(yè)理念，甚至于對(duì)企業(yè)的宣傳運(yùn)作都將是非常有益的，美觀的界面都會(huì)給客戶以信心和良好的印象。我認(rèn)為檢驗(yàn)一個(gè)界面好壞的標(biāo)準(zhǔn)是用戶的感受。所以界面設(shè)計(jì)要和用戶感受緊密結(jié)合，這是一個(gè)不斷為目標(biāo)用戶設(shè)計(jì)滿意視覺效果的過程。 二、設(shè)計(jì)的意圖 全有哦是張家港普西信息科技有限公司旗下的生活服務(wù)平臺(tái)，通過移動(dòng)端應(yīng)用解決人們各種生活的不便，例如人們就餐時(shí)產(chǎn)生的選擇，預(yù)定和支付餐飲服務(wù)的需求。全有哦最初的概念是針對(duì)本地用戶，通過“全有哦”，本地居民可以方便搜索到附近的快餐、水果、西點(diǎn)等外賣信息，通過“全有哦”用戶可隨時(shí)隨地自助下單，付款，留下送貨地址和電話，十幾分鐘后，外賣商戶就把新鮮出爐的美食送上門。不僅僅是外賣，消費(fèi)者還可以通過“全有哦”中的美食館查看餐廳的電子菜單，通過圖文介紹點(diǎn)好菜后保存訂單，到店用手機(jī)掃描餐廳二維碼，就直接下單到廚房，省去找服務(wù)員現(xiàn)場點(diǎn)菜的時(shí)間，同時(shí)可享受商家提供的折扣優(yōu)惠，結(jié)賬時(shí)再掃一下二維碼，就能使用支付寶錢包快速付款。當(dāng)然，本款A(yù)PP還包括了零售、車行、家政的服務(wù)項(xiàng)目，可以說操作簡便，為用戶提供了一個(gè)可以盡情選擇和比較的服務(wù)平臺(tái)。 三、設(shè)計(jì)過程詳盡陳述 （一）前期準(zhǔn)備與調(diào)查分析 需求分析：對(duì)于一個(gè)產(chǎn)品來說，必然要對(duì)用戶進(jìn)行需求的分析，一般可以直接與產(chǎn)品經(jīng)理交流獲得相關(guān)產(chǎn)品需求。 我覺得好的設(shè)計(jì)建立在對(duì)用戶深刻了解之上。了解產(chǎn)品的現(xiàn)有交互以及用戶使用產(chǎn)品的習(xí)慣等，要站在用戶角度思考，如果我是用戶，這里我會(huì)需要什么？通過前期調(diào)查與交流了解到，本地餐飲業(yè)商戶比較集中的區(qū)域，多位于市中心的一些商業(yè)圈和寫字樓中，部分小型的餐飲店則分布于居民區(qū)附近，而像零售、車行和家政公司則同樣選擇了位于社區(qū)附近的地段。由此看出，連鎖或者高檔一些的餐廳比較青睞于購物圈，入駐到大型商場中，當(dāng)前來逛街的人們在一天的購物目的達(dá)到時(shí)也許會(huì)感到饑腸轆轆，但又不想拖著疲憊的身子回到家中做飯，于是，商場中的餐廳便成了他們的首選。部分小型的餐飲店、家政公司、車行和零售商店青睞居民區(qū)的原因也大多是出于便民，居民可以不出社區(qū)，到餐廳內(nèi)就餐，到商店里購買所需，到車行洗車，到家政公司咨詢，其主要針對(duì)的是本社區(qū)的居民。而更多的商戶則希望自己的東西可以讓其他社區(qū)的居民知道，從而提高銷售量。在后來我自己的體驗(yàn)當(dāng)中，通過對(duì)比使用不同的服務(wù)性APP，發(fā)現(xiàn)在預(yù)約這個(gè)板塊中，對(duì)于了解預(yù)約時(shí)間這個(gè)方面做得不夠人性化，用戶操作起來稍有些繁瑣。對(duì)此，我會(huì)在接下來的設(shè)計(jì)當(dāng)中去逐步解決這些問題。 （二）全有哦產(chǎn)品APP UI用戶界面設(shè)計(jì)過程1.交互設(shè)計(jì)階段首頁： 首頁廣告一級(jí)導(dǎo)航欄：美食館、外賣、電影、零售、家政活動(dòng)欄目：美食館、外賣欄目（好匯吃、午后休閑時(shí)光、晚餐）零售欄目：（超級(jí)好、第二件半價(jià)、限量大搶購）大牌優(yōu)惠券欄目任務(wù)欄：首頁、發(fā)現(xiàn)、附近、我的我的：我的頭像、用戶名、我的收貨地址、關(guān)注、我的優(yōu)惠券、我的訂單（外賣訂單、預(yù)定訂單、點(diǎn)菜訂單、零售訂單、買單記錄）、意見反饋（內(nèi)容反饋、電話反饋）。我以美食館預(yù)定流程為例：美食館預(yù)定流程： 菜單 點(diǎn)菜 點(diǎn)菜 未點(diǎn)菜 保存菜單 預(yù)定用餐日期、時(shí)間、人數(shù) 到店 未到店 下單（支付定金） 點(diǎn)菜訂單（待掃碼） 餐后密碼支付 點(diǎn)餐 （刪除 修改 掃碼下單） 交易完成 提交菜單 掃碼下單 餐后密碼支付 餐后密碼支付 交易完成 交易完成 2.界面設(shè)計(jì)階段 界面色彩：由于之前版本的APP主要是提供外賣服務(wù)的，為了增強(qiáng)用戶的食欲，所以大多用了橘紅色作為主要色調(diào)，改版中我也選用了橘紅色，沿襲了之前版本的色調(diào)。界面風(fēng)格：關(guān)于界面的風(fēng)格，存在著扁平化設(shè)計(jì)風(fēng)格與擬物化設(shè)計(jì)風(fēng)格這兩種風(fēng)格，在這款A(yù)PP中我大多采用的是扁平化的設(shè)計(jì)風(fēng)格。在之前的幾年間，擬物化趨于流行，但從目前的設(shè)計(jì)理念來講，設(shè)計(jì)師會(huì)更偏向于扁平化，扁平化更多的是去掉了該去的一些東西，所以圖標(biāo)看起來不像擬物化那樣立體那樣有真實(shí)感。但是扁平化中的一些繪畫元素則并非必須要以抽象來表達(dá)，完全可以使用擬物化中的那些具有形象意義的繪畫。這種設(shè)計(jì)在一些系統(tǒng)UI上我們現(xiàn)在也看到不少，整體看上去同樣是非常漂亮的。 界面色彩 界面風(fēng)格 界面留白：UI設(shè)計(jì)中重要的要素之一就是留白的運(yùn)用。文字、按鈕等元素周圍的留白越大，越能提升存在感，有時(shí)候留白并不意味著頁面的信息容量降低。因?yàn)橹悄苁謾C(jī)上下滾動(dòng)是很舒適的，所以并沒有必要為了讓所有內(nèi)容在一個(gè)頁面內(nèi)全展現(xiàn)出來而讓字號(hào)變小。這樣做反而會(huì)讓信息更加難以閱讀。信息容量大的界面，對(duì)用戶來說是一種閱讀負(fù)擔(dān)。在設(shè)計(jì)這些交互界面時(shí)，我特別注重了留白的運(yùn)用。這樣能讓界面富有層次感，讓用戶的視覺得到“喘息”。 界面留白 記得一位UI工程師曾經(jīng)說過:“最好的設(shè)計(jì)不是用來看的，是用來體驗(yàn)的?！边@意味著，你的UI應(yīng)該讓用戶去體驗(yàn)，而不是放一些花哨的東西給用戶看。UI設(shè)計(jì)越簡單，用戶體驗(yàn)越好，所以我的界面中不會(huì)濫用設(shè)計(jì)元素。本款A(yù)PP界面像素是1136*640px，界面中的字體則采用蘋果系統(tǒng)專用字體，基于中國用戶的使用習(xí)慣，首頁與多數(shù)的服務(wù)性APP客戶端相似，用戶可以在首頁找到熟悉的icon,icon設(shè)計(jì)采用常用的icon，以便用戶更快進(jìn)入應(yīng)用，在高效操作的同時(shí)，享受愉快的交互體驗(yàn)。 icon3.與開發(fā)、測試人員配合階段當(dāng)完成了我的高保真原型界面后，需要配合程序員進(jìn)行切圖，配合開發(fā)人員對(duì)于PSD格式的圖片切圖操作，對(duì)于不同的開發(fā)人員的要求，切圖方式也有不同，我需要配合相關(guān)的開發(fā)人員進(jìn)行最適合的切圖配合。 icon切圖 （三）設(shè)計(jì)作品的完成通過大量的嘗試與反復(fù)認(rèn)真的推敲，畫了大量的草圖和設(shè)計(jì)圖，最終確定了大概的設(shè)計(jì)方向，最后制定了效果圖，完成了此次設(shè)計(jì)。 四、完成作品的自我評(píng)價(jià) 互聯(lián)網(wǎng)飛速發(fā)展的今天，手機(jī)成為了我們平日里不可或缺的一部分，而UI的設(shè)計(jì)師也會(huì)隨著這股發(fā)展的勢頭急劇成長，對(duì)于我一個(gè)即將畢業(yè)的大學(xué)生來說，機(jī)遇與挑戰(zhàn)史無前例的多，產(chǎn)品UI設(shè)計(jì)中夾雜著許多設(shè)計(jì)原則要求，統(tǒng)一公司UI設(shè)計(jì)流程，使UI設(shè)計(jì)師參與到產(chǎn)品設(shè)計(jì)整個(gè)環(huán)節(jié)中來，對(duì)產(chǎn)品的易用性進(jìn)行全流程負(fù)責(zé)，使UI設(shè)計(jì)的流程規(guī)范化，保證UI設(shè)計(jì)流程的可操作性等。每個(gè)產(chǎn)品的生命周期中，要嚴(yán)格按照流程，完成每個(gè)環(huán)節(jié)的職責(zé)，確保流程準(zhǔn)確有效的得到執(zhí)行，從而提高產(chǎn)品的可用性，提升產(chǎn)品質(zhì)量。為此，我必須去不斷了解新事物，新動(dòng)態(tài)，為了讓用戶有更好的體驗(yàn)，我還要了解人們在想什么，用戶的視線首先落在什么地方，哪個(gè)設(shè)計(jì)要素在第一時(shí)間吸引用戶的注意力，它們對(duì)戰(zhàn)略目標(biāo)來講是否是很重要的東西，用戶第一時(shí)間注意到的東西與你的目標(biāo)是否一致等。對(duì)我來說，這是前所未有的挑戰(zhàn)。而我，面對(duì)這些從來沒有遇見過的東西，也將一步一步開始學(xué)習(xí)，不斷豐富自己的學(xué)識(shí)，踏入一個(gè)全新的領(lǐng)域。 當(dāng)然，作品中有很多不足之處，也證明了我還有很多東西是要學(xué)習(xí)的，在以后漫長的設(shè)計(jì)道路上我會(huì)多多向別人學(xué)習(xí)，汲取各家之所長，努力提升自己，將來設(shè)計(jì)出有獨(dú)立風(fēng)格和審美價(jià)值的作品。通過這次的畢業(yè)設(shè)計(jì)讓我對(duì)設(shè)計(jì)充滿了熱情，尤其是在這過程中我看到了很多國內(nèi)外的優(yōu)秀設(shè)計(jì)作品，我相信那些所謂的大師也不是生來就會(huì)設(shè)計(jì)的，他們今天的成就也是昨天無數(shù)次的嘗試和數(shù)年數(shù)日的學(xué)習(xí)和積累而得的，就是這個(gè)促進(jìn)了我學(xué)習(xí)UI設(shè)計(jì)的熱情。它促使你每天都要有新發(fā)現(xiàn)，不容你對(duì)美的事物視而不見，抓住每一個(gè)靈感。讓它出現(xiàn)在你的作品里。通過這次設(shè)計(jì)我也明白了UI設(shè)計(jì)真的不是看似那么簡單的，軟件只是我們實(shí)現(xiàn)自己想法的工具，真正重要的是要有自己的創(chuàng)意和源源不斷的靈感，這樣才能在UI設(shè)計(jì)的道路上走的更遠(yuǎn)。0參考文獻(xiàn)1 (美)Theresa Neil.移動(dòng)應(yīng)用UI設(shè)計(jì)模式M.北京：人民郵電出版社，2013.2 (美)弗林.移動(dòng)應(yīng)用的設(shè)計(jì)與開發(fā)M.北京：電子工業(yè)出版社, 2010. 3 (英)Giles Colborne.簡約至上M. 北京：人民郵電出版社,2011.4 馬衛(wèi)娟.方志剛.人機(jī)交互風(fēng)格及其發(fā)展趨勢J.航空計(jì)算技術(shù),1999，(05):10-11.5 王艷江.淺談當(dāng)下O2O模式新機(jī)遇J.電子世界, 2012，(12):23.6 徐萌.界面交互設(shè)計(jì)在個(gè)人移動(dòng)通信設(shè)備產(chǎn)品設(shè)計(jì)中的應(yīng)用D.同濟(jì)大學(xué),2006.