UI

前言：一直有在梳理自己的知识结构，也靠这些所谓经验做了几年行业培训，今年是从业的第十一年，我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业，我会把所有所得分章节逐渐整理发出，希望能对行业尽一份绵薄之力，同时也作为一种仪式，好让自己重新出发。举个栗子：假设我是个潮人，同时我也是个医生，那我就有两个角色。如果给我设计一款音乐播放器，应该给我一款酷炫的，我会喜欢。但当我坐在办公桌边，给病患开药的时候，我电脑的开药软件需要很酷炫吗？我一边摇晃脑袋踩着节奏，看着充满特效的界面开出来的药，你敢吃吗？所以医院的软件需要简洁，保证开药的准确度。（然而需要强烈的视觉表达情绪的设计例外）。

最近在做产品设计时，遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题，我觉得非常有意思。

译者注：本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之作。译文首发于ISUX博客，如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。后续章节会陆续更新，敬请期待。

我最近一直在做新产品的策划，方案一个又一个的被毙掉，方向一次又一次的调整，PPT一遍又一遍的改，交互一稿又一稿的画，所以我还在继续努力中，也深深的感受到产品「从0到1」的不容易。产品经理在日常生活中将发现的问题记录下来后经过分析转化为可落地的产品方案，这个过程很复杂，也很容易出错，原因就是思维的过程是不可控的，也就是没有一个相对的衡量「标准」，导致一个现象是想法人人都有，却不一定人人都对，所以产品策划「从0到1」的整个过程十分考究产品经理的功力。

.space-betw {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}

- (NSDictionary *)demoTextAttributes {
NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
ps.alignment = NSTextAlignmentJustified;
// here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
}

当你拿到Android的设计需求后，开始着手进行界面的设计，却不知道如何设计才能让用户对界面感到满意，设计出来的界面差强人意，返稿无数以至于一遍遍的修改？如果这就是你现在的状况，那么先别急着重新进行界面的设计，因为你首先得静下心来看一看这篇Android的界面设计规范。

之前的一系列文章，为大家介绍了iOS和Android规范中，各种弹出物的用法，罗列如下：

今天推荐的这7个神器，有经典款也有新人版，不过大致贯穿了UI设计的整个工作流程，从排版、配色、切图到标注、预览，都有对应的良心神器推荐 ，非常适合刚入门的UI设计师，当然，有两款谷歌刚出的神器，也值得老手们来瞧一瞧。

在打造一个产品的过程中，创业公司往往会把绝大多数的财力和精力用在开发应用或者搭建网站上，很少投入到给用户发的提醒邮件上。

这会可以不用慌张，我们先给自己一天或者半天时间去了解它，最快捷的办法是开动大家的脑洞，然后再用自己的脑洞想办法，三个臭皮匠顶一个诸葛亮，联 系你认识的设计群体人脉，询问做过类似项目的设计师，最后总会有惊喜的收获。记得罗胖讲过，在这个时代，我们应该善于运用我的网状关系链，我就是从朋友那 里在短短的一个小时之内了解了手表项目的大概（虽然人家并不是做的苹果手表），他大致陈述了一下手表的特性还给我几个手表相关的网站进行浏览。给我的网站 可以推荐给你们，这里当然包括苹果官网，你可以在苹果官网上看到成熟的上线产品的模样，另外一个网站相对概念，可以参考一些简单的操作动效。

什么是用户体验？漂亮的UI细节？炫酷的加载动画？这些只是它的一些部分外显特征罢了，不能一叶障目，因为这样很愚蠢。

「材料设计」方兴未艾，扁平化 仍是主流设计风格。今天@正越升 同学总结了扁平化设计 的8个小技巧，字体、图标、排版、配色等都有提及，教程深入浅出，非常适合新手，学会可以直接拿来作海报和PPT设计。

虽然如今好的配色方案已经唾手可得，但为数据可视化找到合适的配色方案，却仍是一项巨大挑战。

Pc端使用平台：手机端使用平台：红米2增强版 自带浏览器 MIUI6.6.2.0（KHJCNCF）|稳定版

前言：一直有在梳理自己的知识结构，也靠这些所谓经验做了几年行业培训，今年是从业的第十一年，我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业，我会把所有所得分章节逐渐整理发出，希望能对行业尽一份绵薄之力，同时也作为一种仪式，好让自己重新出发。任何项目都从一个idea开始，你走在路上，蹲在马桶上；吃着饭，看着电视，灵光一闪，觉得大致可以做一个什么东西来实现世界的爱与和平，这就是一个愿景的诞生；来源无法归纳，却是后面折腾的开始。
然后就是“分析研究”，分析市场，分析技术，分析用户，一边分析一边验证愿景；顺利通过这个环节，得到的就是设计需求。需求的来源多元，组成亦是多元。需求得到，就要进行梳理，以确定下来；这就是“需求过滤”或者“需求定义”。
接下来就是把需求转化成对应的功能和数据，这是产品的骨骼血肉，功能数据要满足需求。比如需求是解渴，对应的功能就能是可乐或者矿泉水，但不能是热干面。从这个环节起，产品从抽象变具体。
功能数据有了，长什么样？我们要把它们设计出来。设计分成“概念设计”和“细节设计”两个阶段，设计又分为“交互设计”和“视觉设计”两条线，所以就有了“概念交互和视觉设计”及“细节交互和视觉设计”。
设计过程中需要进行“测试验证”，验证的结果用来迭代设计，所以大家看到有个双箭头。设计好了，提交研发。在这个阶段，我们做“研发支持”，也就是传达设计需求给研发，并且做研发过程中针对突发情况进行及时的设计修改；比如某个提示的补漏之类的。
最后是“设计验收”。一般来讲，刚研发出来的版本多少有些变形有些不符合设计需求，所以我们要验收。列出结果清单，打回去重新调整。调整到什么程度才可以，要看具体到项目周期和策略。举个例子：我们筛选好约好被试（测试用户），分配给他们分析产品和分析任务，比如对比京东和淘宝的支付流程，让他们回去好好体验一个礼拜，让用户熟悉产品以心里产生评价。然后回到我们实验室，再走一遍，这一遍是被观察。然后就是访谈，询问他们的各种维度的评价，比如对于收货地址选择方式的偏好，最后我们统计归纳。这就是让用户来帮我们分析。“其实你什么都没有做错，错在你太老了。我们最早看到Snapchat，外国13-18岁小孩在用，我们高管用了觉得好傻好无聊，看不到价值，只投了一点，后来涨得很快。这个公司我们副总去过，就是海边一个玻璃房，很小的公司，感觉一个石头就把他们击破了。当时只有2000万美金，我们没进去，现在远远超过我们想象，百亿美金。

每到一年一度的大促季，会场、页面、互动游戏，都在紧张设计之中，这些精美的页面和互动游戏，如何与用户产生联系？必然需要一条与用户连接的纽带 —— 它就是BANNER。有些人可能认为资源位的设计相对简单，但其实不然，小小的资源位承载着重大的使命，设计上自然也是下了一番功夫，那这一次的双11我 们是怎么做的？请听我细细道来…..

当设计师需要向用户展示大量的数据时，总是不可避免要利用到筛选和排序。筛选和排序可以帮助用户缩小他们正在寻找的数据范围。

不论移动端网页和APP之间有着怎样的争论，移动端APP的快速发展都是不争的事实，各种客户端的开发和接入已经成为常态。用户对于自己喜欢的品牌和服务，总期待官方能推出客户端，也正是在这种期待和需求之下，催生出越来越多的APP。

之前研究过一段数据图 表的最佳表达方式，随着手机端应用层出不穷地发展，这次将数据图 表的表现延用到手机端。相比 Web 端展示数据的空间优势，要兼顾手持设备的便捷、简明而重点的特质，手机端该如何取舍？是否有更加合适的表现方式？下面是翻阅或试用了各种有数据的 App 后，将手机端应用中值得借鉴的部分做了小小的总结，也让我自己对不同数据图表 的特性有更深的理解。