基于房產(chǎn)的移動(dòng)端UI界面設(shè)計(jì)

陳平　馮艷茹

摘要：本文以UI技術(shù)，針對(duì)Android手機(jī)端用戶(hù)系統(tǒng)，設(shè)計(jì)并制作符合手機(jī)端用戶(hù)的使用習(xí)慣和審美偏好系統(tǒng)規(guī)范App界面，使房產(chǎn)手機(jī)端App成為廣大消費(fèi)者的營(yíng)銷(xiāo)平臺(tái)，同時(shí)借助智能手機(jī)充分利用碎片時(shí)間，對(duì)不斷提高購(gòu)買(mǎi)率和轉(zhuǎn)化率具有重要意義。

關(guān)鍵詞：UI技術(shù);Android手機(jī)端;App界面;房產(chǎn)

中圖分類(lèi)號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2019）02-0184-01

1 界面設(shè)計(jì)

1.1 主界面設(shè)計(jì)

從功能引出布局結(jié)構(gòu)，功能的重要程度決定顯示信息的優(yōu)先級(jí)次序。把重要的元素和核心功能放在頁(yè)面前端和中心位置。簡(jiǎn)化、刪除或合并其他次要信息，增強(qiáng)用戶(hù)體驗(yàn)與交互，讓用戶(hù)更關(guān)心的內(nèi)容顯示在頁(yè)面的主要區(qū)域中[1]。

扁平化布局，盡可能讓用戶(hù)以最少的步驟找到自己的任務(wù)。在各個(gè)頁(yè)面不斷重復(fù)核心功能，整體布局規(guī)劃，將用戶(hù)常用的頁(yè)面放置在屏幕下面的標(biāo)簽欄。讓用戶(hù)知道自己在哪里，一級(jí)頁(yè)面底部用顏色明確標(biāo)出用戶(hù)所在的位置。

手機(jī)端產(chǎn)品的使用場(chǎng)景大都是移動(dòng)的，處在不穩(wěn)定的環(huán)境中，在使用手機(jī)端App時(shí)利用的大都是碎片化的時(shí)間，還有手機(jī)的屏幕尺寸比電腦屏幕小的多，用戶(hù)使用手機(jī)是以手指來(lái)操作，所以最小可點(diǎn)擊區(qū)域都要比手指可點(diǎn)擊區(qū)域要小。用戶(hù)第一眼看到的是界面，其次是內(nèi)容，在這個(gè)階段，符合品牌好的設(shè)計(jì)感和內(nèi)容豐富會(huì)加分。主界面要在最短的時(shí)間內(nèi)要讓用戶(hù)對(duì)內(nèi)容產(chǎn)生興趣。所以要讓主界面抓住用戶(hù)的眼球，吸引用戶(hù)。給用戶(hù)留下好的視覺(jué)享受。

視覺(jué)風(fēng)格保持一致與網(wǎng)頁(yè)端產(chǎn)品相統(tǒng)一，主體顏色采用綠色（#339900），體現(xiàn)健康，安全元素，彰顯個(gè)性。使用微軟雅黑字體，強(qiáng)調(diào)規(guī)范下的美學(xué)。圖標(biāo)使用極簡(jiǎn)主義線(xiàn)條，簡(jiǎn)單、秀氣[2]。

1.2 推薦界面設(shè)計(jì)

使用更適合設(shè)計(jì)尺寸的網(wǎng)格系統(tǒng)，如果使用xxhdpi作為畫(huà)布尺寸，屏幕尺寸為1080*1920px，導(dǎo)航欄高度為144px，標(biāo)簽欄高度為144px。由于在xxhdpi中，1dp=3px，所以最小間隔8dp=24px，最小點(diǎn)擊區(qū)域?yàn)?8dp（144px）。則應(yīng)該建立8dp（24px）的網(wǎng)格系統(tǒng)進(jìn)行參考，對(duì)網(wǎng)格線(xiàn)進(jìn)行詳細(xì)的設(shè)置。

選擇更符合項(xiàng)目需求的占位圖片，占位圖片的選擇雖然對(duì)最終上線(xiàn)的界面沒(méi)有實(shí)質(zhì)性的影響，但是對(duì)于一個(gè)高保真界面來(lái)說(shuō)，占位圖片的選擇有時(shí)候直接影響著整張界面最終的視覺(jué)風(fēng)格與定位，所以占位圖片的選擇是至關(guān)重要的。選擇占位圖片時(shí)，在保證圖片清晰，美觀的前提下，要選擇那些符合主要目標(biāo)用戶(hù)心里預(yù)期及產(chǎn)品定位的圖片。

2 登錄界面設(shè)計(jì)

無(wú)論是網(wǎng)站設(shè)計(jì)還是App設(shè)計(jì)，登錄和注冊(cè)界面都是產(chǎn)品轉(zhuǎn)化的一個(gè)關(guān)鍵入口。下面將詳細(xì)闡述如何才能制作出效果佳、操作方便的登錄和注冊(cè)界面。

充分考慮手機(jī)端用戶(hù)的使用習(xí)慣，合理保留和調(diào)用用戶(hù)的信息，盡量避免繁瑣的鍵盤(pán)操作。使用第三方注冊(cè)登錄，這樣可以直接調(diào)用一些常用的用戶(hù)信息，如姓名、性別、電話(huà)等。將某些不重要的個(gè)人信息作為選填項(xiàng)目。提供更簡(jiǎn)單和更少步驟的登錄、注冊(cè)流程。

及時(shí)給予明確的反饋，充分考慮到輸入框內(nèi)的格式要求，在輸入框內(nèi)用淺色文字對(duì)賬號(hào)進(jìn)行說(shuō)明：需要用戶(hù)提供數(shù)字、字符還是郵箱號(hào)碼。這樣一來(lái)用戶(hù)在操作時(shí)可盡量避免輸入錯(cuò)誤而帶來(lái)的煩惱。

登錄、注冊(cè)界面的常見(jiàn)表現(xiàn)形式，登錄與引導(dǎo)兩不誤。在App啟動(dòng)的第一時(shí)間，即在引導(dǎo)頁(yè)面提供登錄或注冊(cè)入口，給予引導(dǎo)的時(shí)候提供登錄或注冊(cè)，使用這種表現(xiàn)方式可以在第一時(shí)間提供登錄注冊(cè)入口，有效的減少用戶(hù)點(diǎn)擊次數(shù)，同時(shí)保留用戶(hù)選擇的權(quán)利[3]。

移動(dòng)端App同時(shí)向用戶(hù)提供登錄和注冊(cè)按鈕，即將兩個(gè)按鈕統(tǒng)一放在一個(gè)頁(yè)面中。這種布局方法可以最大限度的保證界面功能的簡(jiǎn)潔，在結(jié)構(gòu)上也更加清晰，同時(shí)可以向用戶(hù)呈現(xiàn)更多的視覺(jué)效果和想象空間，但是仍舊需要用戶(hù)多一步點(diǎn)擊才能進(jìn)行具體的操作。

直接使用第三方登錄。使用第三方進(jìn)行登錄和注冊(cè)是目前比較流行的一種做法，它可以對(duì)一些用戶(hù)的基礎(chǔ)信息直接進(jìn)行調(diào)用，不需要用戶(hù)輸入即可獲取諸如姓名、性別等信息，當(dāng)使用第三方登錄和注冊(cè)時(shí)，一般會(huì)在視覺(jué)上給予明確的提示，加入第三方的圖標(biāo)或Logo。

注冊(cè)和登錄是分開(kāi)的，并且注冊(cè)高于登錄。有的App與網(wǎng)頁(yè)端產(chǎn)品結(jié)構(gòu)保持高度一致，要求用戶(hù)首先注冊(cè)，然后再進(jìn)行登錄，它的優(yōu)勢(shì)是多平臺(tái)登錄體驗(yàn)保持一致，符合網(wǎng)頁(yè)端用戶(hù)的基本習(xí)慣，但是注冊(cè)、登錄過(guò)程過(guò)于繁瑣，要求用戶(hù)進(jìn)行大量的輸入操作，手機(jī)端用戶(hù)很有可能還沒(méi)有完成注冊(cè)就會(huì)中途退出，使流失率大大增加。一鍵登錄。點(diǎn)擊“一鍵登錄”，App后臺(tái)將發(fā)送一條短信給服務(wù)器并在獲取授權(quán)后自動(dòng)登錄，密碼可以自主選擇在個(gè)人設(shè)置中修改。

整合產(chǎn)品經(jīng)理提供的要求，合理布局完善登錄，注冊(cè)界面結(jié)構(gòu)。完成登錄、注冊(cè)界面的視覺(jué)設(shè)計(jì)。產(chǎn)品經(jīng)理提供登錄、注冊(cè)界面要求，內(nèi)容為：手機(jī)號(hào)、驗(yàn)證碼、密碼、重新輸入密碼[4-5]。

篩選需求，果斷砍掉繁瑣無(wú)用的部分，保留合理的部分：手機(jī)號(hào)、驗(yàn)證碼、密碼。避免重復(fù)輸入。

選擇合適的布局和結(jié)構(gòu)，重新規(guī)劃線(xiàn)框圖，在保留雙系統(tǒng)差異的前提下盡量對(duì)界面進(jìn)行統(tǒng)一，保證核心區(qū)域的布局一致，根據(jù)原型圖對(duì)界面進(jìn)行擬物化風(fēng)格設(shè)計(jì)。

3 結(jié)語(yǔ)

本文對(duì)房產(chǎn)手機(jī)端App項(xiàng)目設(shè)計(jì)需求，風(fēng)格要求，Android系統(tǒng)手機(jī)設(shè)計(jì)規(guī)范做了重點(diǎn)研究，給出了設(shè)計(jì)方案，并探討了設(shè)計(jì)時(shí)需要用到的關(guān)鍵技術(shù)。設(shè)計(jì)中整合了多重的側(cè)重點(diǎn)，創(chuàng)設(shè)新穎界面，考慮用戶(hù)體驗(yàn)，增添了適用性，預(yù)設(shè)了根本定位、日常運(yùn)用場(chǎng)合、新式智能體驗(yàn)，創(chuàng)造了最新的用戶(hù)體會(huì)。

參考文獻(xiàn)

[1] 貍雅人.Photoshop 智能移動(dòng)終端APP界面設(shè)計(jì)[M].北京：人民郵電出版社，2013.

[2] 韋爾奇.Android.App界面設(shè)計(jì)創(chuàng)意與實(shí)踐[M].郭華豐譯.北京：人民郵電出版社，2013.

[3] Jeff Johnson.認(rèn)知與設(shè)計(jì)理解UI設(shè)計(jì)準(zhǔn)則[M].張一寧譯.北京：人民郵電出版社，2011.

[4] 王占北，程炎明.色彩語(yǔ)義學(xué)在產(chǎn)品設(shè)計(jì)中的一些構(gòu)想[J].電子工業(yè)出版社，2013.

[5] Linda Holtzschue.高揚(yáng)譯.解讀色彩[M].北京：電子工業(yè)出版社，2013.

The UI Interface Design of Mobile Terminal Based on House Property

CHEN Ping， FENG Yan-ru

（Department of Information Engineering， Jiyuan Vocational and Technical College， Jiyuan Henan 459000）

Abstract：This paper designs and manufactures an App interface which conforms to the user's habits and aesthetic preference system specifications of Android mobile terminal user system with UI technology.To make the house property mobile phone app becomes the marketing platform of the vast consumers，and with the help of smart phones to make full use of debris time， and this is of great significance for increasing purchase rates and conversion rates.

Key words：UI technology; Android mobile phone; App interface; house property