BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

设计模式

关于汉堡包图标的闲言碎语 »

想起来貌似真的有几天没有开空调了,夏天真的过去了吗?回头看看觉得恍恍惚惚的,好像过去两个多月只发生了一件事,就是从早到晚的照顾喵以及替喵揪心。眼看着秋天快来了,希望什么事情都能好好的好起来。

前面在微信里有朋友问到美工和设计师的区别在哪里。不很常见的一类问题...记得2006年刚刚入行在博客大巴做网页设计师时还专门叮嘱别人不要叫我设计师,还是美工更好。而现在无论听到别人这样称呼自己还是其他同行,都会蛮气愤的吧。为什么这样呢,大约当年确实觉得自己不够“设计师”的头衔,毕竟不是专业出身,又刚刚入行;而如今大概入了门。说回美工这个话题,我个人觉得应该特指各行各业当中负责对既有结构、内容进行美化工作,而无需考虑结构与内容本身以及业务需求和框架的人。吧?

最近越来越多的看到关于汉堡包图标的议论文章,工作当中也觉得这方面的讨论多了起来;有些观点还是值得参考借鉴的。今天就是这样一篇,也许接下来会做个小系列?不知道,这里进入译文先。

如今,汉堡包图标已经是很常见的移动导航设计模式了;它的三道杠形式非常简单,包括迪士尼、星巴克、Facebook、Google等知名公司都在自己的移动应用及移动版网站当中使用了这一模式。

不过在UX设计圈子当中,关于“汉堡包菜单图标属于反直觉模式”的质疑声也此起彼伏。一些替代方式开始出现,三道杠图标有逐渐被更符合直觉的设计方案所取代的趋势。

重新思考移动应用的新手教学模式 »

周六晚间了,似乎还能听到外面滴滴答答的声音;从夜里开始几乎下了一整天的雨吧?

本想在这里详细记录一下今天带斑斑检查身体的事,想想算了;每次自己在过去的博文中看到关于推推的那些记录,心里仍然会难受。倒是要在此再感谢一下在微信里发来关心的朋友们。

话说上周买了瓶葡萄酒留着平时喝两口;不想再依靠威士忌那样久而久之容易伤身的东西了;却发现自己也真是没什么欲望了;倒是每次和同事朋友聚会喝喝清酒觉得越发的舒服。一口口灌烈酒的阶段(再次)过去了,真不是坏事;反正总还会来的,恩?

今天的译文来自Theresa Neil,也就是《移动应用UI设计模式》(O'Reilly大公鸡)一书的作者;本文所讨论的话题也是从这本书延展出来的:作者在实战中运用自己书中归纳出的设计模式,遇到问题,继而开始重新思考...接下来进入译文。

对于设计师来说,设计模式库是很棒的灵感来源,不过常见的实践方式未必是最好的。本文中,我们将一起看一看为什么很多移动应用的新手教学模式并非那么有效,以及我们可以从游戏设计当中汲取到哪些理念来帮助我们选择更加有效的设计模式。

关于移动应用的新手引导设计 »

大晴天真是稀有,赶快写下来;一次一次记录阴郁风雨的天气简直让我烦透了。

终于进入三月,双鱼的同胞们开始此起彼伏的过起生日来,莫名的有种喜感。那,祝双鱼们开心,每日有快乐,天天出太阳。明天就进入last week了(有这说法么?),想想去年这阵子也是工作方面的动作,每天自己窝在家里除了看书就是看书,爽翻;然则今年还要继续为大路而犯愁(第一次没考过)。

哦,昨天终于去看了看中医啊,我就说么,一直觉得身体不爽,西医怎么查怎么OK,医生都烦了,也不愿和我交流沟通...中医就好很多,望闻问切,很有交互感嘛。我也知道这半年各种不开心的事情对自己的情绪和身体的影响,我也知道前两个月那么多烈酒和咖啡有多伤身...从此我要像水一样从容流淌不以物喜不以己悲动若脱兔静如处子...有人看到这里觉得我需要看精神科吗?

那么我说正事吧?前面做过几篇价值观、一篇莫名其妙的洗衣机界面重设计...今次回到移动应用的dirty job当中,搞基层建设。来自Nielsen Norman老爷子Group的小文一篇。下面进入译文。

如今市面上的很多应用都会在初次加载时提供“教练画板”形式的新手引导或教程任务(画着各种使用说明的半透明浮层)。此类引导有时确实可以帮助用户以正确的方式使用产品,不过很多时候也真是没有必要。如果你决定在自己的应用里增加这样的新手引导,那么不妨参考本文提供的一些设计原则,以打造出更有用的引导,而不是让用户只想赶快跳过的障碍。

设计师...我们是否名符其实? »

年初一喽,新年吉祥啦各位。有多少人和我一样早上5、6点就被楼下的二踢脚和鞭炮吵醒然后骂骂咧咧的熬上半天才能继续入睡但也睡不踏实只能起床的?

说好过年期间博客也不会停下,新年头一天的早上就安安心心的坐在这里做博客,这事让我觉得很开心,像是这一年都有了好盼头。说大了。昨天教练告诉我2月19号考大路,而我到现在连大路都没上过,这就是新年里让我焦虑的第一件事。

不唠叨了,说正事吧。新年假期里不打算做太“正经”太“技术”的东西;今天这篇纯粹关乎价值观。价值观,主观论调,自然会带来争议,希望各位和我一样能从里面汲取些说的通的道理便好。下面进入译文。

我们把自己叫做设计师。这事里面可有点讲究。

我(英文原文作者)在与软件行业当中很多同行的互动过程中,发现不少人都自豪于“设计师”这个雅号。谁说不是呢?这是个很酷的title,听上去充满了创意风范和耀眼的才气。

十条设计贴士,帮你塑造更好的iOS应用整体体验 »

2013年的第一篇,也不知道是不是有什么可以庆贺和纪念的。这个假期没少下雪,印象里在1号之后就没见过太阳的样子了;倒是这样夜晚的时候灯光昏黄的吹吹空调听听B.B.King,还真有那么点迷离。

假期中间回去金山海边爸妈家,温度更低,风雪更大,这种季节没什么人还会到海边溜达了,沙滩上原本那些摩天轮和海盗船一类的娱乐设施也都拆除掉了,彻头彻尾的肃杀荒凉。有意思的是在家里翻箱倒柜找到几本1997至2000年间买的杂志,比如Music Heaven啊通俗歌曲啊这些;拍了照片放到微博上,立刻有朋友评论说我完全暴露了年龄,哈。

这次选取了Computer Arts官网当中的一篇小文章。CA,国内叫做“数码艺术”,记得没错的话我是从2006年3月开始购买的,那阵子算是刚刚进入Web这个行当叭,看什么都新鲜,发现这本杂志之后简直就忘乎所以了,无论是内容还是杂志本身的排版设计都让我无法自拔...不过到了09年之后就不怎么买了,感觉它变了...怎么变的我也说不上,总之不再那么爱了。倒是偶尔会在RSS订阅里发现一点可以读读的小文章,所以这次也算是纪念自己曾经对CA的爱叭。十条设计贴士,帮你塑造更好的iOS应用整体体验。

btw,其实这次的图标我不是很喜欢,冷冰冰的赶脚,不过其他几个备选的还没这个顺眼呢。

移动应用的十项设计原则及小提示 »

有好天气和好梦的周末,简直就是对自己能活下来一周的奖励和鼓舞。我看猫,猫看鸟,鸟在晒太阳,简直像画中的情境,美好总是这么不真实。

本周小译文,偏向于设计意识形态的培养。在我个人看来,阅读资料分为两类,一是具体操作指导性质的,另外就是这种建立思维框架、培养思维模式性质的。这两类文章,我基本上是交替看,交替做译文到这边的样子叭。不多说了,进入正文;今次的图标调皮了。

移动设备与传统桌面设备虽然都被成为“计算设备”,但它们之间的差异是显而易见的:移动设备的屏幕要小很多,无线网络链接方面会有不稳定,电池续航能力较弱,等等。这份“弱点”清单可以列的很长,但如果你因此认为移动设备就是降级版的计算机,那同样是错误的看法。

实际上,从其他一些角度来观察,移动设备又是比桌面设备更加强大的。智能手机和平板电脑都是更加个人化的设备,它们会一直陪伴在你身边,让你随时随地都可以接入互联网获取所需的信息;它们身上还有传统设备所不具备的很酷的功能,包括GPS、数位罗盘、加速计等等。

所有这些差异都使得移动设备当中的应用程序在界面设计方面存在很多独到之处。我(英文原文作者)基于在自己的workshop中的工作经验,总结出了移动应用界面设计的十条原则及小提示,在这里与大家分享,希望能够帮助那些还不是非常熟悉这个领域的设计师们建立起一套有实践价值的设计思维框架。

先了解规则,再寻求创新 - 关于iOS应用界面自定义 »

刚刚在微博中傲娇的赞许了一下iOS 6当中图标形式的Action Sheet。我真心不愿意用九宫格这三个字,好傻。地图用谁家的,能不能用汉语调戏Siri,这类问题我个人来讲不是很关注了,没多大需求;倒是这些交互模式当中的小改变更让我觉得惊喜。

这些改变体现出的设计原则依然是我们耳熟能详的那些:针对移动设备特定的使用情境,减少用户对于文字的阅读量(文字按钮的文案)、减小UI元素的排布密集度(文字按钮纵向排布的方式)、充分利用用户对常规应用图标的辨识和记忆能力(邮件 、信息、微博)等等blahblah...iOS Human Interface Guidelines摆在那里,有多少设计师能真正把它吃透呢?不想代表任何人,至少我觉得自己远远没有达到那样的程度。

Xcode正在更新,不知所谓的“SDKs for OS X 10.8 Moutain Lion and iOS 6”当中是否包含制作新模式Action Sheet的方式,希望可以喽;就算不会去做iOS 6 only的应用,看到这样的变化及相应的原生制作方法一点点出现,也是一件非常开心的事。

蛮巧的这个话题与今次选定要做的小译文契合在了一起,多棒的一天。原文当中的一些铺垫就不做过来了,大意是作者的一些朋友把iPhone应用设计想的太简单,把过多的精力放在了业务、市场一类事情上面,却忽略了设备自身属性所导致的交互模式方面的一些特定问题,致使产品自身在细节设计当中具有硬伤blahblah...我们跳过前戏吧,想必看过日本动作片的同学是可以理解的。那么大家都可以理解喽。进入正文。

横竖屏切换中的界面设计与体验提升 »

之前一周朦朦胧胧的过掉了,想来也没什么可回忆的。这是一种不坏的状态,就像每天早上莫名的空洞,它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑。有吗?也许只是在哄骗和宽慰自己。

杂志一般的小译文一篇,适合这样的下午做一做,适合这样的周末读一读。走着。

眼下,智能移动设备内置的加速计的主要作用,就是根据设备的定向方式来决定屏幕的显示模式,也就是在横屏或竖屏模式之间进行切换。这种功能使用户通过简单的动作就可以得到额外的布局模式,期间不需要操作任何界面元素或实体按钮。对于我们来说,这是一个提升产品用户体验的契机,但其中也不乏挑战;我们要充分了解不同定向方式所涉及到的使用情境,并确保两种体验模式之间的差异不会给用户带来唐突的感觉。

几乎所有类型的移动应用都能从显示模式切换功能当中获益。本文将围绕着这一话题,为应用的设计师与开发者们介绍一些可以运用到实际工作中的基础概念,同时还会帮助大家了解那些在实践当中有可能遇到的挑战以及相应的解决方案

怎样为网站创建风格指南(style guide) »

旅途归来,一切安好。五天很短暂,回想起来基本只有将就算是蓝色的大海和天空,还有白花花的沙滩;有兴趣的朋友可以到我的微博中看看风景照什么的。

还好,回来之后并没觉得无法适应惯常生活一类,它们之间的区别只是“状态1”与“状态2”这样;把该做的事情立刻开始做起来吧,心里会安一些。之前一篇是“iOS Wow体验 - 第六章 - 交互模型与创新的产品概念”的前半部分。今天插播小文一篇,怎样为网站创建风格指南。进入正文,锵锵锵。

什么是风格指南?简单的说,就是一份告诉你如何讲故事的文档。它确立了一些标准,例如怎样撰写文案、怎样排版、怎样打造视觉元素和交互方式等等。风格指南源自于印刷领域,例如报刊(看看卫报的风格指南);在Web领域,它同样体现出了巨大的价值。

无论是传统印刷,还是互联网,最关键的都是“内容”。风格指南的最终目标就是让内容以清晰并且一致的视觉风格呈现出来。BBC的全球体验语言(Global Experience Language,GEL)就是网站风格指南的绝佳范例。不妨通过页面右侧的“Download GEL Web Styleguide”下载一份PDF文档来稍作了解先。

移动应用界面设计模式 - 搜索、排序、筛选 »

决定放假期间先不上iOS Wow体验了;手头这篇译文不做完的话我心不甘。去年年底,我们曾经学习过一篇“具有引导性的移动应用界面设计模式”,其英文原文来自O'Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个大公鸡的那本儿。今次这篇则是来自于本书的第四章——搜索、排序和筛选。貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起。接下来果断精分,进入原文作者人格。

很多信息类服务站点都是通过分类的方式来组织相关内容信息的,例如交通工具方面的卡车、货车、SUV等;而Greensheet这样的网站则是直接将售卖信息一股脑的堆在一个又一个的页面中,如果我(英文原文作者)想找点儿什么,真的必须挨个看下去。谢了,我还不如直接在手机上用Craigslist应用呢。

在使用Craigslist的过程中,我就琢磨着,作为普通用户,我们确实可以很明显的受益于那些在信息的搜索、排序和筛选方面做的很到位的UI设计模式。在本文中,我们将一起了解一下,有哪些设计模式可以帮助我们按照用户所期望的方式将数据信息更加有效的组织和呈现出来

Pages