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

一致性

图文版 WWDC 设计分会:基础设计原理 - 可见性与一致性 »

此刻是周一凌晨。刚刚过去了一个略有趣的周日。被斑斑咬出伤口,去医院打疫苗撞到电线杆上,回去漫咖啡的路上因司机在车内吸烟而向滴滴做了投诉。台风之后的天气立刻恢复了暴晒的面目,简直不留一丝余地。

幻想一个家。在 store 里观察着顾客,渐渐就开始自顾自地被家装和物件吸引着而开始出神了。每个人的脸上都洋溢着幸福与期待,每个人都值得拥有爱与美好。这是个旅途。一个叫做命运的茫茫旅途。

继续上期主题,即 2017 年 WWDC 之“基础设计原理”设计分会,演讲人是 Apple Evangelist 团队的 Mike Stern。在上期当中,我们了解了导航与反馈,错过的朋友不妨回看;今天的话题聚焦于“可见性”与“一致性”。

清晰、高效、一致、美观 - 关于设计原则的优先级排序 »

首先,向在上一篇念叨当中留言评论过的所有朋友真挚的说一声谢谢。你们说的话,无论长短,我都认真读过,就不一一回复了;感谢你们对我的鼓励,以及对这个博客一直以来的关注。

所以我仍是要努力继续才可以。依旧是坐在公司的茶水间,对着被搁置在角落里的圣诞树、桌足球台和一柜子企鹅,写着这些字。耳边也依然是中岛美嘉的“曾经我也想过一了百了”。对的,上一篇的评论当中也有些朋友提到这首歌,看到你们说起的时候,我觉得很暖。

暖或冷,关于这些,其实我已经,不知该怎样在这里描述了。说起来也真是莫大的自我嘲讽,当有着爱人日复一日陪伴在我身旁的时候,我在文字当中所能表述出来的只有自欺欺人的孤独的意识流,那么善于在本不孤独的温暖状态下营造一个真空的世界。而当两个人的世界真的只剩下一人的时候,我却,不知该怎样描述这种冷寂和绝望了。

“如果明天想要有所改变,现在就必须开始变…我都知道,我都知道,可是啊...”

好吧,怎样讲,也终于完成了自春节之后的第一篇译文。本不算长的一篇文章,却做的好艰难。在家,在咖啡厅,在公司的茶水间,努力去寻找能让自己安心平复哪怕一会会去打几个字的时间和空间,才终于完成掉。至少,完成了。

关于iOS7当中“编辑”与“新增”按钮的布局问题 »

放假便该有放假的样子,哪怕只有一天;书也看得,电视也看得,游戏也玩得,博客也做得,还不止一篇;之前发掉关于智能眼镜应用设计的文章,以及一篇腾讯ISUX招聘信息,今天看到一篇小文,就趁天气好时做一下;不消多看,留意便好的一些东西,其实是在平时工作中常会遇到的小问题。下面进入译文。

初次使用iOS7的时候,我便有些受挫的感觉,其中最典型的问题包括大家所质疑的“这是按钮还是普通文字?”,“这个按钮可点击吗?”一类。在接下来的几个月里,我又逐渐发现细节当中更多的体验问题,例如“编辑”与“新增”按钮的布局。

接下来我们来看看这个问题在以下几款iOS自带应用当中的体现:

应用推广站点的最佳设计实践及优秀范例 »

上周没做更新,实在忙了些许,所以道个歉先。其实这周末同样把工作带回家了,不过都压缩在明天吧,希望能尽量多的搞定;今天还是照常把博客更新起来。

眼下正用电视放着上周的Slash末日之爱现场。是的,周二,本小博主去现场看了,也在微博上发了些照片。这是我等了将近20年的Live,真正来到眼前时却有些不大敢相信是真的了,当时唯有靠不停的摇着喊着跳着跟周围的人挤着才能提醒自己真的是身临其境了。不过后果就是接下来的几天脖子都直不起来,多多少少有些没精神。对我来说这辈子必看的现场还真不是很多,活到30岁算是实现了第一个也是最重要的一个。好吧,说正事儿喽,今次是关于App推广站点的话题。

这里进入译文。人们对于应用产品的需求总是没够的,毕竟,这些小东西可以让我们的生活变的更加简单快捷,它们帮助我们记住事情,寻找信息,发现身边的事物,结交各种有意思的人。

应用类产品迅猛而持续的发展趋势无需多言,当人们需要一款软件时,无论是用在iPhone、安卓,还是在MacBook上,他们通常都会面对非常多的选择。应用在让人们的生活变的更轻松的同时,也越来越容易被创建。

要打造一款成功的应用,你需要做的再也不只限于产品自身的设计与开发,营销推广方面的工作同样是非常重要的,其中最典型的做法就是创建产品推广页面或minisite,向人们介绍你的产品。曾几何时,所谓的“介绍”就是告诉人们这个产品是个什么东西,你为什么需要它,等等等等,和其他传统行业的产品介绍网站没有多大区别。不过在我(英文原文作者)看来,这里还是有些很关键的区别和技巧的。本文中,我将和大家分享五点应用推广页的最佳设计实践,以及若干非常不错的设计范例。

你的产品需要设计规范吗? »

明天就是春节了叭。现在这些话是在2月8日晚间写下的,先给各位拜年喽。陆陆续续的几乎下了两天的雪,现在看看窗外,谈不上银妆素裹,却也黑白分明。雪在夜晚的时候确实显得比白天要白亮一些呢,嗯?

不知春节假期里还有多少朋友会看看文章什么的;我自己来说,除了一两件比较重要的、可能占据每天很多时间的事情以外,剩下就只想看书和玩老游戏了。玩老游戏,这可是假期的特别节目,尤其是春节假期;此传统可以追溯到高中的时候,印象里那时年三十晚上是以玩街机模拟器为主,The Punisher啊恐龙快打啊一类;而如今所谓的老游戏基本就是使命召唤1到4了。

闲话念叨到这,进入正文,关于设计规范、风格指南的话题。就我个人的经历来说,从零开始创建设计规范其实不是易事,包括公司和产品的实际情况、规范的目的、面向的使用者、开工的时间点等等因素都是需要充分考虑的,而且很容易在过程当中跑偏,产出一些并没有实际参考价值的、单纯为了规范而创建的规范。接下来我们一起看看这篇译文,看看作者的一些看法和建议,还有一些不错的范例。走起。

不是所有的网站或移动应用都需要设计规范。你表弟的博客就未必需要,你邻居自己搭建的用来卖猫草的小电商网站也不那么需要,当然这也要看他能卖掉多少,能做到多大规模。

移动应用的空状态界面设计 »

其实我到现在还不清楚哪天正经过年呢,就知道快了,因为公司里的人走掉蛮多了的样子。不,这真的不那么像过年的时节,天气暖和的好像春末夏初,在天台抽烟时甚至会发现成群结队的小飞虫在翩翩起舞。

这都哪跟哪呢。实际上,无论工作还是生活,似乎任何正处于正常进行当中的事情都会让自己产生“过年之后再认真继续”的赶脚,一些需要上手开始做的事也准备“过年假期里再开始搞叭”这样;自己的一些项目、理想中的作品集、一些要读的书、一些想玩的游戏...大体都是这样,其实我眼下把这篇发布出来之后就拿出几个小时把想做的事情猛做一通也不是不可以,但似乎总是想寻找一个大部头的时间;不知是否是拖延症的借口;实际上我不认为自己有这毛病,真的。打住,我们进入今天的正文,关于移动应用的空状态界面设计;虽然文中的示例都是iPhone应用,不过道理应该与平台甚至设备类型无关。(btw,用微信的朋友们可以添加一下Beforweb了呗,点击侧边栏头上第二个图标就会出现二维码)

“空状态”是指移动应用界面在没有内容或数据时呈现出的状态。长久以来,空状态界面一直是被忽视的,因为设计师们通常会将全部精力集中在怎样更好的呈现内容和数据上,只有开发人员才会比较频繁的与这类相对“意外”的状态打交道。也正是因为这样的原因,空状态界面留给用户的印象大体上就是晦涩难懂的文案以及缺乏视觉设计风格。

要想打造完美的整体体验,作为设计师,我们不能放过任何一个用户有可能接触到的界面状态。空状态界面大致包括三种类型:初次使用、用户清空数据、出错。下面,我们就来一同了解一下这三种情境所对应的相关创意要素与注意事项。

关于扁平化界面风格的设计美学讨论 »

似乎真的没发生什么,也就是玛雅人过了个年。本周的更新如约和大家见面,视觉方面的一篇悠悠闲闲的小文章,关于扁平化与拟物化风格的讨论。

我个人对这方面的话题是蛮关注的,偶尔在微博上弱弱的念叨两句,也会有不少朋友来发表各自的看法,确实是大家都蛮关心的设计问题。另外最近看到不少文章观点也都是围绕这些展开的,其中有些比较公允务实,有些则比较偏颇;所谓偏颇,也就是片面表达某种风格一定比某种风格更好,以及好在哪里。说真的,都有一定的道理,都能看出发表论调的设计师的思考和激情。

有人说了你怎么这么没节操呢,你到底觉得哪种好呢?我要说的是叭,在我看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题;脱离了实际产品的上下文环境,脱离了产品功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立。

说的具体些,远的不讲,单说Beforweb这边的视觉风格,除了每篇文章的图标以外,可以说是彻彻底底的扁平化了(当然,细心的朋友可以在侧边栏标题背景底部发现类似阴影效果的1像素边框,这个不算数...),但如果有人说我是扁平风格的卫道者的话,我会很不开心,因为我只是在自己觉得合适的地方使用这种风格而已。我喜欢iOS里很多拟物拟真风格的界面,最典型的包括语音备忘录、iBooks、iPad里的日历等等,它们的界面让我觉得亲切自然,让我可以在冰冷的电子设备当中找到现实生活的真实感,就这么简单。

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

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

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

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

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