1、畢業(yè)設(shè)計(jì)（論文）-健身類手機(jī)app界面設(shè)計(jì)論文題目: 健身類手機(jī)app界面設(shè)計(jì) 系 別: 計(jì)算機(jī)與信息技術(shù)系 專業(yè)班級(jí): 14 計(jì)算機(jī)信息管理 學(xué)生姓名: 指導(dǎo)教師: 二一七 年 五 月 十八 日 目 錄 摘 要 . 1 引 言 . 2 1 項(xiàng)目的介紹 . 21.1 相關(guān)概念設(shè)定. 2 1.2 此行業(yè)發(fā)展前景分析. 3 1.3 研究項(xiàng)目的目的和意義. 3 2 界面詳情設(shè)計(jì) . 3 2.1 界面風(fēng)格與圖標(biāo). 3 2.2 標(biāo)準(zhǔn)色定義. 4 3 設(shè)計(jì)概要 . 5 .1 用戶體驗(yàn). 5 33.2 用戶界面. 6 4 效果圖總攬 . 6 4.1 首頁(yè) . 6 4.2 商城 . 8 5 App開(kāi)發(fā)陳述 .

2、 9 參考文獻(xiàn) .11 致 謝 . 13 i 健身類手機(jī)app界面設(shè)計(jì) 【摘 要】隨著現(xiàn)代社會(huì)的飛速發(fā)展，人民物質(zhì)文化生活不斷提高。如今生活節(jié)奏愈來(lái)愈快，人們?cè)诜泵Φ墓ぷ魃钪?，逐漸意識(shí)到體育健身運(yùn)動(dòng)的重要性。健康的體魄，健美的形體是每個(gè)人的強(qiáng)烈渴望。健身運(yùn)動(dòng)在當(dāng)今社會(huì)中的重要性不僅僅是因?yàn)槿藗儐渭兊南矚g某項(xiàng)運(yùn)動(dòng)，而是因?yàn)閰⒓舆@些運(yùn)動(dòng)可以調(diào)節(jié)精神，擺脫煩惱，消除疲勞，延長(zhǎng)壽命，防病治病，減少醫(yī)療開(kāi)支，還能提高社會(huì)勞動(dòng)生產(chǎn)力，對(duì)發(fā)展國(guó)民經(jīng)濟(jì)具有積極意義。改革開(kāi)放以來(lái)，隨著我過(guò)跨世紀(jì)現(xiàn)代化建設(shè)的穩(wěn)步進(jìn)行，國(guó)民的經(jīng)濟(jì)生活水平不斷提高，機(jī)械化水平更進(jìn)一步提升，提高國(guó)民體質(zhì)逐漸被提上日程。全民健身計(jì)劃

3、是黨中央，國(guó)務(wù)院在建設(shè)和諧社會(huì)時(shí)期提出的以提高全民族身體素質(zhì)和健康狀況為中心的戰(zhàn)略性決策。全民健身計(jì)劃的提出和實(shí)施指明了我國(guó)體育事業(yè)的發(fā)展方向，對(duì)我國(guó)群眾體育實(shí)踐，促進(jìn)體育理論建設(shè)，全面提高中華民族乃至全人類的健康水平和整體素質(zhì)都具有重大意義。 【關(guān)鍵詞】健身 運(yùn)動(dòng) 消費(fèi) 全民 1 引 言 健身運(yùn)動(dòng)的廣泛開(kāi)展，使越來(lái)越多的城市居民逐步的體會(huì)到體育活動(dòng)對(duì)提高健康水平的重要作用。人們的體育活動(dòng)意識(shí)明顯增強(qiáng)，參加體育活動(dòng)的人數(shù)明顯增多。最新的調(diào)查數(shù)據(jù)顯示，我國(guó)經(jīng)常參加體育鍛煉的人口比例為28.2%。然而，我國(guó)居民參加體育鍛煉的科學(xué)化程度不高，大眾健身運(yùn)動(dòng)中尚存在許多誤區(qū)，運(yùn)動(dòng)科學(xué)健身科學(xué)知識(shí)有待進(jìn)一

4、步普及，運(yùn)動(dòng)健身的指導(dǎo)仍需不斷加強(qiáng)。體育鍛煉作為一種健康、積極的生活方式在增強(qiáng)人民體質(zhì)、提高人體健康水平中發(fā)揮著不可替代的作用。研究證實(shí)，科學(xué)的運(yùn)動(dòng)健身可以促進(jìn)人體生長(zhǎng)發(fā)育，提高人體機(jī)能水平，緩解精神壓力，保持心情舒暢降低心血管病、糖尿病等慢性病發(fā)病幾率，延緩衰老過(guò)程，使人延年益壽。 1 項(xiàng)目的介紹 1.1 相關(guān)概念設(shè)定 Talking Data 2014移動(dòng)互聯(lián)網(wǎng)數(shù)據(jù)報(bào)告中顯示，在IOS與Android兩個(gè)平臺(tái)上移動(dòng)健康管理用戶規(guī)模宏達(dá)，并且增長(zhǎng)速度不斷提高4。像咕咚、樂(lè)動(dòng)力跑步等APP用戶量已超過(guò)千萬(wàn)，Nike Training、超級(jí)減肥王等APP下載量增長(zhǎng)速度超過(guò)300%。由此看出擁有龐

5、大的用戶群，在人群中已經(jīng)廣泛的使用，并在以一種高速的形勢(shì)不斷增加。健身類APP輔助指導(dǎo)鍛煉改變了傳統(tǒng)的體育健身方式需要抽出固定的時(shí)間段針對(duì)不同的運(yùn)動(dòng)項(xiàng)目或不同的器械進(jìn)行鍛煉，更加適應(yīng)生活壓力大，工作繁重的今天，受到更多人的歡迎。目前，市場(chǎng)上的健身APP的功能主要有以下幾方面:(1)記錄運(yùn)動(dòng)健身數(shù)據(jù)，利用智能手機(jī)中GPS定位系統(tǒng)、陀螺儀等實(shí)時(shí)記錄用戶的運(yùn)動(dòng)軌跡，耗能以及其他運(yùn)動(dòng)數(shù)據(jù)，還根據(jù)傳感器和其他設(shè)備提供用戶的心率、血壓、體溫等身體數(shù)據(jù)供健身者參考。(2)健身指導(dǎo)，健身APP內(nèi)配備各種項(xiàng)目的視頻、音頻、文字圖片等這種功能，用戶可根據(jù)自己的愛(ài)好進(jìn)行鍛煉項(xiàng)目的選擇進(jìn)行科學(xué)指導(dǎo)練習(xí)。(3)科學(xué)生活

6、，健身APP通過(guò)介紹均衡膳食、合理作息時(shí)間、督促用戶改正錯(cuò)誤的生活方式，提高生活質(zhì)量，引導(dǎo)用戶健康生活方式。(4)私人社交、健身APP為每一位用戶制定科學(xué)的健身計(jì)劃，并形成健身任務(wù)，用戶可以提交健身成果數(shù)據(jù)在健身圈進(jìn)行排名，并且可以相互交流健身心得，還可以隨時(shí)隨地和健身愛(ài)好者進(jìn)行邀請(qǐng)，利用其分享功能，將信息分享到各大社交品臺(tái)供更多健身愛(ài)好者進(jìn)行交流。 2 1.2 此行業(yè)發(fā)展前景分析 目前，健身APP記步、視頻指導(dǎo)和社交幾個(gè)主要功能受到用戶的廣泛使用，隨著健身APP的功能的愈加完善，用戶群體會(huì)更加的年輕化，普及化在全民健身中得到充分的發(fā)揮。隨著健身APP流行起來(lái)，健身功能會(huì)更加完善，你想運(yùn)動(dòng)了，

7、通過(guò)健身APP定一張電子門票，既方便快捷，又實(shí)用環(huán)保，打球、健身、游泳、滑雪等都輕松搞定。不僅如此，健身APP還可以實(shí)現(xiàn)更多人性化目標(biāo)，如體育知識(shí)推廣、場(chǎng)館預(yù)訂查詢、預(yù)約健身教練，查詢路況，停車場(chǎng)等等，更加方便實(shí)用，體育自然而然地更加接近廣大手機(jī)用戶，健身APP讓運(yùn)動(dòng)變得更簡(jiǎn)單、更快樂(lè)。 健身APP改變傳統(tǒng)的健身方式，克服可健身愛(ài)好者場(chǎng)地困難，缺乏時(shí)間等一系列問(wèn)題，使體育健身成為隨時(shí)隨地的一種時(shí)尚，用戶可根據(jù)自己的時(shí)間和愛(ài)好自由選擇鍛煉的項(xiàng)目，不受場(chǎng)地的限制。在不久的將來(lái)健身類APP可以為更多的用戶帶來(lái)便捷方便的體育鍛煉方式。在這樣一個(gè)形勢(shì)下，健身類APP不斷迅速發(fā)展，以及全民健身的熱潮是的A

8、PP的發(fā)展有一個(gè)很好的發(fā)展空間，2014年全民健身首次作為國(guó)家戰(zhàn)略被提出，運(yùn)動(dòng)健身領(lǐng)域再次成為焦點(diǎn)，基于移動(dòng)互聯(lián)技術(shù)、智能手機(jī)和可穿戴技術(shù)的運(yùn)動(dòng)類 APP 也日益引起人們的關(guān)注。在全民健身的戰(zhàn)略下，健身類APP有更廣闊的市場(chǎng)價(jià)值。本人設(shè)計(jì)的此款app。擁有健身視頻一對(duì)一功能，相關(guān)產(chǎn)品售賣商城，社交網(wǎng)絡(luò)功能，健步計(jì)跑功能等，完全滿足顧客健身所需所有的要求。 3 研究項(xiàng)目的目的和意義 1.全民健身計(jì)劃有利于維系社會(huì)活動(dòng)力，維護(hù)社會(huì)安定，陶冶情操，對(duì)社 會(huì)主義精神文明建設(shè)具有重要作用，更有利于改善人與人之間的關(guān)系。而大眾健美操作為最受大眾歡迎的健身方式在全民健身計(jì)劃中有著怎樣的作用，民眾對(duì)全民健身的

9、反映以及大眾健美操在民眾中的認(rèn)可度，這是我的研究重點(diǎn)，最終目的是為了給我國(guó)的全民健身計(jì)劃提出更好的計(jì)劃，讓全民健身計(jì)劃得以更好的實(shí)施，進(jìn)而增進(jìn)國(guó)民體質(zhì)，進(jìn)一步提高國(guó)民整體素質(zhì)，以更好的建設(shè)和諧社會(huì)，最終實(shí)現(xiàn)民族的偉大復(fù)興全民健身計(jì)劃是一項(xiàng)國(guó)家領(lǐng)導(dǎo)、社會(huì)支持、全民參與的體育健身計(jì)劃,目的在于:全面提高中華民族的體質(zhì)和健康水平,基本建成具有中國(guó)特色的全民健身體系。 2 界面詳情設(shè)計(jì) 2.1 界面風(fēng)格與圖標(biāo) 如果說(shuō)信息架構(gòu)是軟件的骨架，那么界面就好比軟件的面，用戶一看這張臉就知道這個(gè)APP好看不好看，合不合自己的眼，以及對(duì)這個(gè)APP的感覺(jué)怎么樣;圖標(biāo)則可以形容成3 是軟件的眼睛和嘴巴，圖標(biāo)會(huì)引導(dǎo)你如

10、何去操作這款A(yù)PP，好的圖標(biāo)用戶一看就知道點(diǎn)這個(gè)是干什么的，該如何去操作這款A(yù)PP。 無(wú)論什么樣的界面風(fēng)格和圖標(biāo)風(fēng)格都是允許的，因?yàn)檫@沒(méi)有很嚴(yán)格的風(fēng)格界面規(guī)范，只有長(zhǎng)得好看的，和長(zhǎng)得不好看的;也沒(méi)有最好的風(fēng)格，所有界面被設(shè)計(jì)出來(lái)的前提是:美觀，并且風(fēng)格保持一致。比如圖標(biāo)的風(fēng)格，如果都是線型的，就不用再用填充的。分割線的顏色粗細(xì)等也要保持一致。界面整體風(fēng)格又最好與圖標(biāo)的風(fēng)格相配套，保持一致性的風(fēng)格能讓用戶在使用產(chǎn)品時(shí)才會(huì)有比較深的印象，一款軟件同樣需要靠風(fēng)格的統(tǒng)一來(lái)達(dá)到建立“形象”的目的。 為了讓用戶快速學(xué)會(huì)使用軟件，圖標(biāo)的設(shè)計(jì)最好是簡(jiǎn)潔的，而現(xiàn)在圖標(biāo)的設(shè)計(jì)風(fēng)格都是以扁平化為主的。能夠讓用戶在看

11、見(jiàn)的同時(shí)，腦海中就有了正確的聯(lián)想從而知曉該圖標(biāo)所表示的功能與含義，這應(yīng)當(dāng)是所有風(fēng)格的前提。 2.2 標(biāo)準(zhǔn)色定義 App啟動(dòng)圖標(biāo)如圖1-1 所示: 圖1-1 APP啟動(dòng)圖標(biāo) 設(shè)計(jì)主要規(guī)格: 4 主要顏色:藏青色 #FFFFFF # F6C930 1.3.3規(guī)格定義 (1)設(shè)計(jì)尺寸:以iphone6屏幕分辨率為主750px 1334px 圖標(biāo)尺寸120px 狀態(tài)欄40px 導(dǎo)航欄88px 圖標(biāo)44px 搜索框60px 菜單欄98px 邊距24px; (2)最佳顯示分辨率:72ppi; (3)色彩模式:RGB; (4)字體:蘋方 字體大小1836; logo設(shè)計(jì)的靈感由來(lái): 首先，為什么要以一個(gè)“燃

12、”字作為app的名稱以及l(fā)ogo的主要參考。在我看來(lái)，運(yùn)動(dòng)，無(wú)非就是要讓自己動(dòng)起來(lái)，身體動(dòng)起來(lái)了，你全身的肌肉就會(huì)活躍，新陳代謝速度加快了，身體發(fā)熱，脂肪燃燒。所以，無(wú)論是增肌還是減肥，都是以燃燒身體為前提的。再者，“燃”這個(gè)字給人有無(wú)限發(fā)揮的空間，第一眼見(jiàn)到這個(gè)字，我就決定logo以這個(gè)字為出發(fā)點(diǎn)，火字旁在我看來(lái)就像一個(gè)健壯的人在展示自己健美的肌肉。而健身當(dāng)中，啞鈴作為必不可少的器械，當(dāng)然也被我加入到創(chuàng)作的靈感當(dāng)中來(lái)，就這樣，一個(gè)簡(jiǎn)單的字，融入了兩個(gè)元素之后。就更加能夠體現(xiàn)app的主題，然后是配色的理由，底色的藏青色一直是我喜歡的顏色，此色并不顯得生硬，但是又有著一種讓人沉穩(wěn)的感覺(jué)。我們主要

13、的使用對(duì)象大多數(shù)是年輕人一代，但這并不需要太多的色彩沖擊感。綠色和藏青色是同屬一個(gè)色系，放在一起搭配不會(huì)顯得太過(guò)沖擊。綠色代表著青春，朝氣，也更加適合我們這個(gè)年代的人。綜上所述，為我設(shè)計(jì)此logo的靈感來(lái)源。 3 設(shè)計(jì)概要 3.1 用戶體驗(yàn) 用戶體驗(yàn)簡(jiǎn)單的說(shuō)就是用戶用這個(gè)軟件用起來(lái)覺(jué)得舒不舒服，如果用起來(lái)舒服，用得順手那肯定就是好軟件。但如果用起來(lái)很不舒服，甚至操作困難，連怎么用都不知道，那在人機(jī)交互上肯定有問(wèn)題，用戶體驗(yàn)也就肯定好不了。好的創(chuàng)意設(shè)計(jì)充滿靈性與美感用戶體驗(yàn)，簡(jiǎn)稱UX或UE。從廣義的角度上來(lái)講，用戶體驗(yàn)可以定義為正在使用某個(gè)產(chǎn)品的過(guò)程中的使用體驗(yàn)舒適度以及全部的過(guò)程感受，一點(diǎn)也不

14、夸張的說(shuō)，它包含著世界上任何一個(gè)產(chǎn)品。 在很多人的理解中，一提到用戶體驗(yàn)設(shè)計(jì)就會(huì)首先聯(lián)想到技術(shù)設(shè)備這一類，譬如手機(jī)，軟件，電腦以及網(wǎng)站。易用性，顧名思義，就是使用戶容易使用，使用的更方便。從用戶的角度出發(fā)而設(shè)計(jì)。一款軟件的易用性，是用戶體驗(yàn)在APP的設(shè)計(jì)中所呈現(xiàn)的重中之重，也是留住客戶的最有力的一個(gè)籌碼。用戶體驗(yàn)最強(qiáng)調(diào)的就是用戶的可用性、實(shí)用性以及易5 用性。易用性的設(shè)計(jì)要隨時(shí)考慮到用戶的使用場(chǎng)景，并且從多方面的角度為用戶考慮，使用戶在使用產(chǎn)品的時(shí)候更容易與方便。 其實(shí)不然，在我們的日常工作生活中，我們每一個(gè)人每天都接觸到的用戶體驗(yàn)不計(jì)其數(shù)，可以這么說(shuō)，用戶體驗(yàn)幾乎遍布我們生活的方方面面，大到

15、飛機(jī)，汽車，小到飯店吃飯，商城購(gòu)物，用戶體驗(yàn)無(wú)處不在。一個(gè)好的用戶體驗(yàn)，可以幫助用戶在生活中的方方面面都更加舒服與方面。 想要給用戶一個(gè)良好的使用體驗(yàn)，用戶的瀏覽體驗(yàn)就不得不提。瀏覽體驗(yàn)是用戶體驗(yàn)最直觀的表現(xiàn)，也是第一步。提及瀏覽體驗(yàn)，基本的要求就是界面的整體布局不可以太混亂，整體布局要突出重點(diǎn)，分清主次。就圖文分享軟件“LOFTER”而言，現(xiàn)在運(yùn)營(yíng)的與改版后的“LOFTER”，雖然只是在原有的基礎(chǔ)上進(jìn)行了一點(diǎn)點(diǎn)的調(diào)整，但是兩個(gè)版本在給用戶的使用體驗(yàn)中卻有著極大的不同感受。 3.2 用戶界面 用戶界面，簡(jiǎn)稱為UI，UI是在人機(jī)互動(dòng)的過(guò)程中的一個(gè)層面;界面設(shè)計(jì)是一個(gè)具有復(fù)雜的，具有著不同的學(xué)科參

16、與的一項(xiàng)工程，設(shè)計(jì)學(xué)、心理學(xué)等在此都具有著其特有的重要的位置。 例如，設(shè)計(jì)建立一個(gè)購(gòu)物的APP時(shí)，不僅僅只是要考慮到用戶的使用便利，同時(shí)也要把其絢麗的商品圖片,和諧的色彩搭配以及合理的icon放置的位置以協(xié)調(diào)美觀的方式排版展現(xiàn)出來(lái)。如果把一個(gè)APP比喻成一個(gè)人，那么用戶界面則是一個(gè)人的穿著與發(fā)型，是一個(gè)人的形象。只有形象簡(jiǎn)單健康大方得體，才會(huì)讓人愿意去進(jìn)一步了解你并且與你交流。 情感體驗(yàn)設(shè)計(jì)，強(qiáng)調(diào)友好性，注重給用戶心理上的體驗(yàn)。產(chǎn)品中的情感化的設(shè)計(jì)經(jīng)常會(huì)是產(chǎn)品與用戶之間的情感傳遞的紐帶，這種傳達(dá)情感的設(shè)計(jì)不但能夠增強(qiáng)用戶對(duì)產(chǎn)品的友好度，更可以促使產(chǎn)品更加深入人心，讓用戶給產(chǎn)品帶來(lái)口碑效用。或許

17、僅是一句友好的文案，一個(gè)簡(jiǎn)短的動(dòng)畫都可以打動(dòng)用戶內(nèi)心，使其與產(chǎn)品產(chǎn)生情感上的共鳴，這便是產(chǎn)品設(shè)計(jì)中的情感體驗(yàn)的作用。 情感化的設(shè)計(jì)可以幫助用戶化解負(fù)面的情緒。在注冊(cè)登錄以及Leading界面的出現(xiàn)無(wú)疑是讓人頭疼的流程。他們的出現(xiàn)使用戶不能直接的使用產(chǎn)品的功能及享受結(jié)果。所以在登錄與注冊(cè)的枯燥過(guò)程中很容易造成用戶的流失。而巧妙地運(yùn)用情感化的設(shè)計(jì)則可以很好的避免這一點(diǎn)，從而還能很好的留住用戶。 4 效果圖總攬 4.1 首頁(yè) app首頁(yè)如圖4-1 所示: 6 圖4-1 APP首頁(yè) 7 4.2 商城 App商城如圖4-2 所示 圖4-2 APP商城 8 5 App開(kāi)發(fā)陳述 app移動(dòng)項(xiàng)目，屬于快速開(kāi)發(fā)

18、項(xiàng)目，一般僅需3個(gè)月左右的時(shí)間即可完成項(xiàng)目的開(kāi)發(fā)，以及產(chǎn)品的最終上線運(yùn)營(yíng)。正因此，客戶在需求階段，也能夠看到其產(chǎn)品將來(lái)的基本概貌app原型設(shè)計(jì)。 一般的APP設(shè)計(jì)流程是由客戶提出要求，然后項(xiàng)目經(jīng)理作出高低保真原型圖，再交給設(shè)計(jì)人員根據(jù)原型圖進(jìn)行設(shè)計(jì)，最終設(shè)計(jì)出完整方案。 app原型設(shè)計(jì)是以草稿圖的形式為客戶描繪到整個(gè)app產(chǎn)品每一個(gè)頁(yè)面的基本布局情況，以及頁(yè)面與頁(yè)面之間的交互情況。它是與app前端需求編寫同時(shí)進(jìn)行的一項(xiàng)工作。 作為app開(kāi)發(fā)公司的項(xiàng)目專員，其有義務(wù)為客戶描繪到整個(gè)產(chǎn)品的基本打造情況，且應(yīng)該以書稿的形式呈現(xiàn)到客戶眼前，以此作為憑證，供日后開(kāi)發(fā)使用。而不是說(shuō)單純僅通過(guò)口頭傳達(dá)。因?yàn)?/p>

19、口頭描述的東西，過(guò)后如果沒(méi)有以書稿的形式記錄起來(lái)，便將會(huì)有80%遺忘，相當(dāng)于整場(chǎng)會(huì)議下來(lái)，到最后，只是浪費(fèi)了雙方的時(shí)間。 App原形圖如圖5-1 所示 圖5-1 APP原形圖 9 App個(gè)人頁(yè)如圖5-2 所示 圖5-2 APP個(gè)人頁(yè) 10 App設(shè)置頁(yè)如圖5-3 所示 圖5-3 APP設(shè)置頁(yè) 11 參考文獻(xiàn) 1王文曉.運(yùn)動(dòng)解剖學(xué)M.人民郵電出版社,2013 2王瑞元.運(yùn)動(dòng)生理學(xué)M.人民郵電出版社,2013 3齊偉.肌肉健美訓(xùn)練圖解N.錢江晚報(bào),2015-10-31(12) 骨骼肌肉功能解剖學(xué)第2版M.張魏霞譯.2000 4美唐納德諾依曼.5美卡萊熱爾曼.運(yùn)動(dòng)解剖書M.劉芳譯.2008 6美馬克韋勒.力量與肌肉訓(xùn)練圖譜M.2013 7徐志陽(yáng).亞洲人肌肉結(jié)構(gòu)縫隙M.華北工業(yè)大學(xué)出版社.2007 8新舒維益.論肌肉增長(zhǎng)周期M.2009 9教育部. 文化部、關(guān)于深化文化改革，推動(dòng)互聯(lián)網(wǎng)發(fā)展EB/OL 10美羅斯.運(yùn)動(dòng)app的崛起M.2013 12 致 謝 光陰似箭，日月如棱。三年的時(shí)間，在我們漫長(zhǎng)的人生旅途中是那