交互设计及用户体验

15个读取进度条的优秀设计案例

蓝蓝

读取进度条设计的好坏直接影响着App界面设计的用户体验,因为它可以合理的疏导用户等待的焦虑情绪,通过一种有趣的美学体现程序运行的进度,这样用户就能稍微安心。

在本文中,蓝蓝设计收集了一些美妙的手机App界面设计进度条设计案例,具有不同的风格和特性。下面我们来一起欣赏吧:)一定可以帮住大家提高ui设计服务能力的,让您在ui设计公司立稳脚步,处于不败之地。

iOS7 design practice by Muhammad Farhan 纯净的感觉,采用了Flat风格的设计,使用了平化的图像,精巧的色调,纤细的字体。硕大的圆环轨道条占据了整个界面的中央,让数据看起来非常的卓越不凡。

ios7-design-practice-by-Muhammad-Farhan

的创意进度条设计

蓝蓝

以前的进度条设计以拟物化为主,现在扁平化风格流行,连进度条也改变咯。这是许多款蓝蓝设计收集的进度条设计,很多是Dribble上的作品,应潮流而生,想瞧瞧扁平化风格的进度条是怎样的,就来看看吧。一定可以帮住大家提高ui设计服务能力的,让您在ui设计公司立稳脚步,处于不败之地。
如果你对拟物化的创意进度条更加有兴趣,那么来这里瞧瞧《15个读取进度条的优秀设计案例》

Progress by yasir wadood

Progress by yasir wadood in 40 Progress Bar Designs for Inspiration

Circular progress bar by Alexandr Ivanov

Circular progress bar by Alexandr Ivanov in 40 Progress Bar Designs for Inspiration

优秀手机应用设计需要遵循的8大原则

蓝蓝

蓝蓝设计产品设计的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机界面设计软件界面设计iPad界面设计软件后台管理界面设计的相关8原则:

原则1:用户界面应该是基于用户的心里模型,而不是基于工程实现模型

就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点,用户的心理模型抓的越准,界面就会越优秀。

原则2:培养用户使用情景的思维方式做设计

要做到这个原则其实是很难的,需要长期的实战经验才能做到这点。
那我们都知道米聊出的比微信早,但后来被微信反超,个人认为不光是QQ帮了微信很大忙,比如用户登录门槛低,用户来源,广告打得响之类的,其实在用户使用情景方面米聊研究的没有微信透彻。

对于一个社交即时通讯产品,添加好友的功能是好友汇聚的来源,虽然米聊微信都绑定手机通讯录,但话又说回来,用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友,找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置,在产品前期就会让用户明显的去选择用哪个应用,因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来,看看下面的对比:

35款新鲜、免费的优质扁平化UI素材

蓝蓝

蓝蓝设计继续关注鲜好用的UI设计素材,并且分享给童鞋们,希望这些优质免费的UI素材,可以帮住大家提高ui设计服务能力的,让您在ui设计公司立稳脚步,处于不败之地。有的WIN 8 以及 IOS 7 UI素材,欢迎童鞋们打包下载,分享到评论。蓝蓝设计 深深感谢  : )

touch50px UI Kit

touch50px UI Kit by Angelo in 35 Fresh, Free and Flat UI Kits

值得学习研究!纯CSS3编写的面包屑导航收集

蓝蓝

蓝蓝设计 :随着Web技术越来越先进,浏览器更新换代也很快,在国内很多网站已经有使用css3和html5的技术了,所以我们也应该多学习这些新知识,设计达人网站整理的资料,你在学校、图书上也是未必能看到的。

今天我们整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用。有些文章附有教程,大家可以学习研究一下。

漂亮面包屑导航

css3-breadcrumb-1

扁平化面包屑导航

12个为iOS应用设计提供灵感的好网站

蓝蓝

专注于分享UI界面的细节,按照设计元素进行分类:

注意:有些网站需要翻墙:(

http://pttrns.com/

app1

http://www.patternsofdesign.co.uk/

app2

2012年度最佳UI动画

蓝蓝

damndigital_beautifulpixels-best-of-2012-ui-animations_2013-01

作为一款足够吸引人的app,惊艳的UI和优秀的功能是基本条件,但若有独特的动画与转场效果,则可以大大的增加用户使用的粘性,称霸整个应用平台。具备了良好体验效果的同时,有这样一个意料之外的效果,不但会给用户带来惊喜,更会让人情不自禁的爱上它。

2012年我们看到有不断的热门app得到细化,而一些大公司也最终意识到良好的UI对于一个app的重要性。在过去的一年里,Android应用程序已经得到了很大的改善,iOS则把设计范围越推越广。这里是一些beautifulpixels.com认为在2012年中一些脱颖而出的UI动画。虽然视频演示提供了大致的预览,但相信如果你在手机中亲自体验更能发现它们的魅力之处。

 

Google+ Animation

当Google+开始公测时,每个人都想第一个尝鲜。然而,在Android系统和其他移动应用平台上因缺少一个良好的app,而使得很多人因此望而却步。Google努力优化他们在iOS平台推出的游戏,值得一提的是它们最近发布的app也让人眼前一亮。

而这款Google+iOS应用程序也颠覆了以往的设计,或许会让你爱不释手。其中有很多独特的动画设计,比如,下拉刷新(pull to refresh)。当用户下拉时,会出现4个不同颜色的彩带从左至右,有节奏的从暗变亮,并拉长。同样有趣的是,当你滚动到底部时,载入的新内容同样会出现。从这样的小细节中,我们看到Google的确在app的设计上注入了很多精力。就为了它的动画,你就值得在iOS系统的设备上下载Google+这个程序!

追寻点击愉悦感:提升网站平板体验的6个技巧

蓝蓝

提升网站平板体验的6个技巧

Queen译者注:随着平板电脑市场的迅猛增长,你可曾考虑到网站在平板上的用户体验?本文给出了6个提升网站平板体验的简易技巧,让你花小气力,出大成果,可谓事半功倍。要不你试试看。
原文链接:the-pursuit-of-tappiness

在这篇文章发布时,仅在美国就有近7000万的平板电脑用户,这比前一年的数据增加了一倍。这意味着,美国近30%的互联网用户使用平板设备上网浏览。2011年到2012年间,电子商务网站在平板电脑上的交易量增长了348%,第一次超越智能手机的交易量。由于平板市场很年轻,其未来的发展空间必定很大。
这一趋势传递了一个强烈的信号:如果你的网站还没有针对平板电脑进行设计的话,现在是时候优先考虑其在平板电脑上的可用性了。否则,忽略这一点可能会对网站的整体转化率,回访量,销售量等带来负面影响。

什么是”点击愉悦感”(tappiness)?

当一个网站具有”点击愉悦感”时,用户在手机或平板设备进行访问的操作将变得容易而愉快。点击愉悦感包括巧妙使用的空间,易于阅读的文本,符合逻辑的交互线索,和大尺寸的点击目标,这些让访问者浏览网站时充满信心。

1359424540_87

本设计中,大字体和大点击目标的体验很好,即使在平板电脑上缩小后,体验依然不错。
而在另一些设计中,文字太小无法阅读,链接太接近容易误操作,无形中增加了操作时间、复杂度以及体验上的挫败感。糟糕的体验下,用户将快速流失。

1359424551_62

本设计中的小字体和小触摸目标被证明在平板电脑上难以阅读和使用。
一种理想选择可能是:重新设计你的网站,让它能针对各种不同设备进行自适应布局,但时间和成本可能会使你无法完成这样的全面翻新。然而你还有其他选择。本文给出一些技巧和方法,能快速帮助你提升网站的平板用户体验,只需几个简单的变化,你今天就可以做到!

让用户更地完成表单填写

蓝蓝

填写互联网表单几乎是每个用户每天的经历,如用户进行网站注册和登录、购物等,都需要填写各种表单。用户为了获得想要的东西,表单成了用户完成需求和网站系统需要数据之间的互动形式。那么表单设计的首要目标也更清晰:让用户迅速快捷并且轻松地完成填写。

设计目标已清晰,那么如何设计表单呢,以下从表单的内容、组织方式、流程、表单元素控件及交互等方面详细阐述。
表单的元素

研究如何提高表格可用性之前,我们先简要了解下一般表单的元素,这里我们暂且这么总结:

标签:告诉用户表单问题是什么?
输入框:供给用户填写答案信息;
动作:用户提交表单,即用户点击一个按钮或链接,执行一个操作;
帮助文字:为如何填写表单提供帮助;
输入反馈:针对用户输入给出反馈,输入正确还是错误;

用户如何看待验证码广告

蓝蓝

内容导读

从本篇文章中,你将获知什么?

  1. 国内外验证码广告介绍
  2. 验证码广告用户体验的重要性
  3. 验证码广告用户体验数据
  4. 上线5个月,验证码广告的表现如何?
  5. 验证码广告的多样形式

 

正文

12年7月,验证码广告作为百度联盟新的广告产品华丽上线。什么是验证码广告?顾名思义,就是在输入验证码的环节插入广告。怎么插入?像这样,扩展验证码区域,嵌入一张广告,提取广告内容,让它变成需要用户输入的验证信息。

这是传统验证码:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档