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

《全有哦產(chǎn)品APP UI用戶界面設(shè)計方案 論文》由會員分享，可在線閱讀，更多相關(guān)《全有哦產(chǎn)品APP UI用戶界面設(shè)計方案 論文（8頁珍藏版）》請在裝配圖網(wǎng)上搜索。

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