基于房產的移動端UI界面設計

陳平　馮艷茹

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

關鍵詞：UI技術;Android手機端;App界面;房產

中圖分類號：TP391 文獻標識碼：A 文章編號：1007-9416（2019）02-0184-01

1 界面設計

1.1 主界面設計

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

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

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

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

1.2 推薦界面設計

使用更適合設計尺寸的網格系統(tǒng)，如果使用xxhdpi作為畫布尺寸，屏幕尺寸為1080*1920px，導航欄高度為144px，標簽欄高度為144px。由于在xxhdpi中，1dp=3px，所以最小間隔8dp=24px，最小點擊區(qū)域為48dp（144px）。則應該建立8dp（24px）的網格系統(tǒng)進行參考，對網格線進行詳細的設置。

選擇更符合項目需求的占位圖片，占位圖片的選擇雖然對最終上線的界面沒有實質性的影響，但是對于一個高保真界面來說，占位圖片的選擇有時候直接影響著整張界面最終的視覺風格與定位，所以占位圖片的選擇是至關重要的。選擇占位圖片時，在保證圖片清晰，美觀的前提下，要選擇那些符合主要目標用戶心里預期及產品定位的圖片。

2 登錄界面設計

無論是網站設計還是App設計，登錄和注冊界面都是產品轉化的一個關鍵入口。下面將詳細闡述如何才能制作出效果佳、操作方便的登錄和注冊界面。

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

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

登錄、注冊界面的常見表現形式，登錄與引導兩不誤。在App啟動的第一時間，即在引導頁面提供登錄或注冊入口，給予引導的時候提供登錄或注冊，使用這種表現方式可以在第一時間提供登錄注冊入口，有效的減少用戶點擊次數，同時保留用戶選擇的權利[3]。

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

直接使用第三方登錄。使用第三方進行登錄和注冊是目前比較流行的一種做法，它可以對一些用戶的基礎信息直接進行調用，不需要用戶輸入即可獲取諸如姓名、性別等信息，當使用第三方登錄和注冊時，一般會在視覺上給予明確的提示，加入第三方的圖標或Logo。

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

整合產品經理提供的要求，合理布局完善登錄，注冊界面結構。完成登錄、注冊界面的視覺設計。產品經理提供登錄、注冊界面要求，內容為：手機號、驗證碼、密碼、重新輸入密碼[4-5]。

篩選需求，果斷砍掉繁瑣無用的部分，保留合理的部分：手機號、驗證碼、密碼。避免重復輸入。

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

3 結語

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

參考文獻

[1] 貍雅人.Photoshop 智能移動終端APP界面設計[M].北京：人民郵電出版社，2013.

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

[3] Jeff Johnson.認知與設計理解UI設計準則[M].張一寧譯.北京：人民郵電出版社，2011.

[4] 王占北，程炎明.色彩語義學在產品設計中的一些構想[J].電子工業(yè)出版社，2013.

[5] Linda Holtzschue.高揚譯.解讀色彩[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