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

陳平　馮艷茹

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

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

中圖分類號(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í)次序。把重要的元素和核心功能放在頁面前端和中心位置。簡化、刪除或合并其他次要信息，增強(qiáng)用戶體驗(yàn)與交互，讓用戶更關(guān)心的內(nèi)容顯示在頁面的主要區(qū)域中[1]。

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

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

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

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

使用更適合設(shè)計(jì)尺寸的網(wǎng)格系統(tǒng)，如果使用xxhdpi作為畫布尺寸，屏幕尺寸為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)格線進(jìn)行詳細(xì)的設(shè)置。

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

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)語

本文對(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è)新穎界面，考慮用戶體驗(yàn)，增添了適用性，預(yù)設(shè)了根本定位、日常運(yùn)用場(chǎng)合、新式智能體驗(yàn)，創(chuàng)造了最新的用戶體會(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] 王占北，程炎明.色彩語義學(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