设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 产品设计 > 【文末附彩蛋】移动UI界面设计,你千万不能忽略的设计要点

【文末附彩蛋】移动UI界面设计,你千万不能忽略的设计要点

Naranja
2018-06-15
91757

移动UI界面设计,不仅仅是一门技术,更是一门艺术。用户界面(UI)设计,顾名思义,目的就是为用户创造一种良好的体验。真正优秀的UI界面拥有良好用户体验,并且能为用户提供更简单,更快速的解决方式。产品经理和设计师在界面设计中过程经常会忽略一些关键的点,今天小编就来谈谈我们在用户界面设计中最容易忽视的设计要点。

易用性


不论你是想提高流量还是转换率,UI界面设计都起到关键性的作用。我们所需要的就是为我们用户提供最直观,最流畅的体验。例如我们可以选择使用触摸手势的UI元素来代替手动选择操作。

移动UI界面设计易用性

可读性设计

小型设备的可读性非常棘手。所以我们在设计UI界面时应该注重对比度,字体大小和行高,通过提升对比度,增加行高或字母间距来提高易读性,不要让文本重叠,而且最好是在白色的背景上填充黑色的字体。


移动UI界面设计可读性

移动UI界面设计字体

启动页面

众所周知,第一印象十分重要,而启动页面就是你的用户看到的第一个图像,UI界面设计的启动页面直接影响用户对你整个app 的看法。启动页面通常比较简约,并伴随产品的名称,标志或口号的展示。它的目的只是为了增强应用程序的视觉感知,每个应用程序都应当提供启动页面。建议将页面设置为4-8秒,尽量控制页面大小来减少加载时间。像国产原型设计工具Mockplus中的定时器功能,就可帮助设计师快速且高效的实现屏幕转场功能。

美团启动页面

登录页面

最好使用电子邮件注册来替换用户名注册或借助第三方登录平台来帮助用户简化登录过程,用户可根据自身需要进行选择。常见的第三方平台可以是QQ,微博或者微信。


移动UI界面设计登录页面

直观的导航

在用户体验设计方面,导航的概念是设定可用性的基本概念之一。导航对于任何类型的应用程序都非常重要。用户的时间和耐心都是有限的,如果你的用户不能很快找到他们想要的东西,他们很快就会退出你的应用或者网站,所以我们需要提供给用户最直观的导航栏。

搜索框

在众多手机界面设计中,搜索功能是非常必要的。因为搜索功能会提高用户使用你产品的效率,并且用户对于搜索功能的依赖性也比较大,所以设计好搜索功能将会很大程度上提高用户体验。最原始的方式就是文字的录入,现在我们能看到比较新颖的录入方式就是语音和图片的录入。以淘宝和QQ音乐为例。

空状态

第一次使用界面的体验至关重要,但设计师经常会忽略它。空状态是指当用户第一次下载你的app,他们不会看到任何数据,也不会有历史记录之类的东西,这被称为空白状态或零数据状态。此时你需要给用户一些提示并指导他们如何来使用你的app。否则,他们会感到不知所措,从而卸载你的软件。

添加分享按钮

分享是任何移动应用程序的重要功能,用户可随时随地的传播和分享有关你的产品的信息。通过添加分享图标按钮,让用户可以轻松的分享你的内容和信息。

快速的原型设计工具

如果你仔细看看大多数拥有精美华丽UI界面的应用程序或网站,你会发现大多数都利用了快速而且高效的原型制作工具。这为你的程序开发和网站建设的快速迭代奠定了坚实的基础。如今,像Mockplus,Principle和Sketch等都成为产品经理职场技能的必备工具了。就拿国产中口碑最好的原型设计工具Mockplus来说,最突出的优势就是简单,快速,超低的学习成本,直接上手,这也是为什么它成为小白产品经理的最爱。

下面小编就利用国产原型设计工具Mockplus来教大家两个实用而简单的UI界面设计小例子。

1.定时器转场:利用它可以方便地实现延时自动页面跳转、延迟自动交互的效果,我们以美团为例。

Step 1:在首页设置一个定时器,并将它和内容页设置交互。

mockplus界面

Step 2:设置定时器的默认延迟时间为1000ms,根据自己的需求进行更改

mockplus软件界面

在线演示地址:https://run.mockplus.cn/SWvMx9leKxkbDnBo/index.html


2.日期选择器

Step 1: 拖出一个滚动区,利用多行文本填充好自己想要的数字,比如说年月日,并放入滚动区中。

Step 2:利用2个形状组件,设置好背景色并调整透明度,覆盖在不显示区域。

Step 3:缩小滚动区即可,是不是很简单呢?

日期选择器

在线演示地址:https://run.mockplus.cn/6F59PgCY7z089FJF/index.html


总结

关于UI界面设计,每位设计师都应该考虑很多因素。用户界面经常会说以用户为中心(User Centered Design),简单说就是要满足用户的需求,你的界面要让用户有宾至如归的感觉。总的来说,优秀的用户界面设计的本质就是帮助用户尽可能简单,高效地完成任务。

上一篇
反面教材,这9个糟糕的网页设计实例引以为戒

Trista   06/18

移动端UI界面设计之-注册登录

Thomas   06/14

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com