移动开发界面设计两大关键要素

移动开发
移动开发的界面设计是很重要的,与传统的桌面软件一样,移动开发的页面设计也一定给用户以良好的体验效果。把握这两大要素将使移动开发界面设计变得完美无比

Android NDK初探我们了解到普通的开发者可以向移动开发领域转变,但是很多朋友在做移动终端软件时会遇到一些界面问题,这都是移动终端设备的界面。与传统的桌面软件一样,移动开发的页面设计也一定给用户以良好的体验效果。把握这两大要素将使移动开发界面设计变得***无比。

1、减少空间占用

与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以***的状态呈现屏幕信息.

接下来以当前正在工作的UI做为sample,实战空间优化.

未经优化的界面
未经优化的界面

改进原则

◆去除不必要的提示信息

合理减少界面中的文字信息,图形化界面直观的使用户可以完成操作任务.

◆控制字号,使用高亮/对比方式突出类似条目信息

有需要充分利用单屏的空间,在不影响文字显示底线,采用多途径的设计方式描述内容.

◆合理布局功能控件

减少显示中的控件使用, 学会聪明的隐藏低优先级的功能, 对于用户熟悉操作与产品开发都将是有益的.

如在Iphone平台善用标准化的action sheet, 在Android中的collapsed menu.

限制因素

◆平台操作习惯

遵循不同平台的设计准则(你可以从官方的UI开发指南获取这些帮助教程), 避免将错误的理念带给特定的平台. 如你不会在Iphone的设计中使用Android/Symbian的Options. 熟悉这些原则不仅会使产品易用, 善用组合的设计也将提升操作体验.

◆屏幕物理属性

不同尺寸的屏幕不同的UI.要考虑的产品在所有目标用户的不同屏幕的显示效果. 如果要做一个通版的UI设计, 需要重点考虑带来的负面影响.触摸屏是另外一个需要考虑的情况,滑动使得翻页变的容易,可点击的元素尺寸是否有必要增大以适应大的手指…要知道,mutli-touch目前只是apple的专利.

我们需要为特定的这个页面做些什么

这个是一个Android平台的程序.

这是优惠券列表页面,优惠券是我们最重要的显示内容, 用户需要在单屏中预览更多的优惠券信息.商店信息次之.tab导航将被保持以保证用户不会迷路.

移除标题.

◆默认收起商店信息,点击可弹下显示.

◆为保证用户对商店信息的初步了解与注意,加入商店名称.

◆接下来我们将得到下面的界面.

经过优化的界面
经过优化的界面

UI不只是皮肤, 请用心使界面更加好用.

#p#

2、Flow大局观

在移动设计中,我们需要完善的功能flow,对它认知的价值使得flow在整个设计开发过程中始终走在前面。完善的flow不仅令功能产品更加易用,带来良好的用户体验,与此同时,也有助于提升开发效率,不到位的flow将带来设计与开发的反复,使团队蒙受损失。

良好的移动产品flow标准有三

◆end to end

◆清晰

◆整合

所谓end to end是指功能根据需求设计需要符合所在平台的特性,完整的考虑到用户如何在任何场景下使用操作及完成任务,提供因为有效或无效操作而带来的反馈帮助信息。

清晰是指整个设计中不会造成用户的疑惑,符合平台特性易于理解的设计。通常但凡清晰的功能,即使需要付出更多次的操作,value还是高于稍显混乱的设计,虽然后者简化了用户的操作。

整合,在前一篇《移动界面设计点滴(1)——减少空间占用》的一文有所涉及,受限于移动产品的诸多条件,合理的归纳使得产品使用更为流畅。这与清晰并不矛盾,重在调和。

下面以前些时间已经release的一个功能模块作为示例,展示如何设计一个良好的flow。

设计一个良好的flow
设计一个良好的flow

案例简析

功能目标:通过列表快速定位城市。

该功能从属于Map视图,图标以形象的道路指向标示。

在mockup中的功能主UI,显示支持的国家;

点击任意国家进入以首字母排列的城市列表;

点击任意城市,自动切入到Map视图并转向相应的可视地区。

主UI左上角提供Back键,预留回退。

在此,有两种设计思路。另一则是使用IPhone自带的Pickers控件,将国家列表横向置于上方,城市列表纵向置于UI下方。

它的优势在于可以在一屏中解决所有的问题。

但为了更好的使用Pickers,你需要加入更多的诸如Supported City等提示信息以区分两个Pickers,以及顶部的Done Cancel按钮,以完善flow。

这使得用户需要更多的时间来熟悉操作,这不是我们想要看到的。

【编辑推荐】

  1. Android NDK初探 你也可以做移动开发
  2. 开源的MeeGo 移动开发者还在等什么
  3. 专访最牛iPhone开发团队:走进移动开发
     

 

责任编辑:佚名 来源: mdong
相关推荐

2011-05-24 16:07:21

UI设计移动应用

2015-05-07 09:37:56

移动开发设计

2013-07-09 13:58:57

数据中心风险现代数据中心

2013-09-04 11:26:41

移动应用界面设计

2011-09-19 10:15:10

移动界面设计

2011-12-15 21:24:46

应用

2012-06-04 14:45:03

儿童移动应用界面设计基础知识

2013-04-16 21:52:27

IBM云计算开源

2011-02-14 10:55:39

Radware虚拟应用交付

2011-06-01 10:58:57

2011-12-20 10:42:22

Android应用界面设计

2018-09-01 16:17:08

2010-10-27 14:17:19

UI设计布局

2015-07-09 10:25:45

界面设计UI设计

2011-06-01 10:30:41

用户界面

2010-01-14 16:14:15

VB.NET界面设计

2016-03-16 09:41:50

移动界面设计

2011-07-25 18:40:43

iPad iPad开发 界面

2013-12-26 15:46:30

Android开发Android应用用户界面设计

2011-04-12 09:25:43

用户界面设计iPhoneiOS
点赞
收藏

51CTO技术栈公众号