Tag Archives: Android

用Photoshop/Fireworks创建9PNG图像

写这篇帖子是突然觉得自己土啊,没做透彻,引以为戒。
如果9PNG的制作者不是DEV,而是UE,就不需要draw9patch.jar这个工具。
UI设计过程中的Photoshop/Fireworks,即可精确且高效地导出9PNG。
关键点:

1.元素四周设置边框为1px的全透明背景(看起来跟在draw9path一样)。
2.可以填充的内容规则:不透明纯黑色的线条、点、2个分开的点。
3.左右透明区域控制拉伸,上下透明区域控制内容。
4.后缀更名为.9.png。
范例:

mdongorg9png
(图像点击可放大)
个人倒是不建议把9PNG的控制权给DEV,通常他们不能通过draw9path.jar控制图像的质量,以及精确地了解图像伸缩与内容显示的区域。
最起初引发重新学习的过程是碰到draw9path.jar在MAC系统中不能运行是缘由所在路径中包含中文。

移动界面设计点滴(5)——主功能入口设计 tabbar or grid-based


传统的iPhone Android应用主界面功能入口是基于tabbar的设计,区别无非是tabbar的位置是top or bottom。(我们甚至还看到了针对这个位置的讨论,当然两者都有其设计的意义)
而随着产品功能的不断加入,会出现tabbar的空间不能满足需求的情况,你知道iPhone 默认只预留了5个位置(more并不是一个好的设计),在保证主功能可视与可点击的情况下,Android也摆脱不了tabbar设计受限的情况。
是的,我们需要改变这一个传统的设计。或许你在许多应用上已经有所体验——基于grid的设计。
首先,我们再重新回到前面的讨论,tabbar究竟出现了什么问题?综合来看,主要为以下几点

  • 无法满足一次展示全部功能或者更低操作成本下展示的需求。
  • tab切换存在不同tab执行重叠任务的可能,对于用户专注某一flow任务产生障碍。
  • 对操作本身的消极设计,增加误操作的可能性,也成为在单一任务执行时的视觉噪声。

grid-based的设计是如何解决上述的设计?

  • 在一个页面中允许加入大量的icon入口,并通过页面滑动轻松完成对功能的浏览。
  • 结合清晰丰富的功能入口,专注单一功能的流程设计。
  • 页面上更少视觉与可点击元素的加入,更clean的设计。

如何进一步的完善grid-based设计?

  • 我们在windowsPhone找到了答案——live tiles。它承载了更多的信息传达,而不只是icon。
  • 专注单一功能的核心flow,不要妄图在单一任务的操作过程中提供其它功能入口。
  • 随时终止并回到主功能入口的可能。

即便我们在上述的文中将tabbar批判的体无完肤,然而grid-based本身也不是完美主义,面临的挑战在于

  • 页面层次变深,对flow设计提出更高的要求。
  • 如果应用的主要功能不超过5个或者仅是单一功能,你并不需要这样一个扩展性极强的设计。

走完上述的文字,隐约察觉这其实是metro与iPhone/Android的碰撞。我想说,metro是一次设计思维的变革,它使得人们开始归回信息本身,任务被更自然的执行,而不再游离在冗余的页面元素。
在随后的几个月,你也会看到我们参与实现的应用——X。

移动界面设计点滴(1)——减少空间占用

Mobile UI design tips——how to reduce needless space
与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息.
接下来以当前正在工作的UI做为sample,实战空间优化.

改进原则

  • 去除不必要的提示信息
  • 合理减少界面中的文字信息,图形化界面直观的使用户可以完成操作任务.

  • 控制字号,使用高亮/对比方式突出类似条目信息
  • 有需要充分利用单屏的空间,在不影响文字显示底线,采用多途径的设计方式描述内容.

  • 合理布局功能控件
  • 减少显示中的控件使用, 学会聪明的隐藏低优先级的功能, 对于用户熟悉操作与产品开发都将是有益的.
    如在Iphone平台善用标准化的action sheet, 在Android中的collapsed menu.

限制因素

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

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

我们需要为特定的这个页面做些什么
这个是一个Android平台的程序.
这是优惠券列表页面,优惠券是我们最重要的显示内容, 用户需要在单屏中预览更多的优惠券信息.商店信息次之.tab导航将被保持以保证用户不会迷路.

  • 移除标题.
  • 默认收起商店信息,点击可弹下显示.
  • 为保证用户对商店信息的初步了解与注意,加入商店名称.

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

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