基于房产的移动端UI界面设计

陈平　冯艳茹

摘要：本文以UI技术，针对Android手机端用户系统，设计并制作符合手机端用户的使用习惯和审美偏好系统规范App界面，使房产手机端App成为广大消费者的营销平台，同时借助智能手机充分利用碎片时间，对不断提高购买率和转化率具有重要意义。

关键词：UI技术;Android手机端;App界面;房产

中图分类号：TP391 文献标识码：A 文章编号：1007-9416（2019）02-0184-01

1 界面设计

1.1 主界面设计

从功能引出布局结构，功能的重要程度决定显示信息的优先级次序。把重要的元素和核心功能放在页面前端和中心位置。简化、删除或合并其他次要信息，增强用户体验与交互，让用户更关心的内容显示在页面的主要区域中[1]。

扁平化布局，尽可能让用户以最少的步骤找到自己的任务。在各个页面不断重复核心功能，整体布局规划，将用户常用的页面放置在屏幕下面的标签栏。让用户知道自己在哪里，一级页面底部用颜色明确标出用户所在的位置。

手机端产品的使用场景大都是移动的，处在不稳定的环境中，在使用手机端App时利用的大都是碎片化的时间，还有手机的屏幕尺寸比电脑屏幕小的多，用户使用手机是以手指来操作，所以最小可点击区域都要比手指可点击区域要小。用户第一眼看到的是界面，其次是内容，在这个阶段，符合品牌好的设计感和内容丰富会加分。主界面要在最短的时间内要让用户对内容产生兴趣。所以要让主界面抓住用户的眼球，吸引用户。给用户留下好的视觉享受。

视觉风格保持一致与网页端产品相统一，主体颜色采用绿色（#339900），体现健康，安全元素，彰显个性。使用微软雅黑字体，强调规范下的美学。图标使用极简主义线条，简单、秀气[2]。

1.2 推荐界面设计

使用更适合设计尺寸的网格系统，如果使用xxhdpi作为画布尺寸，屏幕尺寸为1080*1920px，导航栏高度为144px，标签栏高度为144px。由于在xxhdpi中，1dp=3px，所以最小间隔8dp=24px，最小点击区域为48dp（144px）。则应该建立8dp（24px）的网格系统进行参考，对网格线进行详细的设置。

选择更符合项目需求的占位图片，占位图片的选择虽然对最终上线的界面没有实质性的影响，但是对于一个高保真界面来说，占位图片的选择有时候直接影响着整张界面最终的视觉风格与定位，所以占位图片的选择是至关重要的。选择占位图片时，在保证图片清晰，美观的前提下，要选择那些符合主要目标用户心里预期及产品定位的图片。

2 登录界面设计

无论是网站设计还是App设计，登录和注册界面都是产品转化的一个关键入口。下面将详细阐述如何才能制作出效果佳、操作方便的登录和注册界面。

充分考虑手机端用户的使用习惯，合理保留和调用用户的信息，尽量避免繁琐的键盘操作。使用第三方注册登录，这样可以直接调用一些常用的用户信息，如姓名、性别、电话等。将某些不重要的个人信息作为选填项目。提供更简单和更少步骤的登录、注册流程。

及时给予明确的反馈，充分考虑到输入框内的格式要求，在输入框内用浅色文字对账号进行说明：需要用户提供数字、字符还是邮箱号码。这样一来用户在操作时可尽量避免输入错误而带来的烦恼。

登录、注册界面的常见表现形式，登录与引导两不误。在App启动的第一时间，即在引导页面提供登录或注册入口，给予引导的时候提供登录或注册，使用这种表现方式可以在第一时间提供登录注册入口，有效的减少用户点击次数，同时保留用户选择的权利[3]。

移动端App同时向用户提供登录和注册按钮，即将两个按钮统一放在一个页面中。这种布局方法可以最大限度的保证界面功能的简洁，在结构上也更加清晰，同时可以向用户呈现更多的视觉效果和想象空间，但是仍旧需要用户多一步点击才能进行具体的操作。

直接使用第三方登录。使用第三方进行登录和注册是目前比较流行的一种做法，它可以对一些用户的基础信息直接进行调用，不需要用户输入即可获取诸如姓名、性别等信息，当使用第三方登录和注册时，一般会在视觉上给予明确的提示，加入第三方的图标或Logo。

注册和登录是分开的，并且注册高于登录。有的App与网页端产品结构保持高度一致，要求用户首先注册，然后再进行登录，它的优势是多平台登录体验保持一致，符合网页端用户的基本习惯，但是注册、登录过程过于繁琐，要求用户进行大量的输入操作，手机端用户很有可能还没有完成注册就会中途退出，使流失率大大增加。一键登录。点击“一键登录”，App后台将发送一条短信给服务器并在获取授权后自动登录，密码可以自主选择在个人设置中修改。

整合产品经理提供的要求，合理布局完善登录，注册界面结构。完成登录、注册界面的视觉设计。产品经理提供登录、注册界面要求，内容为：手机号、验证码、密码、重新输入密码[4-5]。

筛选需求，果断砍掉繁琐无用的部分，保留合理的部分：手机号、验证码、密码。避免重复输入。

选择合适的布局和结构，重新规划线框图，在保留双系统差异的前提下尽量对界面进行统一，保证核心区域的布局一致，根据原型图对界面进行拟物化风格设计。

3 结语

本文对房产手机端App项目设计需求，风格要求，Android系统手机设计规范做了重点研究，给出了设计方案，并探讨了设计时需要用到的关键技术。设计中整合了多重的侧重点，创设新颖界面，考虑用户体验，增添了适用性，预设了根本定位、日常运用场合、新式智能体验，创造了最新的用户体会。

参考文献

[1] 狸雅人.Photoshop 智能移动终端APP界面设计[M].北京：人民邮电出版社，2013.

[2] 韦尔奇.Android.App界面设计创意与实践[M].郭华丰译.北京：人民邮电出版社，2013.

[3] Jeff Johnson.认知与设计理解UI设计准则[M].张一宁译.北京：人民邮电出版社，2011.

[4] 王占北，程炎明.色彩語义学在产品设计中的一些构想[J].电子工业出版社，2013.

[5] Linda Holtzschue.高扬译.解读色彩[M].北京：电子工业出版社，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