iphone ui 设计,几点基本的设计准则,创建优秀的用户界面

2011-10-24 蓝蓝 移动设备ui及体验

蓝注:这几点iphone的设计准则,应用在软件界面上也同样适合。

优秀的用户界面应该遵循一些人机界面设计准则,这些准则来源于人—也即用户—思考和工作的方式,而不是设备的能力。没有吸引力的,令人难以理解的或是不合逻辑的用户界面会让一个原本优秀的程序成为垃圾,而漂亮,直观而又吸引人的用户界面不仅可以改善程序的功能,还能激发用户的正面依赖感。

 

 

即使您已经对基本的设计准则有所了解,这一章也值得您读一下,因为本章着重讲述了这些准则是如何应用在iPhone应用程序中的。

隐喻

尽可能按照现实世界中的对象和操作来对您程序中的对象和操作建模。这能够帮助用户,尤其是新手,迅速地理解您的应用程序的是如何工作的。文件夹就是一个典型的软件隐喻。因为在现实世界中,人们将文件放在文件夹里,所以人们就能够迅速地理解在计算机上将数据放入文件夹的概念。

iPhone OS中的隐喻包括iPod播放控件,点击控件来触发事件,滑动开关,以及调色板上的数据。

虽然隐喻暗示了iPhone OS用户界面中对象和操作的含义,但是并没有限制其软件实现。回到文件夹的例子,软件实现的文件夹对象所具有的容量与现实世界中所对应的文件夹的物理容量毫无关系。

在您设计程序时,需要注意iPhone OS中已存在的隐喻,避免重复定义。同时,检查您的程序功能是否有对应的可用的自然隐喻。记住,即使如此,相较于为了适应您的应用程序用户界面而勉强使用现实世界的对象或操作的隐喻而言,使用标准控件和操作更为妥善。除非您选择的隐喻能得到大部分用户的认可,包括那些会增加而不是减少用户困惑的隐喻。

直观操作

直观操作意为人们感到他们在物理上,而非抽象地控制某物。其优点在于,用户更容易理解他们的行为对于操作对象所产生的结果。

得益于多点触摸的用户界面,iPhone OS用户享有高度直观的操控感。手势的使用让人们感到屏幕上显示的对象具有更大的亲和力和更强的操控感,因为他们并不需要用任何中间设备(如鼠标)就操控它们。

为了提高您的iPhone应用程序的操控感,您应确保:

  • 当用户操作屏幕上的对象时,这些对象保持可见

  • 用户操作的结果是一目了然的

阅读全文>>

标签: iphone ui 设计

评论(320) 浏览(4999)

优秀iPhone应用程序的共性

2011-10-23 蓝蓝 移动设备ui及体验

 

优秀的iPhone应用程序精确地满足了用户需求,同时提供了用户想要的体验。为了帮助您在应用程序中平衡这两点,本小节归纳了优秀iPhone应用程序的一些共有特点,并就如何将这些特点融合到您的产品中给予了建议。

简单和易用性

简单和易用是所有软件的基本原则,但在iPhone应用程序中它们尤其重要。iPhone OS用户很可能在使用您的应用程序的同时,还做着其他事情。如果用户无法快速明白如何使用您的应用程序,他们很可能会转而使用其他竞争者的应用程序,而且不会再尝试您的应用程序。

当您设计应用程序流程以及用户界面时,请遵循如下准则以保证应用程序的简单且易于使用:

  • 如何使用您的应用程序应显而易见。

  • 常见的功能和信息集中于屏幕的顶部。

  • 最大限度地减少文本输入。

  • 简洁地表达基本信息。

  • 为所有可点击元素提供一个指尖大小的目标区域。

阅读全文>>

标签: iphone ui 设计

评论(0) 浏览(7597)

iPad开发体验 用户准则

2011-10-22 蓝蓝 移动设备ui及体验

  iPad开发 体验 用户准则 是本文要介绍的内容,iPad 用户体验最主要体现在内容和交互:淡化程序UI ,以便用户关注所需的内容。美观的内容形式,富有真实感。充分利用设备的性能来增强内容的交互性。

支持所有方位

优秀iPad程序的其中一个重要因素是可以在所有方位上运行。竖向的大屏幕可以满足用户浏览内容的需求(当竖屏幕较小时,用户就会将屏幕旋转为横屏幕,这样一行就可以显示较多的文 字)。用户不太会注意最小设备结构(minimaldevice frame;使用iPhone时,用户单手握住手机时,屏幕多为竖向显示;而双手使用iPad,屏幕的显示方位并不能确定)或者home按键的位置,他们不认为设备有默认方位。这就导致 用户期望程序可以在当前方位上运行。所以程序尽量满足iPad各方位的运行要求。

保证以首要内容为重点。当旋转iPad的方位时,如重点显示的内容发生变化,用户会感觉对程序失去控制。

旋转时如何显示辅助信息或者功能。尽管能保证上一条,还要考虑如何显示较为次要的信息。例如邮箱功能中,首要 内容时发邮件,次要内容是联系人和收件箱的列表。

横屏的次要内容显示在左边的分视图中

竖屏的次要内容显示在气泡框中。

再如,横屏时,一款游戏以长方形显示,当旋转 到竖屏时,需要调整屏幕上的显示区域,游戏显示边框的上面或者下面增加显示空间,用于显示辅助信息,而不是垂直拉伸显示区域来撑满整个屏幕。

避 免布局变化过大或者无缘由地改变。所有方位中都显示相似的UI布局旋转时尽可能保留信息和文本的原有格式。尤其阅读文本时,重要的是避 免旋转之后用户找不到读到哪儿了。如果非要对页面重新布局,可以使用动画帮助用户理解当前页面的变化。例如,当旋转时要必须增加或者移除文本框时,可以选 择隐藏动作并在新布局中简单地淡出。为了有助于合理地设计旋转动作,可考虑在真实的生活中是如何和它们交互的。

避免使用 UI 元素或者定义一个旋转的手势来完成旋转动作。应该是内容随着iPad的旋转而旋转。

为每个显示方 位各提供一个启动图片。比如提供1004×768和748×1024的图片来满足两个方位的显示要求。

仔细考虑程序是否可以在所有方位上运行。有些程序只能在横屏或者竖屏下显示,此时:

显示程序为正常显示方式,无论当前iPad是什么方位。避免使用UI元素来告知用户旋转设备。支持180度旋转。

可以特殊处理输入式旋 转动作。有些游戏把旋转设备当成操作方式,这时候横竖屏切换时,可不改变游戏的显示方位。

增强交互

最好的iPad程序在用户执行明确的任务时提供新颖的交互方式。不要为了填满整个大屏幕而增加一些和主要任务没有直接关联的功 能,而是提升程序的用户体验。

例如读书程序中容许用户阅读时如能保留路径会提升阅读体验,不需要跳转到另外一个页面而是使用气泡框来变更 路径。程序可以让用户在文本中增加书签和注释,帮助用户交换书目或者对比阅读进度。

信息扁平化

阅读全文>>

标签: iPad ui

评论(83) 浏览(2524)

手机交互设计原则

2011-10-21 蓝蓝 移动设备ui及体验

在设计e指通 客户端和wap2.0 页面时,积累些手机交互设计经验,不断总结,理清设计思路。以下设计总结出手机交互设计原则,仅供参照。

屏幕

手机屏幕尺寸分为物理尺寸和显示分辨率。

  • 物理尺寸是按英寸对角线计算。
  • 显示分辨率指的是屏幕图像的精密度,是指屏幕所能显示的像素的多少。
  • 显示精度是每英寸上可以显示像素(DPI)。

NOKIA N78的物理尺寸为2.4英寸,显示分辨率为240*320像素;HTC T7278的物理尺寸为2.8英寸,显示分辨率为480*640像素。两款手机显示精度不同,同样100*100像素大小的图片在这两款手机上看到的效果也不同,同样大小的图片在HTC T7278看起来要比NOKIA N78小的多。

分辨率种类(不完全统计):

  1. 128*128  128*160 130*130  176*144  176*220 208*208 208*320  240*160 240*240 240*260
  2. 240*320 240*400 240*432 240*480 320*240 320*

阅读全文>>

标签: 触屏手机网页设计 ui设计

评论(157) 浏览(3417)

理解iPhone和iPad触摸式交互

2011-10-20 蓝蓝 移动设备ui及体验

 

表1-4 iPhone和iPad的触摸和手势允许开发者以新的方式接受用户输入

输入

类型

概述

气泡( Bubble

触摸

触摸并按住不动。在可单

击元素上弹出信息气泡

轻滑( Flick

触摸

触摸并滑动。滚动页面

轻滑,两个手指

手势

使用两个手指触摸并滑动。

滚动可滚动元素

掐捏

手势

移动两个手指。缩小或放大

轻击

触摸

单击。选择

轻击,两次

触摸

双击。放大列

阅读全文>>

标签: 触屏手机设计 iphone ui 设计

评论(0) 浏览(205556)

24个出色的联系表单页面设计

2011-10-19 蓝蓝 网站欣赏

 

有的网站没有“联系我们”页面,有些网站只有一个email超级连接 ,而且有些网站还将Email地址做成图片 来避免垃圾邮件。这些做法都会掩盖了联系表单的潜力和优势。

 

接受来自于你的网站的用户的反馈、纠正甚至是投诉 是很有用的。

请不要低估联系表单的作用,它是每个网站必备的。

我们收集了24个联系表单页面设计,希望你能喜欢并能从中获取灵感。

http://www.berttimmermans.com/
24个出色的联系表单页面设计

阅读全文>>

标签: 表单设计,网站欣赏

评论(87) 浏览(4553)

国外三个免费CSS模版下载站点

2011-8-20 蓝蓝 前端技术资源

 

做站的朋友经常需要到CSS模版,但哪里可以下载到免费要好的CSS模版呢?笔者将介绍几个网上可以免费下载CSS模版的站点。越多的CSS模版,你在设计网页时就越容易排版布局,因为有更多优秀的案例让你摄取精华。你不一定是依葫芦画瓢,你可以根据自己的实际情况作适应的调整改动,如你可能是利用该CSS模版中的字体配色,或者是图片的样式或者是表格的样式等等。

FreeCSSTemplates.Org

free CSS templates org

阅读全文>>

标签: CSS模版下载网站

评论(0) 浏览(2979)

创意设计的方法—无穷关联法

2011-6-4 蓝蓝 行业趋势

 

这是我根据头脑风暴的原理延展出来的一种方法,之所以称它为“无穷关联法”完全是因为它看起来很像无穷大的符号“∞”。当然,从原理上讲使用这个方法可以得出无穷无尽的创意设计。

在用“绝对伏特加”这个案例来说明这个方法之前,需要先说明一下绝对伏特加的背景:绝对伏特加 (Absolut Vodka) 是产自瑞典世界十大名酒之一,它的创意设计一直走着非功能诉求的道路,主要向消费者传递感性的东西。

无穷关联法图示:

阅读全文>>

标签: 创意设计的方法 无穷关联法

评论(0) 浏览(2194)

Powered by emlog 京ICP备12006971号-1 sitemap