别直接拿别人的设计套你的问题

Question everything

Don’t get me wrong: design patterns and best practices are still your friends. Keep in mind though that apps and users are different: one solution might work for well in an app and fail in yours. It’s not a one-size-fits-all thing. Plus, you never know why an app was designed in a certain way.

Do your own thinking. Do your own design. Do your own research.

Measure, test, validate — and don’t be afraid to unfollow the guidelines if that makes more sense.

这段文字是一篇叫《Misused mobile UX patterns》的结语,也说出了很多我的心里话。我们看到的就一定是好的吗?设计师应该保持质疑、质疑一切,保持警惕,才能找到更适合自己产品的解决方案。无关流行,适合才好。

阅读下面整篇文章:

Misused mobile UX patterns

做有章可循的设计

最近几个大公司相继换 Logo 了。而吸引我的除了 Logo 本身,更多的是它们背后的故事。讲故事是一种很好的传达方式,代入感强,能在梳理思考过程的同时,也让我们更容易理解新设计的由来。刚巧最近我们也在做一些新的设计尝试,一个中心思想就是“让设计有章可循”,有了主线索,再做其他的延展就会自然而然,设计师好下手,做出来的东西用户也看得明白,不用每次都解释新概念。

我把近期有代表性的“故事”整理在一起,作为学习资料,我的想法随后再逐渐展开。

Google

google

能够适配更多终端是此次改变设计元素的重要思想之一,从原来有衬线的印刷体,变得圆润,同时也显得更年轻了一些。个人认为 Dots 的设计最为巧妙,很好的利用了那几个圆点的变化,来表达各种交互状态。

查看原文:Evolving the Google Identity


Medium

1-L4saF6QgK44lr8YR_l4c0A

我挺喜欢这组发散的。设计探索就是这样,得放的开,有理由的放。哪怕没有最终被用到 Logo 上,也产生出许多有关联的想法,它们用于广告、海报、运营、周边等等,从这个过程里我们也看到了很多可能。

查看原文:The Story Behind Medium’s New Logo


500px

500px

当下最高质量的图片社区非 500px 莫属,最近也更新了 Logotype 和 Mark 。通过对 500px 文字的变形,他们把它变成了取景器里的对焦过程。一切跟摄影相关,这就是主线。

查看原文:Meet the new 500px


Starbucks

starbucks-iconography

这套专为 Android 设计的 icon 利用了原生素材,在此基础上融入星巴克最有标识性的元素来贯穿:星星和围裙,同时App的用色也以暖黑和暖灰来烘托氛围。

查看原文:Starbucks Android Material Design (这篇是讲设计方法的)


从现在开始,管理你的设计,别让看似亮点繁多的创意和功能,毁了你的产品设计。让设计有章可循,对设计师是好事,对用户而言更是。

大屏智能手机设计要点

Designing for Large Screen Smartphones
lukew.com版权所有
作者:Luke Wroblewski
译者:波希米亚
原文地址:http://www.lukew.com/ff/entry.asp?1927

看着智能手机的屏幕一天比一天大,可手却还是那样……那么问题来了,到底要如何设计交互,才能让我们的拇指能够舒服、快速、轻松地操作呢?以下几点供参考:

为拇指设计

在 Steven Hoober 所做的 1,333 份针对智能手机的使用调查中发现,有 49% 的人是单手握持手机,同时,有 75% 的人使用拇指完成操作。当使用更大屏幕(超过4英寸)时,用起来就不那么舒服了,因为人们必须得把拇指伸的更远才能触及屏幕顶端。

large_smartphones1@2x

就拿我自己说吧,我每天用 Amazon’s Music app 时都会遇到这样的问题。因为主菜单按钮在屏幕左上角,离的太远,所以单手操作时真的很难够得到。如果想点到它,我就不得不把手往上挪,握到手机中部,或者干脆用另一只手来点。多希望能不这么麻烦。

large_smartphones2@2x

系统级的解决方案

考虑到目前已有很多 App 采用跟 Amazon Music 类似的导航设计,让这些 App 改版不现实,所以移动操作系统来解决这个问题就明智多了。苹果在其新的 iOS 系统中提供了一个解决方案,并形象地把这种体验称之为“可达性”。

利用这一方案,用户可以通过“快速双拍home键”,使应用顶部降至屏幕中央,从而达到触摸应用顶部操作的目的。(但原本只需要点1下,现在变成了3下)

large_smartphones3@2x

另外它是有超时的。就是说如果你双拍把屏幕拉下来后什么都没做,过一会儿它是会自动复位的(大概8秒,译者注),如果需要就得再双拍一次。这个设置就显得不那么优雅了。

边缘滑动手势

要想用拇指点到大屏幕左上角的图标是很困难的,但如果是沿设备底部边缘滑动就相对容易一些。这种“边缘滑动手势”可以作为一种简单、替代的方式来控制超出拇指范围的操作。

large_smartphones4@2x

跟所有手势操作一样,这种访问菜单的方式往往出乎预料。换句话说,首先你得知道有这种手势的存在,并且记住它。所以它并不能取代顶部菜单按钮,只能作为一个补充。

另外,这个手势只是让单手操作时进入菜单更简单,并不能操作菜单内容。

底部定位

为了确保重要且经常使用的操作,能够舒适地用单手或单个拇指触达,我们可以考虑把它们定位在屏幕的底部。这种解决方案并不仅仅解决“可达性”,它也可以提高各种其他重要指标。比如 Facebook 在最近的测试中发现,他们 iOS App 的底部标签栏的解决方案还提高了参与度,满意度,甚至感知速度。

large_smartphones8@2x

large_smartphones5@2x

同样在 Amazon Music app 里,我们不但可以把菜单图标放到底部,顺便还可以把最常用的功能调整到靠近底部的地方,这样更便于点击菜单和里面的内容。

浮动的操作按钮

虽然很多设计方案能适用多个操作系统,我们还是需要为重要的差异而设计。

以 Android 为例,屏幕下方是为系统导航预留的位置。这就意味着,如果在底部安放操作,很可能因与系统导航位置过近而产生误操作。事实上,在 Android 设计指南上也明确指出“不要使用底部 Tab bars”。

然而,在 Google 最新发布的设计语言“Material Design”中,出现了一个悬浮按钮式的替代解决方案。这种按钮用于重要操作动作,同时它脱离于当前界面。通常情况下,这个按钮不用于导航,但在 Amazon Music app 的案例中,它被定义为导航按钮,可见设计者多么鼓励频繁使用这个操作。

large_smartphones9@2x

扁平化设计与色彩趋势

Making it Work: Flat Design and Color Trends
Designmodo版权所有
作者:Carrie Cousins
译者:UCD翻译小组波希米亚
原文地址: http://designmodo.com/flat-design-colors/

这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分。

扁平化设计进修

wistia

roybarber

squidee

solo

扁平化设计你可以通俗的理解为:使用简单特效,或者无特效来创建的设计方案,它不包含三维属性。诸如投影、斜面、浮雕、渐变等特效都不要在设计中使用。

扁平化设计给人的感觉通常都很简洁,即使它可以做的很复杂。简单、直接、友好的特性也使得它广受移动界面和时尚网站设计的青睐。

更多

颜色的代码表达式

The Code Side Of Color
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组波希米亚
原文地址: http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/

知道为什么给色彩命名总是很麻烦吗?因为任何两个人都没法对同一个颜色进行精确的感知和描述——尤其是当他们受到网站自身的情绪或气质影响时。给色彩命名, 最容易被印象所误导。即使像“蓝色”这样的说法也是不确切的。比如为了更准确,可以说是“天蓝”,“海蓝”,“牛仔蓝”或是“电焊火光蓝(arc welder blue)”。

描述的差异跟个人品味和所处环境都有关系。比如我们标注的“靛蓝”,“翡翠绿”,“橄榄绿”,“橘黄”,“绯红色”以及“卡巴莱(cabaret)”等。“酸橙(electric lime,大概是这个色)”到底是个什么颜色?你知道它的名字和精确的色调变化?——除非你是台电脑。

精确的代码表示

电脑在命名一个颜色时,通常使用所谓的十六进制代码来表示24位色彩。也就是说,通过用10个数字加6个字母的排列组合形式,可以产生16,777,216 种不同的6位字符——在哈希标记出现之前。与任何计算机语言一样,这其中也是蕴含逻辑的。如果设计师了解了十六进制色彩的工作原理,那它就不再是什么神秘的东西,而是一种工具。

把十六进制拆成易控制的字节

在背光显示屏上,像素点是暗的,只有当红,绿,蓝组合以后,像素才被点亮。采用简洁的十六进制表示这些代码组合,这样代码就容易理解了。如#970515, 我们来看一下它的结构:# 表示这是一个十六进制数,其余的6个字符被 0-9 和 a-f 分成三部分,每部分控制一个原色。

数值越高,原色就越亮。如上例,97 覆盖了红色,05 是绿色,15是蓝色。

更多