中北高校校友會APP交互界面

高校校友會APP 隨著現(xiàn)代科學(xué)技術(shù)的不斷發(fā)展，移動設(shè)備的不斷普及，用戶對各種應(yīng)用軟件的需求越來越多對界面視覺的良要求越來越高所以UI設(shè)計(jì)在互聯(lián)網(wǎng)發(fā)展中顯得尤為重要。本的設(shè)計(jì)是高校校友會APP，設(shè)計(jì)作品使用Photoshop、Ilustrator兩個(gè)軟件合作完成，本款A(yù)PP以簡潔高效為切入點(diǎn)進(jìn)行設(shè)計(jì)，設(shè)計(jì)突出、明確，主色調(diào)以墨綠色和橘色為主，體現(xiàn)大學(xué)校園的青春和，功能模塊劃分明確，主要有校園、校友、發(fā)布、發(fā)現(xiàn)、搜索五大模：UI設(shè)計(jì)，界面，高校校友會，簡潔高效TheinterfacedesignandproductionofCollegeAlumniAssociationAPPWiththecontinuousdevelopmentofmodernscienceandtechnologyandtheconstantpopularityofmobiledevices,therequirementofallkindsofapplicationsoftwareisstrongerandstronger,andthedemandofwell-formednessonvisualinterfaceishigherandhigher,thustheUIdesignofmobilephoneisparticularlyimportantinthedevelopmentoftheInternet.ThemeaningoftheUIdesignliesinmakingiteasyforcustomerstousesoftwareandapplications.Basedonusers’experienceanexcellentUIinterfacedesignislookingforthereflectionofbestinteractionofproductpurpose.ThethemeofmydesignisacollegealumniassociationAPP.Thealumniassociationisanorganizationwhichisinformative,knowledgeintensive,andhasspecialemotionalconnectionwiththeirAlmamater.Inthefaceofsuchaspecialgroup,theusers’experienceanddemandisinthefirstplace.Insuchaneraofhighefficiency,thesimpleandintuitiveUIinterfacecanhelpusersexperiencemoreconvenienceinoperation,andcanmeettheirneedsinarelativelyshortperiodoftime.WithconciseandefficientasthebreakthroughpointthismobilephoneAPPcarriesonthedesign.Withoutstandingandcleartheme,andtheoverallunifiedinterfacestyle,thecolorissimplebutnotmonotonous;thedivisionofthefunctionmoduleisveryclear.Intheinteractiveoperationitbringsunexpectedsurpriseexperiencetousers.SothisisasuitableAPPforstudentsandgraduatesofcollegesand:UIdesign,Mobileinterface,Alumniassociation,succinctandhigh-efficiency,Photoshop 引 課題的提 課題的背景和意 課題的現(xiàn)狀及其發(fā) 典型案 本課題的主要任務(wù)及目 主要任 最終目 基本要素設(shè) 擬采用的設(shè)計(jì)方法與........................................標(biāo)準(zhǔn)色定 概要設(shè) 創(chuàng)意來 產(chǎn)品的風(fēng)格定 APP交互界面結(jié)構(gòu) 設(shè)計(jì)表現(xiàn)說 開場界 效果 界面說 登陸界 效果 界面說 校園界 效果 界面說 校友界 效果 界面說 發(fā)布界 效果 界面說 發(fā)現(xiàn)界 效果 界面說 搜索界 效果 界面說 聊天界 效果 界面說 界 效果 界面說 設(shè)置界 效果 界面說 設(shè)計(jì)中遇到的和解決方 結(jié) 設(shè)計(jì)結(jié) 心得體 參考文 課題的提隨著現(xiàn)代社會電子科學(xué)技術(shù)的不斷進(jìn)步，再也不向發(fā)展初期那樣，功能僅僅只是通訊和這兩個(gè)方面上而現(xiàn)今的卻早已擺脫了早期的單一模式，逐步向著多元化使用方向發(fā)展同時(shí)隨著現(xiàn)今智能的UI界面變得愈發(fā)的豐富，各種各樣的圖標(biāo)設(shè)計(jì)愈發(fā)的吸引人們的眼球，人性化的設(shè)計(jì)也為智能的發(fā)展迎來了更好的口碑。成APP，這樣一來，這種資源就能最大程度的貼近我們生活，為我們的生活我國高校校友會有由學(xué)校主導(dǎo)建立和由校友自發(fā)形成2種情況。一般來講，性、行業(yè)性強(qiáng)，具有覆蓋面小、規(guī)模小、相對固定、組織方便等特點(diǎn)?，F(xiàn)實(shí)APP，UI設(shè)計(jì)是用戶與交互最直接的窗口它在很大程度上決定了交互體驗(yàn)好壞用戶偏好的差異操作的異同都響著UI設(shè)計(jì)進(jìn)而影響用戶的體驗(yàn)感受因此提供更加智能友好更加易于作的UI界面成了用戶界面計(jì)的所在其次UI的設(shè)計(jì)價(jià)值也體現(xiàn)在為品牌樹立良好的形象為關(guān)產(chǎn)業(yè)的合作連接提供的可能性[]。，來說,就是對我們?？吹降慕缑妗⒂螒蚪缑妗⒔缑?、辦公軟件界面UI的設(shè)計(jì)體驗(yàn)UI設(shè)計(jì)作為近年新興行業(yè)之一正在以高速發(fā)展并得到行業(yè)矚目的目光，同時(shí)界面設(shè)計(jì)對于一個(gè)互聯(lián)網(wǎng)產(chǎn)品的成功是十分重要的[]?，F(xiàn)代社會的界面設(shè)計(jì)軟件的日新月異,使軟件界面設(shè)計(jì)更加完美化無論從軟件界面設(shè)計(jì)圖案的色彩、版式、文字、設(shè)計(jì)風(fēng)格等方面都在發(fā)生著變化。隨著技術(shù)平均化,產(chǎn)業(yè)也出現(xiàn)價(jià)格競爭的環(huán)境下,的人機(jī)交互界面給市場提供新的賣點(diǎn),被認(rèn)為是新的產(chǎn)業(yè)[。UI的設(shè)計(jì)與功能開發(fā)是根據(jù)各種客戶群體的喜好及使用而進(jìn)行的設(shè)計(jì),軟件用戶界面擔(dān)負(fù)著對作品的信息傳達(dá)和宣傳的重任,同時(shí),它也是與設(shè)計(jì)師心理相結(jié)合的一門藝術(shù)[]。UI過界面之間的信息傳遞來減少用戶的負(fù)擔(dān)所以說對于界面的設(shè)計(jì)者來說，時(shí)代發(fā)展的需求，而針對于這一現(xiàn)象來看，UI身的設(shè)計(jì)方式，應(yīng)當(dāng)們所重視[7]。認(rèn)為,“美是概念，在整個(gè)西方古典學(xué)是最高的。從到實(shí)用主義美學(xué)提供了一個(gè)理論基礎(chǔ)來探討交互式技術(shù)的審驗(yàn)[8]。對于基于和智力開發(fā)的應(yīng)用程序,用戶界面設(shè)計(jì)人性化起著非常重要的設(shè)計(jì)一般來說,軟件開 UI。作為信息傳達(dá)的新之一,其價(jià)值已遠(yuǎn)遠(yuǎn)超過身為通信工具的功能價(jià)值本身帶來信息溝通的即時(shí)性將傳遞效率提升到了一個(gè)全新的層次，同時(shí)也是因?yàn)檫@一優(yōu)勢,各類應(yīng)用程序在消息的推送和內(nèi)容的展示方面都側(cè)印象深刻,而這樣的視覺傳達(dá)模式與人們對與界面的需求是不謀而合的“極UIUI界面的視覺需求。對端界面設(shè)計(jì)中極簡主義設(shè)計(jì)風(fēng)格的應(yīng)用研究不僅有利于推動端用戶界面設(shè)計(jì)的發(fā)展,也從側(cè)面提高了設(shè)計(jì)對端頁面設(shè)計(jì)的認(rèn)識[10]將極簡主義風(fēng)格做為一個(gè)探路石,探索在端用戶界面設(shè)計(jì)中能否有新舊保持著干凈、清爽。使得端用戶界面達(dá)到真正的“簡單、好用。。AlumniAssociationAlumniOrganization。一般國普通高校校友工作所在的職能定位以及運(yùn)行的模式,對加快我國普通高校校友，APP，畢業(yè)生可以通過社交軟件在網(wǎng)絡(luò)平臺互相聯(lián)系和交流，了解母校的發(fā)展現(xiàn)狀了解校友的工作生活信息自己的生活工作心得和成就，結(jié)交優(yōu)秀的校友，讓校友間的交流成為生活中的重要部分。，成立了校友會，如1913年就成立了校友會，師范大學(xué)與1915年立校友會，大學(xué)校友會成立于1929年，廈門大學(xué)校友會成立于1940年，1942隨著我國經(jīng)濟(jì)社會的和發(fā)展，高校承擔(dān)的社會職能越來越廣泛，當(dāng)高校開放辦學(xué)、自主辦學(xué)成為必然趨勢，大學(xué)校友會必然得到蓬勃發(fā)展[14]2090在智能普遍發(fā)展的今天，各個(gè)高校的校友會也以APP的形式走進(jìn)我們的生活。華技大學(xué)、同濟(jì)大學(xué)、大學(xué)、華南理工大學(xué)等等，這些高校都設(shè)計(jì)了其具有特色化的APP，以供畢業(yè)生在畢業(yè)后依然能感受到母校的氣息和相比之下，大學(xué)校友會歷史悠久。耶魯大學(xué)是校友活動的發(fā)源地，其校友活動開始于1792年。而第一個(gè)校友組織是1821年學(xué)院組建的。此后，很多大學(xué)都建立了類似的校友組織。到19世紀(jì)末期，各大學(xué)的校友會開始組織自己的具有特色的校友團(tuán)體，比如各種校友等等。大學(xué)溫州高校首個(gè)校友APP上“ 華技大學(xué)校友APP窗華技大學(xué)校友APP窗友2.0正式發(fā)布，窗友是基于移動互聯(lián)網(wǎng)的實(shí)名制非資訊打擾[17]自4月13日在華技大學(xué)推出窗友安卓版以來得到了廣IOS2.0619V1.02013年12月，同濟(jì)經(jīng)管校友會的應(yīng)用APP“同濟(jì)經(jīng)管人V1.0版”正式IOS““地點(diǎn)提供地圖指引服務(wù)。同時(shí)，用戶還可以在、等社交平臺已經(jīng)發(fā)同濟(jì)大學(xué)經(jīng)濟(jì)與管理學(xué)院校友會長紅教授希望APP將和 “通過全面整合校友會、和APP三大平臺，同濟(jì)經(jīng)管校友會將繼續(xù)致力于本課題的主要任務(wù)及目APP，包括界面設(shè)計(jì)和內(nèi)容構(gòu)建?；疽卦O(shè)擬采用的設(shè)計(jì)方法與整個(gè)APP的交互界面將采用AdobePhotoshopAdobeIllustrator兩個(gè)軟件相結(jié)合的方法進(jìn)行設(shè)計(jì)。AdobeIllustrator主要用于界面內(nèi)icon以及相關(guān)圖形和APPicon設(shè)計(jì)。AdobePhotoshopCS6主要用于交互界面的布局，用戶使此互界面的設(shè)計(jì)尺寸擬采用5s的尺寸大小，風(fēng)格簡約直觀，APP主要顏號取自AiCS6PantoneSolidCoated色標(biāo)PANTONE7728CPANTONE165CPANTONEP1-1UPANTONEBLACK6C設(shè)計(jì)尺寸 最佳顯示分辨率：72色彩模式1.1屏幕設(shè)計(jì)尺寸如圖1.1所示，為APP屏幕設(shè)計(jì)尺寸。創(chuàng)意戶之間的信息溝通，也可以通過所在專業(yè)搜索到自己的學(xué)長，以便咨詢就業(yè)和發(fā)展?fàn)顩r。很多已經(jīng)畢業(yè)的校友關(guān)心學(xué)校的相關(guān)發(fā)展和，可以通過校園頁面發(fā)取了綠色和桔色，來表現(xiàn)在校園度過的青蔥歲月和美好回憶，logologo，產(chǎn)品的風(fēng)格定APP交互界面結(jié)構(gòu)2.12.1APP開場圖3.1粉筆樣 圖3.2花朵樣3.3“YOU3.1頁面以及登陸頁面。圖3.2使用花和葉子組成“YOU，此logo頁面使用在最登陸 圖3.4用戶登 圖3.5用圖3.6找回 圖3.7重置成功開場界面后會出現(xiàn)用戶首次使用的登陸界面用戶名可直接登錄圖3.4為用戶登錄界面，如果是首次使用的用戶可以用戶名，點(diǎn)擊按鈕，會顯示3.5過而忘記的，如圖3.6-圖3.7所示校園圖3.8校園 圖3.9詳情圖 圖3.11寫評在校園界面，可以看到校園和校園文化兩部分，也是校友們最關(guān)心的兩部分圖3.8為更新的校園 （來校每條可以進(jìn)一步點(diǎn)開，查看詳情，同時(shí)可以對此條進(jìn)行點(diǎn)贊推薦、收藏和評論，如圖3.9-圖3.11校友圖3.12校友動 圖3.13好友列 圖3.14好友詳 圖3.15添加好43.15發(fā)布圖3.16發(fā)布文 圖3.17輸入內(nèi) 圖3.18發(fā) 圖3.19選擇圖3.20輸入配 圖3.20發(fā)布成在發(fā)布界面中，用戶可以發(fā)布文字、、三種狀態(tài)，圖3.16-圖3.17是發(fā)布文字，圖3.18-圖3.20是發(fā)布，用戶可以在相冊中選擇自己想要發(fā)布的，再配上相應(yīng)的表達(dá)文字。發(fā)布同理。發(fā)現(xiàn) 圖3.21發(fā)現(xiàn)動 圖3.22更新動以看到自己的更新狀態(tài)如圖3.21-3.22所示點(diǎn)贊和評論與校園頁面同理。搜索3.23擊下面給的相關(guān)內(nèi)容推薦，查看自己感的內(nèi)容，如圖3.23所示。聊天圖3.24新消息提 圖3.25列3.26開后可以選擇并進(jìn)行，如圖3.25-圖3.26所示。界圖3.27頁 圖3.28資圖 主 圖3.30好友管圖3.31收點(diǎn)擊右上角按鈕進(jìn)入界面，在此界面，用戶可以修改自己的頭像，完善自己的詳細(xì)資料，如圖3.27-3.28所示。當(dāng)有人對你的狀態(tài)發(fā)布進(jìn)行了點(diǎn)贊推薦或者評論，可以在消息頁面中進(jìn)行查看，如圖3.29所示。對之前的校園和動態(tài)進(jìn)行收藏操作的，可以在收藏頁面中集中查看，如圖3.31所示。在我3.30設(shè)置界圖3.31設(shè) 圖3.32賬號安 圖3.34隱圖3.35通 圖3.36關(guān)護(hù)自己的賬號安全將用戶名和自己的和號綁定加強(qiáng)認(rèn)證如圖3.32以設(shè)定自己是否需要消息通知，通知時(shí)是否需要聲音和振動，如圖3.33所示。在薦好友和好友，如圖3.34所示。在通用頁面，用戶可以選擇軟件所用的語言，以及字體大小，還可以及時(shí)清理空間，保證運(yùn)行速度，如3.35的使用有疑惑或不滿，可以去評分或者，如圖3.36所示。設(shè)計(jì)中遇到的和解決方Illustrator的使用不太熟練，在制作初期，操作較為，對于顏色的配比也采用線條填充，與整個(gè)風(fēng)格更加相配。雖然遇到了種種問題，但我相信只要肯下功夫，就沒有解決不了的問題，而且在遇到問題是，還有指導(dǎo)老師和設(shè)計(jì)為大四學(xué)生，我覺得此次的APP的設(shè)計(jì)意義重大，無論我們以后在何處工作發(fā)展，大學(xué)校園是我們最深刻的地方，所以對于用戶來說，整體風(fēng)格APP心得本次畢業(yè)設(shè)計(jì)到此就結(jié)束了，同時(shí)大學(xué)四年時(shí)光也落下了帷幕。在設(shè)計(jì)制作過程中我深刻的體會到了身為一名UI設(shè)計(jì)師的不易無論是設(shè)計(jì)理念還是為今后的設(shè)計(jì)積累寶貴的經(jīng)驗(yàn)。[1].高校校友會的職能與校友資源有效開發(fā)的研究[J].廣西大學(xué)學(xué)[2]王玉斌.我國高校校友會工作現(xiàn)狀及其理念探討[J].工業(yè)大學(xué)學(xué)[3