基于城市旅行生活指南移動應(yīng)用前端界面研究

摘要：通過競品分析、產(chǎn)品基礎(chǔ)框架、交互原型、視覺風(fēng)格這幾個方面來分析設(shè)計產(chǎn)品，并提出了相應(yīng)的措施，為移動旅行生活指南提供了一種全新的生活模式。根據(jù)以往的產(chǎn)品功能增加了符合年輕目標(biāo)用戶使用移動端的功能，使移動端更貼近于年輕人的審美和興趣，通過本設(shè)計在很大程度上提高了青年人旅游的便利性。

關(guān)鍵詞：交互原型;視覺設(shè)計;用戶體驗;案例教學(xué)

中圖分類號：TP37 文獻標(biāo)識碼：A

文章編號：1009-3044（2019）36-0270-02

旅行是當(dāng)今社會的一個持續(xù)的熱點，青年人每天都和手機移動端打交道。移動端改變生活，提高生活質(zhì)量，因此針對青年在生活中使用的一些旅行App做出調(diào)查與研究后，提出了基于城市旅行生活指南移動應(yīng)用前端界面App的交互原型圖以及交互邏輯設(shè)計，通過對App的色調(diào)風(fēng)格，視覺界面的動態(tài)效果的設(shè)計，讓移動端的界面更迎合青年生活。

1競品分析

從產(chǎn)品定位、目標(biāo)用戶、使用場景、戰(zhàn)略布局等方面對競品做分析，從產(chǎn)品的基本的框架層到交互再到視覺，通過橫縱向競品對比分析，得出這幾個結(jié)論：1）一類以基本IM通訊類為主，用戶使用界面簡單而又單調(diào)，界面功能不全面，顏色古板，動態(tài)效果沒有，不符合年輕人的性格和特點;2）很多旅游App并沒有太多的輔助功能，產(chǎn)品只給用戶提供了簡單輕便的體驗，但是沒有在界面設(shè)計上實現(xiàn)精確而又友好的界面端程序的圖標(biāo)。3）有些移動端增加了“夜間模式”，根據(jù)一些用戶在睡覺前有閱讀文本的習(xí)慣需求，但是沒有旅游線路的界面設(shè)計?？傮w上移動端的菜單框架設(shè)計內(nèi)容“更多”的是基于創(chuàng)建、收集和垂直分類的引導(dǎo)，而不是水平分類的引導(dǎo)。這些設(shè)計更適合問答、欄目、文章的閱讀模塊，而沒有更加適合年輕人喜歡搜索的模塊圖標(biāo)，設(shè)計界面從用戶角度來說，應(yīng)該讓旅游的移動端平臺，讓用戶有更好的體驗感。根據(jù)以上分析，從產(chǎn)品本身的功能角度和產(chǎn)品使用方式角度考慮，使基于城市旅行生活指南移動應(yīng)用前端界面的設(shè)計更加符合年輕人。

2界面模式設(shè)計分析

首頁（home page）：首頁是顯示各種信息的頂級界面，首頁也叫門戶界面。它連接著其他界面，顯示各種信息。

過場界面（on boarding）：過場界面也叫引導(dǎo)頁。出現(xiàn)在應(yīng)用程序首次推出時，展示產(chǎn)品的特點和功能。

教程界面（coach flark）：這是一種臨時界面，主要提示用戶先做什么事、后做什么事，教會用戶使用產(chǎn)品。

一覽界面（view）：連續(xù)顯示相關(guān)內(nèi)容。一覽界面中包括通知界面、活動界面等。

詳情界面：顯示特定的條目信息，界面層級較深。一般顯示為前一頁提及的產(chǎn)品更深層次的內(nèi)容。

輸入/操作界面：用戶可以執(zhí)行特定操作，包括登陸、發(fā)布信息、拍照和設(shè)置。

3交互設(shè)計

指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。

交互的初始：首先是引導(dǎo)頁，先跟用戶打招呼，知道用戶要什么，引導(dǎo)用戶。

交互等待過程：就是閃屏。設(shè)計時主要考慮到降低用戶在這段等待時間的敏感性;如果無法降低，就給予期望;千萬不能呆滯。同時這里應(yīng)該沒置跳過按鈕，給用戶自主操控的機會和自由。

搜索交互設(shè)計：搜索主要考慮用戶在使用過程的搜索體驗，希望搜索的界面美觀和友好，同時希望有些動態(tài)界面引導(dǎo)。

4整體視覺界面設(shè)計

整體視覺設(shè)計風(fēng)格字體排版：即字體開始變得越來越大，大字體搭配極簡風(fēng)格來使用;分屏式設(shè)計，將視覺排版跟文字元素區(qū)別開來，共生共存，又保持一致性。

從左到右依次是啟動頁、All Shop+、詳情貞（單頁）、創(chuàng)建線路。啟動頁以logo為主體，宣傳標(biāo)語是“Guide to better eity”;All Shop+展示了店鋪展示效果，以不規(guī)則文字排版，貼近UI流行趨勢，突卅個性的意味;詳情頁（單頁）圖文分開，以店鋪展示為主，吸引用戶繼續(xù)瀏覽的興趣;創(chuàng)建線路，分為兩個部分，上為城市地圖清晰展示地理位置，下為店鋪選擇可以跟隨用戶意愿改變選擇，從而影響后續(xù)地圖路線的變化。

5軟件整體架構(gòu)信息的確立

從左到有依次是地點排序、路線編輯、選擇城市、登錄注冊。地點排序，分為兩個部分，上為城市地圖清晰展示地理位置，下為店鋪排序可以跟隨用戶意愿改變順序，從而影響地圖路線的變化;路線編輯，主要賦能給用戶分享記錄行程信息的作用，可以作為攻略分享給其他潛在用戶達到宣傳目的;選擇城市，是路線計劃的路口，這里并不和開始選擇城市矛盾，只是為了給用戶更自由的選擇;登錄注冊，簡單明了，突出登錄注冊功能為主，整體架構(gòu)如圖l所示：

6結(jié)束語

本文研究了基于城市旅行生活指南移動應(yīng)用前端界面，偏向簡單、簡約、時尚，界面設(shè)計上添加了一點鮮艷的顏色點綴，透露出一點小調(diào)皮，不會讓整體失去活力的界面。設(shè)計主要優(yōu)點為省流量模式、網(wǎng)頁優(yōu)化模式和夜間模式。在今后的設(shè)計中主要從用戶的體驗和交互沒計中去挖掘。

參考文獻：

[1]李曾鳴，梁強，阿倪蘇.旅游分享類APP的市場應(yīng)用價值分析[J]遼寧經(jīng)濟，2017（12）.

[2]譚瑤.攜程旅行APP用戶體驗研究[D].河北：河北大學(xué)，2016.

[4]王洪霞，趙洪文.基于UI界面設(shè)計中色彩應(yīng)用研究[J].新媒體研究，2018（22）.

【通聯(lián)編輯：張薇】

收稿日期：2019-09-25

作者簡介：謝富平（1976-），男，副教授，碩士，研究方向為計算機圖形設(shè)計。