Seven's Pad

Just another Product Blog site

Posts Tagged ‘UI

常见UI设计模式

leave a comment »

交互设计师在设计线框图原型时,熟知常见的web设计模式很有帮助,做到“心中有数”才能创造出符合需求,用户易学易用的界面来。所谓“没有必要重复发明轮子”,模式往往容易解决常见问题,正确的模式能帮用户熟悉界面、提高效率。

常见的UI设计模式如下图:

下面分别进行具体分析,遇到不同需求的时候就可以选择合适UI设计模式。

01.主体/细节(Master/Detail)模式

主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下,引导他们在类目下高效地切换,这无疑是一种理想的方式。如果主体信息对于用户来说更重要,最好选择横向布局。或是主体部分不仅条目多而且包含信息也多,那也该选择这种横向布局。

举例来说:

Windows窗口属于纵向排布

Mac mail的横向排布

0.2分栏浏览(Column Browse)

分栏浏览也分为横向和纵向两种。用户可以通过它,选择不同的类别点进并逐步引导用户找到需要的信息。

举例:

Outlook采用逐级分栏的界面,用户可以选择进入“收件箱”——>“某封收件”——>“具体邮件内容”

0.3搜索/结果(Search/Result)

搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。

Gmail采用简单搜索

而对于google学术的用户,高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。

0.4过滤数据组(Filter Dataset)

分为横向和纵向。开始定义一些已知信息,之后通过限定条件对搜索后的结果进行再过滤。

51job用户在使用简单搜索输入所需职位后,纵向布局的左边面板提供诸如“发布时间、薪金”等条件,进一步优化信息

以京东为例,多数电子商务网站在用户初步模糊搜索后,提供进一步优化的过滤条件。上图中,京东采用的是横向排列方式

0.5表单(Forms)

表单类型众多,也是最能体现用户体验是否良好的地方。其中包含很多内容,推荐专门介绍表单的书:《Web Form Design: Filling in the Blanks》。

注册信息一般使用表单

0.6调色盘/画布(Palette/Canvas)

调色盘/画布虽然不算最常见模式,但它对于创造图形类文档有着不可替代的优势:比如设计线性或非线性图;流程图;页面布局;制定物理大小的设计/图表或控制布局。

对于设计师来说调色盘/画布这种模式并不陌生,常用软件,例如:Axure、ps都是采用这种方式。

0.7仪表盘(Dashboard)

一个设计完善的仪表盘应提供:一目了然的关键信息,实时数据,易读的图形和操作,清晰的入口和浏览。理论上讲,在一个屏幕下展示复杂的数据本身就很难。

之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘

0.8电子表格(Spreadsheet)

方便用户快速浏览,编辑大板块信息的理想模式。电子表格需要提供下列功能:标准的表格(诸如分类,隐藏/显示 栏目,重列栏目,分组(如果可以)),全局撤销/重做,增加/插入/删除排,键盘导航,导入和导出。

淘宝购物车选择使用电子表格,可以让用户对已选商品进行快速编辑(增加/减少数量,删除等)

0.9向导(Wizard)

对于复杂的或是不常见的流程,向导/快速启动屏幕模式可以有效地导航。

京东上使用wizard快速引导不熟悉流程的顾客完成付款

0.10.Q&A(Question&Answer)

Q&A模式是指用户通过选取相符条件,从而自主找到适合自己的解决方案。Q&A不同于搜索模式,它通常需要了解用户基础上,通过提问来帮助用户弄清他们缺乏经验的在哪里(比如健康保险,抵押,计划,购买)有哪些可供的选择或建议。

上海移动资费导购系统可以让用户通过回答几个问题,可以建议用户选择哪种话费套餐

0.11.平行面板(Parallel Panels)

平行面板屏幕模式可以收起(一次只显示一个),也可以展开(同时显示全部)。这种模式适合组织大量类似或相互影响的信息,让用户在同一页面更高效的获得信息。最佳应用在:需要申请者需要填写各种没有顺序的类别目录。

国外的火车票在不同情况,票价会随之浮动。The Train.com使用堆叠面板,让用户在同一页面下对不同项目进行编辑,又不会觉得混乱

0.12.交互模型(Interactive Model)

交互模型屏幕模式应用在很多交互要素需要与关键项目(比如日历、地图、图标、画布等)进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析(包括计算器),所见即所得编辑器(包括图片处理)时应用效果非常好。

Google的calendar在日历上可以直接编辑提示内容

附加:13.空白状态(Bonus. Blank State)

空白状态指在任何数据输入或进入系统前,应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括:视频,快速教程,帮助提示,安装后的截图。

Wufoo是一个在线表单设计网站,初始后会引导用户建立表单

14.其他模式

还有两种广泛使用但在企业软件很少使用的模式。

– 门户:如果你是市场调研专家,商业需求分析师或是用户反馈调研员,设计门户可以参考“仪表盘”的设计规范和案例。

– Tabs:其实Tab是一种部件,不是一种模式。它为同情境下的数据提供多选一的操作。如果数据结构导致你的设计tab显得过多。有两个小建议:第一,重新考虑信息架构。通过使用卡片分类法(card sorting)或请教一名专业的信息架构师;第二,可以参考“平行面板”的规范和案例。

转载请注明出处:http://www.zhangyq.com谢谢。
参考文献:《Designing interfaces》and 《Designing web interfaces》

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

Written by sevenpad

08/26/2010 at 6:07 下午

发表在 产品相关

Tagged with ,

20 Free Web UI Element Kits and Stencils

leave a comment »

No doubt every web designer has spent many endless hours mocking up web pages, and as such every designer should have a good set of re-usable and uniform Web UI elements that they can rely upon to save them precious time and spare headaches when they are in the initial stages of a web project.

In this article we have 20 completely free Web UI kits and stencils that are perfect for the initial mockup or wireframe stage of a web design project. Most of the kits are editable and the kits are in either .psd, .ai or .png format, but you will also find some Omnigraffle stencils and some kits in .svg format. So, whatever your preferred format you are bound to find the perfect kit for you.

Modern Web UI Set (.psd)

Modern Web UI Set (.psd)This free Web UI Set has everything included in the PSD file in well organized in folders, and fully editable using vector layers in Photoshop, from the button shapes, to the gradients, and text. Having every element editable means you can recreate anything you need that is not included in the file, just by using existing items as your base.
Modern Web UI Set (.psd) →

Massive Web UI & Button Set (.psd)

Massive Web UI & Button Set (.psd)This free UI set contains all of the following elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the psd file).
Massive Web UI & Button Set (.psd) →

Web UI Element Pack (.psd)

Web UI Element Pack (.psd)This User Interface Element Pack in PSD format, contains 19 elements including Loading Bar, Button in normal and clicked state, Button toggle, close, next, previous and paging icon and slider.
Web UI Element Pack (.psd) →

Web UI Wireframe Kit (.psd)

Web UI Wireframe Kit (.psd)This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.
Web UI Wireframe Kit (.psd) →

Browser Form Elements (.psd)

Browser Form Elements (.psd)Browser Form Elements (.psd) →

Web Page Elements (for Omnigraffle)

Web Page Elements (for Omnigraffle)With the open-source “Bitstream Vera” font set, free icons from FamFamFam and this Omnigraffle web ui set, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.
Web Page Elements (for Omnigraffle) →

Wireframe Kit (Google Drawings)

Wireframe Kit (Google Drawings)Google Drawings is still in its early and simple form and didn’t have any notable UI kits, until now. These kits have been specifically designed for Google Drawings, and you have a choice of four templates, that include: The main blank template, product detail page, landing page and item list view.
Wireframe Kit (Google Drawings) →

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.
The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats.
Sketching & Wireframing Kit →

Wireframe Symbols (.ai)

Wireframe Symbols (.ai)This download contains the symbol library and a full Adobe Illustrator file with all of the elements spread out on the art board. To install this library just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator go to your Symbols Palette and load the library.
Wireframe Symbols (.ai) →

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)The popular Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics: Ad Units, Calendars, Carousels, Charts and Tables, UI Controls, Form Elements, Grids, Menus and Buttons, Mobile, Navigation and Pagination, OS Elements, Placeholder Text, Screen Resolutions, Tabs and Windows and Containers.
Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle) →

Ext JS v3.0 Stencil (for Omnigraffle)

Ext JS v3.0 Stencil (for Omnigraffle)This is the updated version of the Omnigraffle ExtJS stencil Ext JS. This update contains many improvements and additions, namely that the developers have recreated most Ext JS elements as Graffletopia shapes or groups. This is especially helpful for resizing titles, tables cells, and so on.
Ext JS v3.0 Stencil (for Omnigraffle) →

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)This huge kit, from Liquidicity, contains 165 icons and are available in these five colors: Red, green, blue, black and white.
165 Vector Icons in 5 Colours (.ai, .jpg and .svg) →

Flex 3 Stencil (for Omnigraffle)

Flex 3 Stencil (for Omnigraffle)This Omnigraffle stencil contains all of the Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.
Flex 3 Stencil (for Omnigraffle) →

Twitter Widget Stencil (for Omnigraffle)

Twitter Widget Stencil  (for Omnigraffle)This stencil includes a selection of useful Twitter badges and widgets.
Twitter Widget Stencil (for Omnigraffle) →

Web Designer Toolkit (.psd)

Web Designer Toolkit (.psd)Web Designer Toolkit (.psd) →

Facebook GUI (.psd)

Facebook GUI (.psd)Facebook GUI (.psd) →

Facebook Applications (Omnigraffle)

Facebook Applications (Omnigraffle)
This is a pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.Facebook Applications (Omnigraffle) →

Web Elements Kit (.psd)

Web Elements Kit (.psd)
This huge set of various web elements with 17 easy to modify modules, with each module comes with four different color options.Web Elements Kit (.psd) →

Flex Darkskin UI (.psd)

Flex Darkskin UI (.psd)This beautiful and polished free Flex UI skin is available for free from psdthemes.com, but you do need to signup first.
Flex Darkskin UI (.psd) →

WEB UI Treasure Chest

WEB UI Treasure ChestWEB UI Treasure Chest →

转载:http://speckyboy.com/2010/07/21/20-free-web-ui-element-kits-and-stencils/

Written by sevenpad

07/25/2010 at 11:15 下午

发表在 产品相关

Tagged with ,

世界Web设计最新潮流

leave a comment »

19年前,世界上第一个网页诞生,它没有设计可言,由文本和url组成,样式只有最基本的<h1> <p>。 而如今,Web设计已经成长为独立而庞大的设计门类,一个网页的创造需要多个工种、多种技术的参与,其流程的复杂性和挑战性已经超过任何传统设计类别。

这19年间,网站拥有者越来越清楚自己的目标,而设计师们也越来越理性和专注,人们在不停寻求商业诉求、用户、审美和技术上的平衡点。每一年过去,都有无数过时的风格、特征元素以及实现技术被抛于身后。

设计风潮体现着一个时期内人们对特定的风格、趣味、审美、技术乃至理念等各种模型或特征的追随。新技术的发展、媒介载体的占有量的变化、新网站类型的诞生、全球的设计思潮的影响、行业领军者的转变、明星设计师个体的亮点,这些因素都在推动潮流的变化。你可以回想一下那些曾经风靡一时的模式:复古的像素样式;Google的朴素之风;韩式清新插画风;Flashsite的兴起带来的不规则布局和动画的滥用;Apple引发的对质感的追求;用户和情境意识的觉醒;对细节的关注——圆角和阴影的广泛运用;Web2.0设计风潮中典型的配色和特征元素;空间与层次感的魔术……

09年流行的半透明风格

09年流行的半透明风格

空间和层次感的魔术

空间和层次感的魔术

潮流的涌现,是社会一致化与个体差异化的碰撞,每一次碰撞都推动着这个行业的进步。

让我们来看看这些发生中的变化:

简洁,精简,极简

极简主义(Minimalism )在这一年大热。原因有4点:

1. 手持便携设备的占有量逐步上升,人们的访问方式发生了改变,小尺寸屏幕所需的精简之道反过来影响了整体的设计趋势。

2. Apple公司简洁、专注、充满诱惑力的设计哲学重领潮流,效仿者众多。

3. 来自全球设计思潮的影响:极简、禅意、人文、空间感的“日式风格”这两年在出版界、时装设计、包装设计、工业设计界都颇受追捧。

4. 网站的专业性和针对性在进一步加强,人们选择一个网站一次把一件事做好、做到极致,而非盲目扩张。这也使“精简”拥有更大的实现空间。

03jezthompson.co.uk

极简主义体现设计师对意图、受众、情境的强大控制力。不是简单的做减法就可以了,如果不能很好地把握取舍的宗旨与理由,一个为了极简效果而精简的页面可能看起来庸俗不堪,是为“做作”的留白 。

操刀这一风格需要对作品有充分的自信和理解力,更重视细节和布局,把握恰当的对比、强调。

来自版式和留白的均衡美感

来自版式和留白的均衡美感

极简主义风格非常适用于以图片为表现主体的网站

极简主义风格非常适用于以图片为表现主体的网站

极简主义的风潮中,还涌现了许多单页网站。所有内容都放在一个页面上呈现,通过分屏来巧妙地布置格局,不再有跳转和复杂的站点结构,一目了然。

更有人情味与趣味的设计

运营上的专注使得设计师们可以在设计中投入更多的感情,更有针对性地取悦受众。从保守、冷漠、功利的陈旧风貌中,涌现出更多富有生命力和趣味的产品。

Twitter取得了巨大成功,可爱的小鸟形象深入人心。以动物为主题的logo和网站吉祥物也随之风行起来。

Twitter取得了巨大成功,可爱的小鸟形象深入人心。以动物为主题的logo和网站吉祥物也随之风行起来。

这一变化出现的原因:

1. 是具有针对性的中小型服务和应用类网站大批涌现。

2. 是来自示范者的力量。

3. 是多元化的必然趋向。

4. 是在功能性、规范性和用户体验之外,设计师开始寻找那些从未出现过的、能更深层次打动用户的东西——“一种在感情上赢得人们喜爱的东西”。

亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。

亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。

曾经很不常见的高饱和度的配色,这种充满动感和生命力的高调设计让人充满惊喜。

曾经很不常见的高饱和度的配色,这种充满动感和生命力的高调设计让人充满惊喜。

精致有趣的细节

www.sourcebits.com

对传统设计的借鉴

Web设计这个年轻的分支在自我生长的同时,也在不停向传统设计汲取营养。在布局与版式方面,设计师们一直在探寻更好的表现手法,所以尝试从传统的设计媒介中寻求灵感。杂志版式布局( Magazine-style Layouts)的从2009年就开始大热,不光大型新闻网纷纷求变,杂志版式布局的Wordpress Themes 也炙手可热。 这一变化对传统设计不仅仅是形式上的追随,更重要的是尝试去借鉴与融合的态度。

Times和Financial Times都是国外老牌媒体,他们的网站布局结合传统纸媒版式有许多新潮的亮点,比如竖式的流体布局、图文混排、头条强调,由标题字号变化带来的层级差别。

Times和Financial Times都是国外老牌媒体,他们的网站布局结合传统纸媒版式有许多新潮的亮点,比如竖式的流体布局、图文混排、头条强调,由标题字号变化带来的层级差别。

而国内的此类网站绝大多数采用的还是非常传统的横向区块布局,信息密度高,版式缺乏节奏和韵律。

未标题-3

由比较可见,国外的大容量信息网站的趋势是降低首页的信息密度,把内容分摊到二级频道;版式上更具引导性、更适于阅读,浏览方式像读报一样更流畅随意。由于广告盈利价值的差别,国内这类网站还是使用信息密度极高的索引模式,所以看起来更像说一份导流量的“黄页”而非可随心阅读的媒体。在信息呈现密度与模式无法改变的情况下,照搬国外的版式布局是非常危险的。

除了在样式上的借鉴,传统版式设计上的许多经典的实现手法也移植了过来,最著名的就是黄金比例和栅格系统(Grid System)。栅格系统的历史有300多年,运用严谨的几何网格来指导和规范元件的分布排列。将传统栅格移植为适合网页设计的系统,不光是创造了一种工具,也产生了一种普遍的审美规范与倾向。无论你是选择遵循规范还是打破规范,都是对它的推动。

960px宽的网页栅格系统

17www_designinfluences_com_fluid960gs

960px宽的网页栅格系统

个体风格带来的变化

谁才代表着趋势?有人认为设计师们所追捧的变化代表了潮流,有人认为Top100的大站才是大势所趋。狡猾一点说,两个说法都不确切,网站运营的Top100并不代表设计上的Top100,出于多种原因,很可能它们是最保守的阵营。但你无法忽略它们对用户/客户的审美及视觉习惯造成的影响。而设计师们虽然愿意挑战和尝试变化,但在面对个人化设计和商业设计时,他们的取舍却往往不尽相同。

巨头和个体们在设计风格一直在互相影响和渗透。所以你永远不应该轻视那些看起来“个人化”和“小众”的创新设计。观察它们的最好舞台就是设计师的blog和profile站。

下面这几点都是从现在小众网站上流行,慢慢被许多普通大众网站设计所趋向的特征。

更大header区,更醒目的logo和标识,字号更大的标题。

内容放得再多再好,但用户记不住“你是谁?”也是白费。更大header区强化了用户对品牌和风格的记忆,让你有更多的发挥余地去表现。

内容放得再多再好,但用户记不住“你是谁?”也是白费。更大header区强化了用户对品牌和风格的记忆,让你有更多的发挥余地去表现。

在背景中使用恰当地纹理。

十几年前,在美化手法贫乏的年代,人们也喜欢在背景中使用纹理,但大多只取得了浮华嘈杂的效果。现在的设计师们学会了理性而低调的使用纹理来制造风格、提升品质和烘托气氛。

两个电商网站:左图是户外服装,使用了粗砺的水泥纹理。右图是婴幼儿用品,使用了清洁柔和的圆点纹理。

两个电商网站:左图是户外服装,使用了粗砺的水泥纹理。右图是婴幼儿用品,使用了清洁柔和的圆点纹理。

把Footer区利用起来

24Snap12

更注重品质,更能抓住用户眼睛的设计

这点变化在和消费挂钩的网站上非常明显。设计师们注重对设计心理学和视觉传达的技巧的运用,使用强调和对比的策略来引导用户的视觉焦点。更醒目的标题、高质量的图片,使用Slideshow来创造更多展现空间,这些手法都在强调那些希望得到用户关注的地方。

Apple网站的专业、直接、有效的界面设计,不光打动了消费者的心,也吸引了众多开发者的效仿,大量App应用网站都以使用Apple风格为荣。

iPhone 4 发布时的Apple.com 首页:一切无关的都被省略了,表现主体被无限强调,它牢牢抓住人们的目光,传达出最直接的诱惑:

Apple.comapple.com/iphone

  • 消费类网站的趋势:使用更醒目的标题,更大尺寸的高质量产品图片,让用户形成感官上的认识,而不仅仅是信息的罗列。
  • gateway.commikeinghamdesign.com

    高质量的商业摄影越来越多地出现在网站配图中。精心处理过的抠底图片配合简洁的整体设计,是电子商务网站近几年的趋势。

    nest-living.comstore.apple.com

  • Slideshow的使用风头正劲。用于在有限的空间内展示更多的信息(通常是为了放下更多大图片), 增加页面的动感和观赏的流畅性。

    在页面里运用可视化图表也是一个潮流,一些表单操作也被加工为可交互的图表。将信息或数据可视化,助读者更深入直观地理解其含义。

    更有效但低调的交互。

    交互在Web设计中是如此重要,为了让用户与界面更好地沟通,许多设计师过度地重视了交互,特别是只关注细节而失败于全局。大量交互行为被过度设计,变成了用户的负担。如果信息能够被更好的匹配或呈现,许多交互是可以避免的。未来,设计师们力求通过优化信息架构和使用流程去减少交互,更成熟地运用情境菜单(上下文菜单),将操作反馈处理得更为隐形和自然。

    交互的设计会向着直接有效、更低调、提升使用乐趣的方向发展。

    coda.co.za 这个网站的交互反馈,非常简洁优雅,效果自然。

    当鼠标移到某张CD上的时候,它信息会通过隐藏右边的CD显示出来。这种反馈比悬浮框更自然。

    与物理世界操作经验吻合的交互体验

    越来越多的Web操作允许快捷键的参与。允许快捷键可以提升高级用户操作效率,增加使用乐趣,同时也是为了更好的向无障碍访问的方面进步,照顾视力不好或无法鼠标的用户。

    原文链接: http://blog.xiqiao.info/2010/07/19/719

    结语:去哪里捕捉和观察趋势。

    相较于国外的这一波波风潮,国内的设计师的行动并不多,许多原因使他们面对这些变化,或保守或滞后。同时,许多生硬的抄袭和模仿也正在伤害国内的设计行业,从Templates (许多是过时且侵权的) 开工、抄捷径的“拿来主义”不光在腐蚀一个设计师的创造力,也在折损着整个行业从业者的价值。

    我希望年轻的设计师尽可能多得去关注国外的专业Blog和作品画廊站(Gallery),低头干活的同时,抬头看路。这样才能在团队中提供自己的专业判断,而不只是一个被动的“美工”。

    专业Blog:

    • www.smashingmagazine.com 可以说是如今全球内容质量最高的Web设计专业Blog。订阅量接近20万。设计师们一定不可以错过。
    • sixrevisions.com 为首的多名技术专家共同撰写的blog,提供大量对Web设计师和开发人员有用的技巧、教程和资源。还有很多前瞻性的分析文章。
    • abduzeedo.com 更新量很大,如果你设计卡壳了,这是寻找灵感的好地方.

    作品共享和灵感采集站:

    • deviantart.com 全球最大的设计师展示和分享创作的平台。其网站本身交互设计也非常有特色。
    • ffffound.com 图片类的delicious服务,一个你永远不可能拿到注册码的社区,但是其中活跃着大量全球一流的设计师和创作。

    Web设计画廊(Gallery)

    designshack.co.uk (可按配色、布局和类型进行筛选)

    reeoo.com (可按配色进行筛选)

    siteinspire.net (可按样式、主题、网站类型进行筛选和排序)

    coolhomepages.com (可按类型进行筛选和排序)

    不写代码——Programmers(16)

  • (本文来自《程序员》杂志10年07期,更多精彩内容敬请关注07期杂志)

    《程序员》7月刊精彩内容预告:http://www.programmer.com.cn/3484/

    Written by sevenpad

    07/21/2010 at 4:45 下午

    发表在 产品相关

    Tagged with , ,

    移动设备的用户界面UI之表单设计

    leave a comment »

    移动设备的表单设计相比桌面受到很多限制:屏幕小、网络慢、输入困难等。因此在设计移动应用和网站时,应尽量减少表单的数量。同时如果某些地方确需要用户输入,应多尝试让他们通过点击选择,比如多选项、复选框、选择菜单、列表等,替代易用性差的文本框。

    限制往往能带来创新,移动表单也不例外。移动设备的局限促使开发人员和设计师寻找更好的方式提供快捷和易用的输入方式。这些领域的创新反过又被应用于桌面互联网,和更广泛的领域。

    下面我们来看一些成功的创新:

    1. 放大输入框

    问题:鉴于移动设备的屏幕过小,用户很难看清并及时纠正输入过程中的错误

    解决:当用户选中表单的输入框后,系统将表单的输入框放大至整个屏幕,方便用户看清输入的内容

    放大输入框时请注意将各输入框的标签顶对齐,标签应尽量简短。例:Google的注册表单采用了标签左对齐,放大输入框后,我们只看到输入框,标签被隐藏。

    2. 隐藏密码

    很多表单涉及到输入密码,为防止其他人偷窥,表单设计通常自动把输入的密码变为*号。这个设计表面上确保了安全,却带来可用性问题:输入密码时如果你的视线不小心移开了一下,就得重新输入。

    Iphone的设计:当你输入密码时,并不立即变为*号,而是停留1、2秒之后,让你可以看到输入的内容。

    btw:关于这个被广泛采用的设计,可用性大师Nielsen 似乎不以为然,大师说:

    提供及时反馈和当前状态指示是基本的可用性准则,隐藏密码的设计导致用户更容易犯错误

    3. 弹出菜单控件

    下拉框是比较难用的输入类型之一,首先你得点击菜单打开它——通过长长的列表找到目标——移动光标到目标上——点击它。

    Web上的解决方案是:当你浏览下拉框里的列表项时,光标一直跟随,光标离开时,下拉框关闭。即使有经验的互联网用户,也常常会丢失目标,重新来一次。对移动设备的交互来说,这更是个挑战,我们需要寻找新的方式。

    看看Iphone的设计:用户点击菜单后,屏幕下方出现列表,你可以通过触摸操作中的拖拽、轻弹、推,控制滚动列表的速度,找到目标,为方便点击,目标也被设计地很大。

    4. 复合菜单

    弹出菜单控件同样可以应用到复合菜单。比如选择年、月、日时,我们可以把3个下拉菜单合并在一个区域完成。

    Google的Android系统也使用了复合菜单,不同于Iphone的基于触摸,它使用了可见的界面元素,通过“+”“-”定位。

    5. 内置输入控件

    除了复合菜单,各种操作系统还为开发者提供了其他定制的输入控件,滑块、评分、对合按钮都可以让用户更容易地输入。

    6. 旋转界面

    现实生活中,人们使用手机时,可以竖向,也可以横向,移动表单也可以根据屏幕空间的不同调整。Google的Android操作系统发邮件功能正是这样设计:

    竖向时,屏幕显示3个输入框,和一些动作按钮。横向时,email的输入框被放大,屏幕只留下右侧的一个按钮,最大限度地利用了空间。

    7. 语音输入

    Google推出的Nexus one手机更先进,它允许用户在任何地方使用语音输入,用户可以通过内置的虚拟键盘切换输入模式,彻底解决了手持设备的输入难题。

    鸟人网http://zdd.me/prmex

    Written by sevenpad

    06/09/2010 at 1:14 上午

    发表在 产品相关

    Tagged with , , ,

    产品设计—浅析iPhone用户界面UI设计精粹

    leave a comment »

    作为一款革命性产品,iPhone(这里泛指iPhone和iPod touch,当然还有iPad)为我们带来了许多意想不到的创意和惊喜。过去两个月多的时间里,我们认真地咀嚼《iPhone Human Interface Guidelines》,感悟字里行间透露着的苹果的细致与智慧。兴奋、激动之余,有太多的惊喜想与大家分享。但无论从时间上还是精力上,130页的完整套餐肯定会让所有的人吃不消。我们收集了iPhone平台的专业设计师的意见,加上翻译过程的一点体会,整理出11条设计精粹。最后,希望这份130页浓缩而成的快餐不会让您觉得难吃,enjoy yourself!

    1. 了解应用类型及各自特点

    iPhone平台有三类型的应用:

    ● 效率型应用(Productivity Applications)

    ● 实用工具(Utility Applications)

    ● 沉浸型应用(Immersive Applications)

    每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点,选择合适的应用类型可以更好地迎对。

    效率型应用用于帮助完成日常的一些工作,如收发邮件、即时通信、照片管理与分享。用户快速查看、跳转、执行、完成,连贯的动作要求界面简单直接,让用户可以全神贯注于任务本身。这类应用一般都附带自然的层级结构。所以,表格视图(table view)可以在这类软件里大派用场。

    图1.1 附带层级结构的效率型应用

    实用工具用于执行一项简单的任务(如计算器,天气报告),简单,容易配置就可以了。

    图1.2 实用工具之“天气报告”和“深度睡眠”

    沉浸型应用可以为用户带来极致的娱乐和游戏体验,这类应用可以进一步细分为游戏和虚拟仿真类。这类应用和标准的系统界面不同,用户希望这类应用能够给他们带来最大的娱乐,因此,界面设计的自由发挥度比较高,仿真的、可爱的设计风格往往能恰到好处。

    图1.3 沉浸型应用

    2. 熟悉系统布局和控件特点

    iPhone 操作系统提供了非常出色的UI库,这些标准的控件和视图都得到了大量的研究才得以真正派上用场。另一方面,iPhone 用户已经对这些软件非常熟悉,不管是出于什么理由,如果没有更好更实用的创意,我们应该遵循iPhone的控件规范。至少,在我们打破iPhone的规则之前,“You must understand the rules before you can break them.”(你必须了解规则然后才能打破他们)。

    iPhone 提供的UI组件从大到小,大致可列举如下(具体每种控件和视图的细节,请参考《iPhone 用户界面设计指南》第二部分):

    ● 导航条,标签条,工具条和状态条

    ● 弹出对话框、操作面板和模式视图

    ● 表格视图(Table Views), 文本视图(Text Views), web视图(Web Views)

    ● 应用程序控件(如文本框、分页显示器、轮转选择器、进度条、更多按钮等)

    3.  使用隐喻

    隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。

    iPhone内置的备忘录应用就是一个使用隐喻的典范。除了基本的删除和邮件这些图标隐喻,整个产品的外形:棕色的头部导航,米黄色的纸质背景,配合细致的行隔线和垂直的双细线,俨然就是一可爱的小小备忘本。将产品与实体对应起来,用户一看就知道软件的用途。

    iPhone操作系统的隐喻不胜枚举,我们尚可尽量遵循,但如果有“更合适更贴切”的隐喻,你也可以放胆一试。

    4.  一目了然,即看即点

    用户在移动场景下不会长时间对着手机屏幕,他们可能“迅速打开音乐播放器随便播放一首就跳去其他应用程序或继续其他的事情”,不要以为用户有时间去研究怎样使用你的应用程序,这种注意力相对分散的情景要求你的应用程序界面必须尽量简洁,一目了然,用户看到就能马上理解。一般有三种方式可以简化界面:

    ● 删减软件功能:功能越少,界面越简洁。移动产品的设计,减法远比加法来得重要。请牢记移动产品设计里最重要的金科玉律: 为移动场景下的大多数用户设计最常用的少数几个功能特点(Pick the few features,most frequently used,by the majority of your users,most appropriate for the mobile context)。

    ● 减少输入:尽可能地减少输入,直接为用户提供选项。如索引列表,既方便用户记忆,也可以帮助用户快速扫描并直接选中;轮转选择器,划上划下即可选中,减少打字耗时的同时省去繁多的错误检测。

    ● 避免不必要的交互:用户也不是你想像中那么傻的,不要一味提醒他们如何操作(帮助越多说明你的软件越难用),设计时应该关注如何更有效地引导用户集中精力快速完成任务。

    内置的短信发送实在是太经典了,写信人和收信人左右区分,信息内容通过时间顺序排列下来,整个信息来回历史一目了然。呼叫程序同样出色,重新设计的数字键盘弱化了字母排列,突出数字,由此换来宽大容易点击的屏幕空间。

    图4.1 一目了然的短信历史查看和拨号呼叫

    5. 考虑屏幕上下

    不论单手操作还是两只手配合操作,屏幕上部分的可见性是最好的。所以,在设计应用程序时,应该将最常使用的的信息——一般是高度概括的信息,如导航,或者一些常规操作如添加、完成、保存、取消——置于屏幕顶端。

    屏幕的底部一般是辅助性的工具栏或切换视图使用的页签栏。一些影响较大的操作如果出现在屏幕下半区域,必须仔细考虑它们的排列设计。如图5.1,一般情况下,操作面板的取消按钮放在最后,这样可以鼓励用户阅读完所有的选项,暗蓝色的返回按钮可以和一般的按钮区分开来,即便用户没阅读完也知道这是返回按钮。对于一些影响较大的操作(如删除),将其放在面板的顶部是最好的,因为顶部更容易被看到,再加上红色的警告暗示,用户选择起来会更为慎重。

    图5.1 操作面板上的按钮排列

    6. 提供指尖大小的点击区域

    如果按键布局过于拥挤,用户就要小心翼翼地花更多时间去操作,错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素,让用户更快更容易点击。

    旧版内置计算器的按键是大号的,有效区域都为44*44px,非常容易点击。新版的计算器为了容下更多的按钮,按键大小做了一些调整,虽然高度上略有减小,但用户点击起来还算容易。对于经常使用的“=”号,整个目标区域都加大了,这种样式上的区分可以将主要操作和次要操作区分开来,以便更好地引导用户。

    横屏的计算器完整模式可以容下更多的按键,按键大小相对竖屏的要小,尽管如此,用户点击起来还是得心应手。

    图6.1 适合手指点击的计算器按键

    7.  灵活运用手势支持

    去到哪里,手指就跟到哪里,多种动作随时变换,直接感知与设备交互,如此自然直接的“输入”,如果能够灵活合适地运用,除了可以带来良好的用户体验,还能极大满足用户的控制欲望。

    图7.1 手势操作:滚屏、长按、拖动、捏

    当然,手指的一个最重要问题在于它比鼠标指针大得多,灵敏度和精确度会有所欠缺。一些同时使用鼠标和键盘的操作(如复制、粘贴、选择文字)是手指很难完成的。设计上应该考虑由此带来的影响,避免滥用。如果你的应用支持比较复杂的手势(长按、捏),确保用户能够理解他们的含义,并且为这些手势操作提供直接的响应反馈。

    8.  考虑横竖屏方向变化

    iPhone游戏里出现横竖屏设计比较正常,都是视具体的游戏类型来分。但一般的效率型应用或实用工具,也是横竖屏都有。林子大了,什么鸟都有,有些用户就是喜欢经常将屏幕旋转过来,而且还不在少数。他们或是喜欢横屏的浏览方式(如备忘录、音乐),或是希望打横可以看到更多的信息(如计算器)。设计的时候必须充分考虑用户的期望。有时将界面内容旋转就可以简单满足他们的需求,但有时也需要你重新去设计以展示更多的内容(如横屏的音乐会出现一个新的界面,展示所有的歌曲)。

    图8.1 iPhoneQQ 横屏输入

    竖屏情况下,输入键盘宽度只有320px,平均每个按键宽只有32px(320/10,这里忽略键与键的间隔);横屏时每个按键宽可以达到48px,多了整整16px。如果是在小屏幕上输入,你更倾向那种方式?

    如果你的应用程序界面只支持单一方向的展示,最好的做法就是保持界面固定,不随着设备方向改变而改变。例如,当用户选择去看一个iPod视频时,不管屏幕打横打竖,这段视频都是横向展示的。有了这个暗示,用户就会很自然地旋转屏幕到水平横向观看。翻转按钮也没有存在的必要了。

    9. 合理的反馈

    纵观所有的内置应用,反馈可谓无处不在。由于大部分的操作都是通过手势(其实还有抖动、语音输入方式)完成的,通过一些明显的变化来响应用户做出的操作,能够给予用户极大的信心。

    图9.1 iPhone版 QQ斗地主的音量大小调整

    进入QQ斗地主的游戏设置页面调整音量大小时,手指的大小盖住了滑块,为了将选中的信息反馈给用户,两边的扩音器图标同时使用了外发光样式。

    iPhone 操作系统提供了许多自动反馈的机制。动画就是其中一种。不过切记一点,动画的目的在于提升用户体验,而不是成为盲目追求酷炫的焦点。

    10. 优化启动过程

    iPhone OS4.0以前的应用都属于单任务的,用户会经常在多个应用程序之间切换,一个电话来了,用户不得不退出正在进行的应用程序。要确保用户回来时启动足够快速,以减少用户的等待,而且,为了将影响降到最低,应尽可能保存上次关闭之前的操作结果。这似乎都是工程师的职责,但作为一个优秀的设计师,你还可以为此做很多的事情。

    开启时第一屏显示一个背景图或者简短的loading动画。即使是普通的效率型应用或者简单的实用小工具,启动时如果能够预先显示一个背景图,背景图与程序启动后首界面平稳自然地过渡,这种方式既可以带给用户即时的反馈,也可以“缩短”用户等待的时间。

    图 10.1 启动时的预加载背景

    运行天气应用和iPhone QQ时,即使是很短的启动时间,预加载背景还是能够让人感觉启动等待的时间缩短了。

    虽然iPhone OS4.0开始支持多任务,但不要天真地以为这种背景预加载的细节可以忽视了,应用程序应该一如既往地为用户提供这种流畅的体验,毕竟,用户启动的时候还是期望软件可以“快一点”。

    启动时要切记一点:不要弹出一个说明性窗口,或一个刺眼的闪屏,或其它类似的启动体验(网络wifi提示这些是例外)。这种方式很突兀,让用户立即使用你的应用程序就好了。

    11. 为应用程序设计图标

    应用程序图标是指放在iPhone屏幕上用来启动程序的图标。iPhone的屏幕大小只有480*320px,在这狭小的屏幕里,用户希望放下尽可能多的图标,这些图标必须具有突出的视觉效果才能方便用户辨认。要做到这一点,可以从以下两方面着手:

    ● 美观:确保图标简单美观,富有吸引力,这样用户才愿意让这些图标长久占据有限的屏幕空间。

    ● 可识别特点:要让用户在大量图标中轻松找到该应用程序,图标必须要有自己的特点,对于关联的产品,可以结合品牌进行设计。

    图11.1 “企鹅”图标,一看就知道是QQ产品

    为了与内置图标保持协调一致,iPhone操作系统一般会自动给图标增加一些视觉效果:

    ● 圆角

    ● 阴影效果

    ● 反光效果

    图11.2 未添加视觉效果的的普通图标

    图11.3 iPhone操作系统自动添加效果后的图标

    为了确保你的图标可以利用这些视觉效果,你应该遵照以下图标设计规范:

    ● 图片格式:PNG

    ● 大小:57X57像素,90°直角(如果图像不符合标准,iPhone系统将自动按比例调整)

    ● 不要有任何发亮或有光泽的部分

    ● 不使用alpha透明

    最后,将图标文件命名为Icon.png,放在程序的资源包中即可。

    注:需要的话,可以要求iPhone操作系统不添加反光效果,详情请阅读《iPhone 应用程序设计指南》。

    (本文出自Tencent,转载时请注明出处)

    Written by sevenpad

    06/09/2010 at 1:10 上午

    发表在 产品相关

    Tagged with , , , ,