【正文】 .................................................................................. 17 的排版展示 ................................................................................................................. 18 5 設(shè)計(jì)切圖及標(biāo)注 ................................................................................................................... 18 設(shè)計(jì)切圖 ............................................................................................................................ 18 切圖的含義 ..................................................................................................................... 18 切圖的格式 ..................................................................................................................... 18 ios 與安卓切圖 ................................................................................................................ 18 切圖命名格式 ................................................................................................................. 18 設(shè)計(jì)標(biāo)注 ............................................................................................................................ 19 標(biāo)注顏色 .................................................................................................................. 19 標(biāo)注內(nèi)容 .................................................................................................................. 19 標(biāo)注位置 .................................................................................................................. 19 6 總結(jié) ....................................................................................................................................... 19 參考文獻(xiàn) .................................................................................................................................. 21 英文摘要 .................................................................................................................................. 22 致謝 .......................................................................................................................................... 23 4 隴東學(xué)院本科生畢業(yè)論文（設(shè)計(jì)）誠(chéng)信聲明 本人鄭重聲明：所呈交的 本科畢業(yè)論文（設(shè)計(jì)），是本人在指導(dǎo)老師的指導(dǎo)下，獨(dú)立進(jìn)行研究工作所取得的成果，成果不存在知識(shí)產(chǎn)權(quán)爭(zhēng)議，除文中已經(jīng)注明引用的內(nèi)容外，本論文不含任何其他個(gè)人或集體已經(jīng)發(fā)表或撰寫(xiě)過(guò)的作品成果。 慶陽(yáng)市是著名的革命老區(qū)，境內(nèi) 有南梁革命紀(jì)念館、山城堡戰(zhàn)役遺址、河連灣陜甘寧省政府舊址等豐富的紅色旅游景區(qū)。 因此，UI 設(shè)計(jì) 將會(huì)更加 受 到 人們的重視。但是，中國(guó)的 UI 設(shè)計(jì)和西方發(fā)達(dá)國(guó)家的還是有很大的差距的，很大部分的軟件界面都是臨摹西方國(guó)家的軟件界面，沒(méi)有一點(diǎn)新穎與創(chuàng)新。 我的作品是一款擁有關(guān)于慶陽(yáng)紅色旅游的 APP 的 UI 設(shè)計(jì)。 目前，旅游類(lèi)的 APP 基本上都是由酒店、餐飲、機(jī)票、門(mén)票、路線等模塊組成的有查詢(xún)預(yù)訂功能的綜合性服務(wù)平臺(tái)，攜程旅行可以作為首個(gè)代表。比如慶陽(yáng)紅色旅游的景點(diǎn)，在這三款 APP 的查詢(xún)中更是鳳毛麟角，所以為了讓客戶(hù)滿(mǎn)意，有針對(duì)性的地方旅游類(lèi) APP 的設(shè)計(jì)是很重要的，慶陽(yáng)紅色旅游 APP 既是針對(duì)地方特色的一款 APP。更有甚者文字排版都錯(cuò)亂不堪，讓用戶(hù)無(wú)法進(jìn)行閱讀，更無(wú)法進(jìn)行操作。除了在元素、數(shù)值、鏈接和其他數(shù)據(jù)的展現(xiàn)形式上都要保持著統(tǒng)一，還要在場(chǎng)景和含義上保持一致。如果界面上的文字過(guò)多，它就會(huì)顯得十分擁擠，影響閱讀興趣。 協(xié)調(diào)性原則 設(shè)計(jì)界面時(shí)，要保證界面的協(xié)調(diào)性。 手機(jī) APP 框架結(jié)構(gòu)圖 在確定了需要設(shè)計(jì)的模塊以后，我們要根據(jù)模塊建立一個(gè)框架結(jié)構(gòu)圖，讓我們?cè)谠O(shè)計(jì)的時(shí)候可以按部就班有思路的去設(shè)計(jì)。部分原型圖如圖 所示。如圖 所示。 .5 首頁(yè)界面 16 旅游攻略界面 旅游攻略界面采用了列表的排列方式，怎樣游慶陽(yáng)的攻略全部進(jìn)行了陳列，點(diǎn)進(jìn)去一個(gè)模塊可以得到詳細(xì)的介紹。 圖 錯(cuò)誤 !文檔中沒(méi)有指定樣式的文字。在 APP 中切圖，與在 web 中切圖大致是一樣的。如果在設(shè)計(jì)時(shí)需要成倍數(shù)關(guān)系的話，可以在后綴名前加上2x，表示二倍的關(guān)系； 3x 則表示三倍的關(guān)系。 標(biāo)注位置 所有元素統(tǒng)一距離屏幕最左 24px 和最右 24px。隨后，介紹了項(xiàng)目的創(chuàng)意來(lái)源，敘述了軟件界面的前期準(zhǔn)備工作、軟件界面設(shè)計(jì)的原則，并對(duì) 界面色彩和 APP 的流程圖進(jìn)行了展示。 Qingyang red tourism 23 致謝 本論文是在導(dǎo)師 XXX 教授的悉心指導(dǎo)下完成的，導(dǎo)師淵博的專(zhuān)業(yè)知識(shí)，精益求精的工作作風(fēng)，嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度，誨人不倦的高尚師德，嚴(yán)以律己、寬于待人的崇高風(fēng)范，樸實(shí)無(wú)華、平易近人的人格魅力對(duì)我有著深 遠(yuǎn)的影響。本論文從選題、構(gòu)思、結(jié)構(gòu)以及實(shí)證研究方法等方面經(jīng)過(guò)反復(fù)修改和最后的完稿，每一步都是在導(dǎo)師的指導(dǎo)下完成的，傾注了導(dǎo)師大量的心血。選擇設(shè)計(jì)中具有代表性的界面進(jìn) 20 行列舉。這一部分也是需要我們進(jìn)行標(biāo)注的部分。慶陽(yáng)紅色旅游APP 是按照 iphone 6 的尺寸進(jìn)行 設(shè)計(jì)的，所以切圖命名時(shí)采用的都是 2x的命名方式。 切圖的格式 一般切圖 的格式在 ps 中存儲(chǔ)成 web 格式時(shí)，選擇的是 PNG24，而啟動(dòng)頁(yè)和引導(dǎo)頁(yè)的切圖采用的是 PNG8 的格式進(jìn)行存儲(chǔ)。界面包含我的資料、軟件反饋、分享給好友、軟件設(shè)置和版本升級(jí) 5 大模塊。 圖 錯(cuò)誤 !文檔中沒(méi)有指定樣式的文字。 .3 注冊(cè)界面 15 登錄界面 登錄界面有用戶(hù)和密碼兩部分內(nèi)容，輸入后點(diǎn)擊登錄進(jìn)入界面。 原型圖 主要界面設(shè)計(jì) 引導(dǎo)頁(yè)界面 引導(dǎo)頁(yè)采用的是目前市場(chǎng)上比較流行的扁平化界面進(jìn)行設(shè)計(jì)， 用一 個(gè)小人的形象來(lái)統(tǒng)一界面的規(guī)劃， 介紹了軟件的主要功能，如圖 所示。 手機(jī) APP 框架結(jié)構(gòu)圖 Logo 的設(shè)計(jì) Logo 的設(shè)計(jì)采用慶陽(yáng)紅色旅游中“紅色”二字的首字母“ H”和“ S”組合而成，為了突出紅色旅游的特色， Logo 的顏色采用了最具有代表性的中國(guó)紅，象征著革命的勝利；鮮艷的紅色與中國(guó)國(guó)旗的 顏色相互照應(yīng)。將重要的控件放在明顯的位置，讓用戶(hù)便于瀏覽和操作。留白還可以突顯界面中其他的色彩，這對(duì)于吸引用戶(hù)有很大的作用。用戶(hù)在使用時(shí)，就會(huì)建立一個(gè)標(biāo)準(zhǔn)的界面框架模型，在熟練了一個(gè)界面后，切換到另一個(gè)界面便可隨心所欲的進(jìn)行操作，并且?guī)?lái)的視覺(jué)效果也很贊，給用戶(hù)一種高度統(tǒng)一的感覺(jué)，體驗(yàn)度得到上升。 創(chuàng)意來(lái)源 選擇慶陽(yáng)紅色旅游 APP 的 U