全有哦產(chǎn)品APP UI用戶界面設計方案 論文

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