交互式UI设计指南

标签: 交互设计 UI设计指南 | 发表时间:2013-05-10 09:12 | 作者:dream
出处:http://www.boxui.com

UI Guidelines For Responsive Design

Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。

很多交互式设计学习资料都谈到了基础的方面,比如利用桌面的多余空间,使手机上的显示更简单。然而,很多东西没有超出这些基础知识。随着各种尺寸屏幕的出现,我们需要进一步思考设计和用户体验这些方面。

1. 桌面

大多数用户体验原则都是有关桌面网站的。市面上用户多使用键盘,触摸板,鼠标,这使我们有更多的设计可能性来坚持优质的用户体验。然而,我们仍然要坚持一些指导原则,交互式设计方案就能够保证我们的设计在不同的屏幕尺寸之间完美切换。

Smashing Magazine

需要考虑的几点

桌面设计有以下几点考虑:

• 延展式网格设计,这种设计能够让用户轻松找到感兴趣的内容 • 水平式导航,子菜单,大下拉菜单来轻松过滤内容 • 交互式和延展式页面更适合桌面式网站 • 为广告,侧边内容,额外介绍,电话应答留下足够空间 • 导航条可以用来引导用户点击,但在小屏幕上不适合用 • 掌握了解新的技术,包括那些能够影响设计和用户体验的 • 宽的页脚,页边等等

网站应该利用桌面强大的可扩展性来给用户提供更多选择。在用户使用过了手机或者平板应用之后,他应该被引导去使用桌面版应用,这样才能获得更多的功能和更完善的用户体验。

从用户体验角度来说,一定要确认桌面设计是弹性化的,可以在不同屏幕尺寸大小之间无缝切换,并同样拥有键盘等传统桌面操作功能。上网本虽然没有以前那么流行,但是同样需要考虑其体验,它同传统电脑比只是尺寸上小了一点。

2. 平板

平板电脑越来越流行,而且平板电脑很可能不是一个瞬间即逝的流星,它将作为一个新的网络交互的发展趋势长时间发展下去。所以在做平板的用户体验时我们一定不要把它的设计理解为”第二名”的桌面设计。它的设计完全可以独立于桌面设计,我们应该独立寻求新的用户体验交互方式。 Dribblr

平板电脑的最大特性就是触摸性。这要求我们用新的方式去开发新的用户体验。然而目前很多用户仍停留在基本的上网、点击上面。所以我们有责任去开发越来越多的触摸式用户体验。

需要考虑的几点:

在平板开发时我们一定偏像 app 意识的开发、设计,尽量不去贴近桌面设计:

• 更大的触摸空间,尤其是导航键。能用一只手指头操作,这在平板开发中太重要了。

• 标签栏、折叠式菜单在触屏式设计中尤为重要。因为这样能够节省大量空间。而且不要只是仅仅把它们用在侧边栏上,而是把它们融合到整个网站上。 • 千万不要认为平板设计只是把桌面网站设计整体缩小简化,否则你将会失去很多实用性。 • 用按钮或者按钮类设计来完成简单操作,比如链接。 • 不要认为所以用户跟你用同样牌子的平板,甚至要考虑作出后退前进的按钮来。 • 设计应该针对视网膜显示进行优化,虽然目前只有iPod拥有视网膜显示,但是我们不得不承认大多人还是在用iPod的。

3. 手机,移动端

节省空间不得不说是最重要的。在开发时同时要永远记得,可能一个桌面用户更倾向于网站的功能性,交互性,然后一个移动用户更多的只是为了看到内容,做一些简单操作,但一定要快。

Substrakt

需要考虑的几点:

除了大的触摸屏按钮设计需要考虑外,移动手机端开发应注意以下几点:

• 使用最简单的交互方式,尽量减少额外的功能性。让用户集中在最重要的操作上。 • 对于内容很多的网站,尽量将过滤器做的友好,用户不喜欢在屏幕上敲字,最好能够让他们直接选择一些分类类别。 • 尽量用最少的设计展示自己的网站,别占用太多功能性区域。 • 大点的字体和更好的类型显示。尽量不要让用户放大放大再放大! • 在一些大块内容前加摘要,从而方面他们删选内容。

• 标签,伸展式菜单,导航永远都很重要! • 尽量不用弹出框,通知,广告,如果有请尽量做得友好。 • 如果可能,尽量保重移动端网站上一直保持最少数目的页面。当然这个不是在所有的网站上都通用,但是如果考虑到,最好用javascript开切换内容,避免过长内容。

Starbucks Earth Hour Regent College Mike Scopino Sony Made By Splended Food Sense Warface Sasquatch Festival

4. 结论

平板和手机用户预计将在2015年超过桌面用户。考虑到这点,我们不仅仅需要学会交互式设计。我们更要对三种不同平台的设计拥有不同的设计理念,但同时也要保持不同平台间的一致性。我要记住图片显示要友好,触摸方式也要有好,内容显示要合理。当然,最大的问题就是解决不同屏幕尺寸之间怎么组织和显示网站内容。

相关 [ui 设计] 推荐:

从Web借鉴UI设计

- - 博客园_首页
  用户体验已经成为衡量应用软件质量的重要标准. 在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限正在被逐渐模糊. 虽然技术已经焕然一新,但很多开发人员并不是专业的信息架构师,可能还在使用传统的、平凡的UI设计风格.

UI 设计六要素

- - 人人都是产品经理
UI是User Interface(用户界面)的缩写,我们常常把用户体验挂在嘴边,而UI就是提升用户体验的秘密武器. 友好的用户界面,可以实现用户 与网站或者软件之间更好的交互,让软件的操作变得更加舒适、更加人性化. 可以毫不夸张的说,UI决定了互联网创业的成败. 那么,要如何才能针对自己的实际 情况设计出好的UI呢.

UI精品:网站各种表单UI设计PSD

- - 软矿
网站经常需要用到注册表单、登陆表单、找回密码表单、发邮件表单、订阅表单等. 这些表单看似简单,但一个优秀的网站,这些表单的设计也需要下很多的功夫. 小编最近收集到一套比较完整的网站表单UI设计PSD素材,基本涵盖了网站所需要的表单. 如果你正愁不知道怎么安排你的网站设计项目的表单,这PSD素材或许能给你带些灵感.

40个UI设计工具和资源

- Shell Wang - 译言-电脑/网络/数码科技
来源40 UI Design Tools and Resources - Noupe Design Blog.       用户界面设计在持续的基础上不断成长和演变. 要跟上时代,你需要关注趋势、新资源和正被实施和谈论的新技术. 同时,你也要亲身尝试,并提出原创的见解和应用.       下面列举的这些工具能帮你做到这些.

谈谈Android的一些UI设计

- plidezus - 盒子UI
谈到应用程序设计,对设计师来说,Android就像是房间里的大象. 很多设计师会更希望这是iOS,在那里所有任何人都只需要关心iPhone手机,iPad和App Store. 然后没有人可以忽略Android,它目前已占据智能手机中最大的市场份额,且已经被广泛用于从平板电脑到电子阅读器等各种产品. 总之,谷歌的Android平台正在迅速遍地开花,品牌厂商们很难不注意到.

178个免费的UI 图标设计

- - 紫萝卜 | 所有与设计有关
UI设计教程:界面图标创意设计. 45套网页UI PSD源文件免费下载. 45套网页UI PSD源文件免费下载. 100+高质量的UI设计源文件下载.

详解Path 2.0的UI设计

- - 互联网的那点事
如Path的创始人Dave Morin所说, Path的第二个阶段是要让人们在人生道路上“抓住所有体验”(capture all the experiences). 这款目前的私密社交应用王者,在半年前对于UI系统的重新设计可谓是惊煞旁人. 其人性化的设计理念与简洁到极点的设计风格可以说是一本教科书,以至于虽然吸引了大批模仿者但是——在这一派风格中——始终无出其右者.

五十个UI设计资源网站

- - 畅之部落格
UCD大社区  http://ucdchina.com/. 腾讯WSD  http://wsd.tencent.com/. 腾讯CDC  http://cdc.tencent.com/. 腾讯ISD  http://isd.tencent.com/. 淘宝UED  http://ued.taobao.com/.

UI设计:界面微质感探究

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  GUI的历史一直都离不开隐喻,而这种设计手段的优劣已经有越来越多的辩论. 那么时至今日,这种设计方法是否已经过时?我们是否有更好的方式. 这些疑惑不禁引发了笔者的思考,因此也就有了下文.   隐喻作为一个主流的设计方式广泛运用在界面设计中,它的历史可以追溯到GUI的创造,经典的例子便是桌面、文件夹、垃圾桶… 这些老生常谈概念.