之前研究过一段数据图表的最佳表达方式,随着手机端应用层出不穷地发展,这次将数据图表的表现延用到手机端。相比 web 端展示数据的空间优势,要兼顾手持设备的便捷、简明而重点的特质,手机端该如何取舍?是否有更加合适的表现方式?下面是翻阅或试用了各种有数据的 app 后,将手机端应用中值得借鉴的部分做了小小的总结,也让我自己对不同数据图表的特性有更深的理解。搜罗了 App 分类的过程中,发现较能体现数据应用表达的,多数分布在:财务、 健康、医疗、商务、工具、效率这几类;其中以财务、健康、商务类的应用为最 广泛,今天就枚举这三大类的图表应用来和大家一起看看。通常我们所使用的数据图表大多是能在highchart中找到,今天先以其中图表为基础参照,来看看图表在手机 app 里都是如何恰当应用表达的。一.财务类使用财务类(理财)用户的目的,通常是掌握收支、收益的趋势,从而省或赚钱。 这类应用通常会请用户事先做好收支、账单和预算设定,之后再开启 app 时主 要的任务就是查看应用反馈了。Mint Bills & Money上图的是个记账应用;左图用了仪表盘(solidgauge)表示账单到期的情况;左图 则是用类似条形图的方式,表示信用卡的已用额和余额,及最小还款数。这样在 既定范围内,扫一下便可知道总体开销的情况;相比两者都有进度、进程的表达, 但描述倒计时,左图的表达就更合适一些;而描 ...继续阅读 (21)

之前研究过一段数据图表的最佳表达方式,随着手机端应用层出不穷地发展,这次将数据图表的表现延用到手机端。相比 web 端展示数据的空间优势,要兼顾手持设备的便捷、简明而重点的特质,手机端该如何取舍?是否有更加合适的表现方式?下面是翻阅或试用了各种有数据的 app 后,将手机端应用中值得借鉴的部分做了小小的总结,也让我自己对不同数据图表的特性有更深的理解。搜罗了 App 分类的过程中,发现较能体现数据应用表达的,多数分布在:财务、 健康、医疗、商务、工具、效率这几类;其中以财务、健康、商务类的应用为最 广泛,今天就枚举这三大类的图表应用来和大家一起看看。通常我们所使用的数据图表大多是能在highchart中找到,今天先以其中图表为基础参照,来看看图表在手机 app 里都是如何恰当应用表达的。一.财务类使用财务类(理财)用户的目的,通常是掌握收支、收益的趋势,从而省或赚钱。 这类应用通常会请用户事先做好收支、账单和预算设定,之后再开启 app 时主 要的任务就是查看应用反馈了。Mint Bills & Money上图的是个记账应用;左图用了仪表盘(solidgauge)表示账单到期的情况;左图 则是用类似条形图的方式,表示信用卡的已用额和余额,及最小还款数。这样在 既定范围内,扫一下便可知道总体开销的情况;相比两者都有进度、进程的表达, 但描述倒计时,左图的表达就更合适一些;而描 ...继续阅读 (25)

在移动互联网产品设计过程中，我们会在纸板或电脑工具上画出简单的线框图，用思维导图标注界面间的关系等，但往往，我们在不断反复的讨论中会因为一些理解上的误差，或是一些细节无法脑补还原，而影响方案的实施，影响项目的进度或质量。“朴素”的关系或原型图方案会带来一定的沟通理解成本，所以需要方案最终以一个模似真实的APP，可以满足的操作演示的同时，借此来讲述方案的各类关系与细节，验证操作体验等的可行性。在早期的软件设计时代，很多团队会借助像Flash、AE等动画工具，用动画的方式，输出一个模似真实的软件界面，来完成这类演示需求，但并不完全能满足模拟操作或快速修改，实现成本亦相当大，并不利于高速迭代优化的方案输出。当然，移动互联网时代，也有很多更轻便可以符合APP方案设计演示的工具，从QQ音乐5.0的设计之前，我们尝试了很多互联网国内外优秀的Demo演示工具，但很快发现，都因不坚持迭代更新、速度缓慢、功能臃肿或缺失等原因而遗憾放弃，难以满足团队的工作诉求，于是萌生了设计研发一个小而美，专门满足“简单、更捷、演示”APP设计方案的工具，拉起一个小团队，花两晚上输出了一个简单粗暴的版本，为QQ音乐5.x、全民K歌等多个项目的方案设计提供高效的支持。在过程中，也不断加入了一些团队的刚需功能，慢慢在公司内部散播开，被更多的项目团队采用，同时也收到了一些体验上的诚恳建议，一直没违背它“小而美”的定位，在更 ...继续阅读 (54)

在移动互联网产品设计过程中，我们会在纸板或电脑工具上画出简单的线框图，用思维导图标注界面间的关系等，但往往，我们在不断反复的讨论中会因为一些理解上的误差，或是一些细节无法脑补还原，而影响方案的实施，影响项目的进度或质量。“朴素”的关系或原型图方案会带来一定的沟通理解成本，所以需要方案最终以一个模似真实的APP，可以满足的操作演示的同时，借此来讲述方案的各类关系与细节，验证操作体验等的可行性。在早期的软件设计时代，很多团队会借助像Flash、AE等动画工具，用动画的方式，输出一个模似真实的软件界面，来完成这类演示需求，但并不完全能满足模拟操作或快速修改，实现成本亦相当大，并不利于高速迭代优化的方案输出。当然，移动互联网时代，也有很多更轻便可以符合APP方案设计演示的工具，从QQ音乐5.0的设计之前，我们尝试了很多互联网国内外优秀的Demo演示工具，但很快发现，都因不坚持迭代更新、速度缓慢、功能臃肿或缺失等原因而遗憾放弃，难以满足团队的工作诉求，于是萌生了设计研发一个小而美，专门满足“简单、更捷、演示”APP设计方案的工具，拉起一个小团队，花两晚上输出了一个简单粗暴的版本，为QQ音乐5.x、全民K歌等多个项目的方案设计提供高效的支持。在过程中，也不断加入了一些团队的刚需功能，慢慢在公司内部散播开，被更多的项目团队采用，同时也收到了一些体验上的诚恳建议，一直没违背它“小而美”的定位，在更 ...继续阅读 (13)

“你听说过动感影集么?”动感影集是QQ空间新功能，可以将静态的图片轻松转变为动态的视频集，且载体是HTML5（简称H5）页面，意味着可以随时分享到空间或朋友圈给好友欣赏！移动端区别于PC年代的相册视频，由于设备性能限制，每一个动画细节都需要认真优化，今天就来说说动感影集开发过程中的动画性能检测与优化的问题。1.先利其器 – Chrome Timeline&Rendering性能分析前，我们先看看工具。Chrome浏览器带来的两个工具是发现性能问题的利器，它们是Timeline和Rendering。TimelineTimeline是一款基于录制的工具，通过录制在浏览器中的一系列操作，系统会记录这个过程的所有细节数据，包括js计算、页面重绘、复合层消耗等，同时还保存着这个过程每一帧的截图。使用方法：打开Chrome开发者工具，选择Timeline。点击左上角小圆点录制操作，然后在要检测的页面上做一系列交互操作，结束后再次点击圆点停止，最后操作期间的一系列数据就会以图表等的形式呈现在面板中。它有四种事件，对应四个颜色。如下图，网络和DOM解析(蓝色)，JavaScript计算(黄色)，样式重计算和布局(紫色)以及绘画和合成(绿色)事件。它有三个模式：帧模式、事件模式和内存模式。（1）帧模式帧模式需要选中帧视图(柱形图按钮)开启。该模式是检查动画性能最常用的模式。注意到 ...继续阅读 (16)

“你听说过动感影集么?”动感影集是QQ空间新功能，可以将静态的图片轻松转变为动态的视频集，且载体是HTML5（简称H5）页面，意味着可以随时分享到空间或朋友圈给好友欣赏！移动端区别于PC年代的相册视频，由于设备性能限制，每一个动画细节都需要认真优化，今天就来说说动感影集开发过程中的动画性能检测与优化的问题。1.先利其器 – Chrome Timeline&Rendering性能分析前，我们先看看工具。Chrome浏览器带来的两个工具是发现性能问题的利器，它们是Timeline和Rendering。TimelineTimeline是一款基于录制的工具，通过录制在浏览器中的一系列操作，系统会记录这个过程的所有细节数据，包括js计算、页面重绘、复合层消耗等，同时还保存着这个过程每一帧的截图。使用方法：打开Chrome开发者工具，选择Timeline。点击左上角小圆点录制操作，然后在要检测的页面上做一系列交互操作，结束后再次点击圆点停止，最后操作期间的一系列数据就会以图表等的形式呈现在面板中。它有四种事件，对应四个颜色。如下图，网络和DOM解析(蓝色)，JavaScript计算(黄色)，样式重计算和布局(紫色)以及绘画和合成(绿色)事件。它有三个模式：帧模式、事件模式和内存模式。（1）帧模式帧模式需要选中帧视图(柱形图按钮)开启。该模式是检查动画性能最常用的模式。注意到 ...继续阅读 (35)

本文不适合采用天才设计（Genius Design）方法的人士。有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的，越细致的地方可能越是如此。比如，这个菜单的宽度为什么是200px？250px或者190px是否可以？图片的尺寸为什么是278px*196px？如何确定网页的宽度？“软件界面的设计师除了视觉本身以外，对于设计是否可以实现、大概以何种方式实现、规范可否被理解并且复制执行、设计实现的性价比与时间比等纬度都应有相当高度的认识。就像建筑设计师一样，他们一定很了解建筑材料以及如何建筑，虽然他们不会去亲自砌墙。:)希望通过此文可以交流关于栅格化和盒子比例的设计方法。栅格化对于网页的宽度，设计师之间基本上比较容易达成共识，比如：950px、960px、1000px、1190px、1200px。但是如果接下来让每一个设计师设计一个左右布局的版式，左边是一个树形菜单，右边是主要内容区域。那么可能会有很多结果。但是这些结果基本上是比较接近的。如果这些设计师都服务于一个品牌下的话，这种情况并不是一个好的事情。会给人以没有一致性的感觉。图1：一个产品站点，同样是980px的页面宽度，但是菜单宽度分别为：200px和245px图2：另外一个产品站点，同样是1200px的页面宽度，但是菜单的宽度分别为：250px、230px、200px每一个界面单独呈现的时候， ...继续阅读 (18)

众所周知，一个元素，动往往比静更吸引眼球；一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。我们由浅入深来挖掘这动效制作的秘密，一个入门级的小问题：看上图这几个动画例子，大家是否能说出这动画是如何制作出来的呢？而又是如何在网页之上呈现的呢？对，答案必须是设计师们都非常熟悉的gif小动画了，H5动效制作的第一手法，便是GIF了。 动效制作手法1：GIFGIF图片擅长于制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，要把控图片大小和精度之间的平衡，所以它一般用于制作小细节的动画。H5页面承载GIF图片的方式相对以下要介绍的其他方法，是最省成本，最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。聊完了GIF动画的 ...继续阅读 (19)

本文不适合采用天才设计（Genius Design）方法的人士。有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的，越细致的地方可能越是如此。比如，这个菜单的宽度为什么是200px？250px或者190px是否可以？图片的尺寸为什么是278px*196px？如何确定网页的宽度？“软件界面的设计师除了视觉本身以外，对于设计是否可以实现、大概以何种方式实现、规范可否被理解并且复制执行、设计实现的性价比与时间比等纬度都应有相当高度的认识。就像建筑设计师一样，他们一定很了解建筑材料以及如何建筑，虽然他们不会去亲自砌墙。:)希望通过此文可以交流关于栅格化和盒子比例的设计方法。栅格化对于网页的宽度，设计师之间基本上比较容易达成共识，比如：950px、960px、1000px、1190px、1200px。但是如果接下来让每一个设计师设计一个左右布局的版式，左边是一个树形菜单，右边是主要内容区域。那么可能会有很多结果。但是这些结果基本上是比较接近的。如果这些设计师都服务于一个品牌下的话，这种情况并不是一个好的事情。会给人以没有一致性的感觉。图1：一个产品站点，同样是980px的页面宽度，但是菜单宽度分别为：200px和245px图2：另外一个产品站点，同样是1200px的页面宽度，但是菜单的宽度分别为：250px、230px、200px每一个界面单独呈现的时候， ...继续阅读 (32)

众所周知，一个元素，动往往比静更吸引眼球；一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。我们由浅入深来挖掘这动效制作的秘密，一个入门级的小问题：看上图这几个动画例子，大家是否能说出这动画是如何制作出来的呢？而又是如何在网页之上呈现的呢？对，答案必须是设计师们都非常熟悉的gif小动画了，H5动效制作的第一手法，便是GIF了。 动效制作手法1：GIFGIF图片擅长于制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。GIF动画最常在H5动效里当担loading导航条，热门小标签等元素，要把控图片大小和精度之间的平衡，所以它一般用于制作小细节的动画。H5页面承载GIF图片的方式相对以下要介绍的其他方法，是最省成本，最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。聊完了GIF动画的 ...继续阅读 (31)

本文将展示通过网站分析以及站长工具中的数据来辅助解决一些我们工作中常见的问题，比如：如何衡量SEO效果？何时舍弃IE*？怎么定banner的高度？响应式的breakpoint有哪些？何时优化google？改版是否成功？广告的尺寸是多少？如何衡量SEO效果？SEO是漫长地对搜索引擎算法进行猜测和印证。如何肯定单一的自然排名的价值？单从各种核心关键词排名的纬度，我们很难保持长期的激情和好的成绩。单一的去看来自搜索引擎的数据又有一些过于单薄，现有的统计分析工具难以剥离竞价排名的流量。看下面几组数据（来自百度站长工具，为保密X为系数，周期周一至周日）：9月28日~10月4日 点击量126.66X：展现量1667.38X=7.596%10月5日~10月11日 153.53X：1854.80X=8.277%10月12日~10月18日 191.90X：2336.84X=8.212%10月19日~10月25日 194.97X：2430.99X=8.020%从数据上看，站点在百度搜索结果里面的表现是逐步变好的，无论是点击量还是展现量都是增加的，但是这并不能掉以轻心，因为点击量：展现量（比值）是已经开始慢慢下降了。况且9.18~10.4的时候是包括了十一假期。但回过头看我们最开始系统进行优化一周后（6月下旬）的成绩，还是有很长足的进步。32.89X：1625.19X=2.024%也许说长足进步也是早了 ...继续阅读 (20)

本文将展示通过网站分析以及站长工具中的数据来辅助解决一些我们工作中常见的问题，比如：如何衡量SEO效果？何时舍弃IE*？怎么定banner的高度？响应式的breakpoint有哪些？何时优化google？改版是否成功？广告的尺寸是多少？如何衡量SEO效果？SEO是漫长地对搜索引擎算法进行猜测和印证。如何肯定单一的自然排名的价值？单从各种核心关键词排名的纬度，我们很难保持长期的激情和好的成绩。单一的去看来自搜索引擎的数据又有一些过于单薄，现有的统计分析工具难以剥离竞价排名的流量。看下面几组数据（来自百度站长工具，为保密X为系数，周期周一至周日）：9月28日~10月4日 点击量126.66X：展现量1667.38X=7.596%10月5日~10月11日 153.53X：1854.80X=8.277%10月12日~10月18日 191.90X：2336.84X=8.212%10月19日~10月25日 194.97X：2430.99X=8.020%从数据上看，站点在百度搜索结果里面的表现是逐步变好的，无论是点击量还是展现量都是增加的，但是这并不能掉以轻心，因为点击量：展现量（比值）是已经开始慢慢下降了。况且9.18~10.4的时候是包括了十一假期。但回过头看我们最开始系统进行优化一周后（6月下旬）的成绩，还是有很长足的进步。32.89X：1625.19X=2.024%也许说长足进步也是早了 ...继续阅读 (16)

前言最近火热的有声娱乐平台 APP，企鹅 FM，在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感声效的 H5 呢。回想到做鬼节活动页的时候，接近午夜零点还在调整页面效果，看着页面上渐隐渐现的可怕画面，活生生吓到了自己，也是蛮难忘的。作为刚刚来到活动页新手村的朋友，踩到了一些坑，所以让我进入正题吧。哦，等一下，请先扫一下二维码啦~与设计师的沟通在拿到视觉稿和需求单之后，我们需要了解整个活动的流程。有的时候，设计师并不会把每个页面的动画效果做成视频，而是用口述的方式和工程师进行沟通。这样就需要工程师结合活动页流程和设计稿之后，自己先构思一些动效再去同产品以及设计沟通，这样交流的效率才会比较高。动画新手有的时候会天马行空想到一些奇怪的效果，可能会不符合整体设计风格，可能会违反现实物理规律，有自己的想法，还要和产品设计确认。比如这个页面：一开始是做成了先出现手电筒，再出现光，在我的设想中刚开始手电筒上不会有那层黄绿色的光。后来经设计师提醒：如果完全没有光源，也应该看不到手电筒。才改成了现在的方案：灯光闪两下：物理定律什么的，我才记不清了呢T T。P.S. 做动画的时候铭记动效原则，基本上动画的效果不会跑偏。具体实现仔细想想，这个活动页 ...继续阅读 (32)

文章索引3.1 3D触摸(3D Touch)3.1.1 轻压和重压(Peek and Pop)3.1.2 主屏幕快捷操作(Home Screen Quick Actions)3.2 Live Photos3.3 钱包(Wallet)3.4 苹果的移动支付平台(Apple Pay)3.5 研究型应用程序(Research Apps)3.6  应用扩展(App Extensions)3.6.1 今天部件(Today Widgets)3.6.2 分享和动作扩展(Share and Action Extensions)3.6.3 图片编辑扩展(Photo Editing Extensions)3.6.4 文档提供者扩展(Document Provider Extensions)3.6.5 自定义输入法(Custom Keyboards)3.7  HomeKit3.8 多任务处理(Multitasking)3.9 通知(Notifications)3.10 社交媒体(Social Media)3.11 iCloud译者注：本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之作。译文首发于ISUX博客，如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。后续章节会陆续更新，敬请期待。 ...继续阅读 (25)

文章索引3.1 3D触摸(3D Touch)3.1.1 轻压和重压(Peek and Pop)3.1.2 主屏幕快捷操作(Home Screen Quick Actions)3.2 Live Photos3.3 钱包(Wallet)3.4 苹果的移动支付平台(Apple Pay)3.5 研究型应用程序(Research Apps)3.6  应用扩展(App Extensions)3.6.1 今天部件(Today Widgets)3.6.2 分享和动作扩展(Share and Action Extensions)3.6.3 图片编辑扩展(Photo Editing Extensions)3.6.4 文档提供者扩展(Document Provider Extensions)3.6.5 自定义输入法(Custom Keyboards)3.7  HomeKit3.8 多任务处理(Multitasking)3.9 通知(Notifications)3.10 社交媒体(Social Media)3.11 iCloud译者注：本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之作。译文首发于ISUX博客，如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。后续章节会陆续更新，敬请期待。 ...继续阅读 (19)

在接触一款新应用的时候用户常常会看到一些引导页，但在操作的时候直接当透明的就快速滑过或跳过了，这种时候，大家一定会有“这些引导好无用啊”的无力感，目前甚至有着“如果一个产品需要引导，说明该产品缺乏友好的元素”这样的说法，看似有理，但我觉得这并不能一概而论，在不少的app中，除了引导用户操作，引导还影响用户对产品第一印象的好坏，只要这引导设计得好，人见人爱之余，还对整个app中的体验感受能起到巨大作用！“来电”是一款基于语音沟通的应用，作为一款不断探索并创新的应用，也有不少需要用到引导的地方，接下来我们通过一些案例并结合来电的引导来告诉你如何炼成人见人爱的好引导。现在，引导的种类形式随着硬件和系统的拓宽有了更多的表现空间，引导页、缺省引导、视频引导、H5引导等都能起到引导用户认识或者使用新应用的作用。一方面从产品的角度考虑，产品希望用户能够方便得理解产品的特性，减少对产品的陌生感；另一方面，从用户角度来看，一个应用里好的引导不仅能使他们对一个应用有好感，也可能更容易得留住他们。但不论什么形式的引导，好的引导都能够让用户对产品有一定的认知并拉近用户与产品的联系，通过对不少做得好的引导（这里主要讨论的是页面形式的引导和H5）进行分析，我们发现大家喜欢的app引导都会有一些共性，通过归总提炼，得出以下几个用户看了都喜欢的原则：通俗易懂一个APP的引导不论什么类型，它们的目的都是为了让用户更 ...继续阅读 (32)

在接触一款新应用的时候用户常常会看到一些引导页，但在操作的时候直接当透明的就快速滑过或跳过了，这种时候，大家一定会有“这些引导好无用啊”的无力感，目前甚至有着“如果一个产品需要引导，说明该产品缺乏友好的元素”这样的说法，看似有理，但我觉得这并不能一概而论，在不少的app中，除了引导用户操作，引导还影响用户对产品第一印象的好坏，只要这引导设计得好，人见人爱之余，还对整个app中的体验感受能起到巨大作用！“来电”是一款基于语音沟通的应用，作为一款不断探索并创新的应用，也有不少需要用到引导的地方，接下来我们通过一些案例并结合来电的引导来告诉你如何炼成人见人爱的好引导。现在，引导的种类形式随着硬件和系统的拓宽有了更多的表现空间，引导页、缺省引导、视频引导、H5引导等都能起到引导用户认识或者使用新应用的作用。一方面从产品的角度考虑，产品希望用户能够方便得理解产品的特性，减少对产品的陌生感；另一方面，从用户角度来看，一个应用里好的引导不仅能使他们对一个应用有好感，也可能更容易得留住他们。但不论什么形式的引导，好的引导都能够让用户对产品有一定的认知并拉近用户与产品的联系，通过对不少做得好的引导（这里主要讨论的是页面形式的引导和H5）进行分析，我们发现大家喜欢的app引导都会有一些共性，通过归总提炼，得出以下几个用户看了都喜欢的原则：通俗易懂一个APP的引导不论什么类型，它们的目的都是为了让用户更 ...继续阅读 (20)

文章索引2.1 设计原则（Design Principles）2.1.1 美学完整性（Aesthetic Integrity）2.1.2 一致性（Consistency）2.1.3 直接操作（Direct Manipulation）2.1.4 反馈（Feedback）2.1.5 隐喻（Metaphors）2.1.6 用户控制（User Control）2.2 从概念到产品(From Concept to Product)2.2.1 定义应用(Define Your App)2.2.2 为任务量身订制界面（Tailor Customization to the Task）2.2.3 原型 & 迭代（Prototype & Iterate）2.3 案例学习：从桌面到iOS（Case Study: From Desktop to iOS）2.3.1 iPad版Keynote应用（Keynote on iPad）2.3.2 iPhone版邮件应用（Mail on iPhone）2.3.3 iOS系统内的网页内容（Web Content in iOS）译者注：本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之作。译文首发于ISUX博客，如在阅读过程中发现错误与 ...继续阅读 (34)

在上一篇文章中，我们讲述了字体渲染机制和导致iconfont出现锯齿的原因，以及如何才能出绘制高质量SVG ICON，并且提供了一套AI模版供大家参考使用。下文将讲诉前端侧我们如何用SVG来做成高清IOCN，并且良好支持PC下的各个浏览器，并兼容IE6+以上的浏览器。从上一篇文章中我们得知SVG 做的图标在IE9+的浏览器渲染效果相当的差，所以在IE下我们我们不使用SVG ICON，我们可以将SVG转成一倍的png图片来进行替代。首先来简单的普及一下SVG ICON的几个使用方法：第一种Inline SVG这种方法就是直接把SVG标签写入到HTML中去，直接通过修改fill和stroke属性来控制填充颜色和边框颜色，但是缺点就是维护性不好，如果一个页面Icon特别多，可能要写好几十个SVG在页面，复用性差，后期扩展性也不佳。1 2 3<svg width="74" height="74" viewBox="0 0 74 74"> <path fill="#444444" d="M25.42 27.737v-11.555c0-6.382 5.174-11.555 11.555-11.555s11.555 5.174 11.555 11.555v11.555h4.622v-11.555c0-8.935-7.243-16.178-16.178-16.178s- ...继续阅读 (35)

随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。1.多倍图片目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍，devicePixelRatio= 3就做三倍，有些人可能会直接做3倍的图片，这样就可以同时兼容devicePixelRatio = 2 ，但是这样其实对于devicePixelRatio = 1和devicePixelRatio = 2的用户他们就会浪费带宽去加载devicePixelRatio = 3的图片，所以为了提升用户体验，一般我们会分开做几套图片，根据用用户的devicePixelRatio判断让他们加载对应的图片。2.iconfont字体图标在很多国外的响应式站点里一般会采用iconfont，因为可以直接通过font-size和color属性来控制icon的大小和颜色，非常方便，而且由于iconfont本身就是字体文件，会矢量适配各种不同devicePixelRatio，但是在PC上当图标小于等于16px时，或者复杂度高的图 ...继续阅读 (34)

“ 故事也许是人类最早的叙事方法。大多数人在童年时，故事用来引导他们的行为，了解历史文化和培养社会认同感。”－Form Wikipedia1.什么是故事（WHAT）在讨论如何打造故事感体验之前，我们先聊聊什么是故事。故事（Storytelling）是通过文字，声音或图像来传播的事件。它在各种文化扮演着娱乐，教育，传播文化和价值观的作用。讲故事或许是人类最早的叙事方法。大多数人在童年时，成人都会用故事来引导他们的行为，传授历史文化和培养社会认同感。注1讲故事是一种解释和分享的方法。这在我们生活中非常普遍。它们可以弥合文化，语言和年龄之间的分歧。例如在教育中，可以通过故事让人更加容易理解。又如远古社会，人类使用壁画纪录和传播故事，这些壁画即使过了上千年，依旧能理解其中部分含义。古埃及金字塔中的壁画。图片来自 forum.china.com.cn甚至在工作中，通过讲故事的形式，也可以让信息在人与人之间更加高效的传输。比如说在讨论用户需求的会议上，通过讲故事的手法，产品设计可以将用户需求转化为一个个场景故事，便可以准确的让别人理解。 人类从古至今一直深受故事影响。从圣经到现代小说无不是故事。因此当人的大脑在听到故事时，会产生特别的反应。在论文《A Theory of Narrative Empathy》中描述到，当人类听到故事时，大脑中的”镜像神经细胞“（一种神经细胞，使人们学会从简单模仿 ...继续阅读 (40)

“ 故事也许是人类最早的叙事方法。大多数人在童年时，故事用来引导他们的行为，了解历史文化和培养社会认同感。”－Form Wikipedia1.什么是故事（WHAT）在讨论如何打造故事感体验之前，我们先聊聊什么是故事。故事（Storytelling）是通过文字，声音或图像来传播的事件。它在各种文化扮演着娱乐，教育，传播文化和价值观的作用。讲故事或许是人类最早的叙事方法。大多数人在童年时，成人都会用故事来引导他们的行为，传授历史文化和培养社会认同感。注1讲故事是一种解释和分享的方法。这在我们生活中非常普遍。它们可以弥合文化，语言和年龄之间的分歧。例如在教育中，可以通过故事让人更加容易理解。又如远古社会，人类使用壁画纪录和传播故事，这些壁画即使过了上千年，依旧能理解其中部分含义。古埃及金字塔中的壁画。图片来自 forum.china.com.cn甚至在工作中，通过讲故事的形式，也可以让信息在人与人之间更加高效的传输。比如说在讨论用户需求的会议上，通过讲故事的手法，产品设计可以将用户需求转化为一个个场景故事，便可以准确的让别人理解。 人类从古至今一直深受故事影响。从圣经到现代小说无不是故事。因此当人的大脑在听到故事时，会产生特别的反应。在论文《A Theory of Narrative Empathy》中描述到，当人类听到故事时，大脑中的”镜像神经细胞“（一种神经细胞，使人们学会从简单模仿 ...继续阅读 (25)

对于不同平台导航的交互形式与视觉样式，相信有不少的文章来介绍与总结。本文所介绍的是关于导航规划思路。一个比较小众的领域，基于任务的导航（Task based Navigation）。目前产品主要使用基于对象的导航和基于任务的导航。相对来说的，纯粹的基于对象的导航的较为常见，但纯粹的基于任务的导航的产品却为数不多。不少业务复杂的产品会考虑混合使用这两种导航，主辅结合来尽可能覆盖用户的使用场景。如何区分导航的组织方式？最简单的的区分法，关注导航标签的命名方式。基于对象的导航，通常使用名词作为导航标签，标签指向目标事物；基于任务的导航，通常使用动词、动宾短语作为导航标签，标签指向动作行为。基于对象的导航这类界面在日常中比较常见，以名词为主的导航标签。基于任务的导航可以关注界面中的导航标签的命名，以动词、动宾短语为主，关注事务的执行。基于任务的导航通常在工具应用型的产品中。AT&T的账户管理页面，导航按照任务作为划分与指引。 主导航其他辅助导航这是 Fedex的官网，界面导航基本都是基于任务的划分与拆解。导航细节使用基于任务导航的产品，对设计师有较高要求，对产品涉及的用户以及用户任务要有一个的非常清晰的认识。产品的导航核心是基于任务的，那么任务分析就显得尤为重要。任务分析的工具与方法对于单个的任务分析，关注于任务的本身要素与影响因素。1、决策表。把活动中的条件与行为加以区 ...继续阅读 (31)

文章索引1.1 为iOS而设计（Designing for iOS）1.1.1 设计跟随内容 (Defer to Content)1.1.2 保证清晰 （Provide Clarity）1.1.3 用深度层次来进行交流 （Use Depth to Communicate）1.2 iOS应用解析 （iOS App Anatomy）1.3 适应性和布局（Adaptivity and Layout）1.3.1 为自适应而开发（Build In Adaptivity）1.3.2 在不同环境提供良好体验（Provide a Great Experience in Each Environment）1.3.3 使用布局来沟通（Use Layout to Communicate）1.4 启动与停止（Starting and Stopping）1.4.1 即时启动（Start Instantly）1.4.2 时刻准备好停止（Always Be Prepared to Stop）1.5 导航（Navigation）1.6 模态情境（Modal Contexts）1.7 交互性与反馈（Interactivity and Feedback）1.7.1 可交互元素吸引用户点击（Interactive Elements Invite Touch）1.7.2 用户所知道的标准手势（Users Know the ...继续阅读 (37)

“构成群体的个人不管是谁，他们的生活方式、职业、性格或智力不管相同还是不同，他们变成了一个群体这个事实，便使他们获得了一种集体心理，这使他们的感情、思想和行为变得与他们单独一人时的感情、思想和行为颇为不同。若不是形成了一个群体，有些闪念或感情在个人身上根本就不会产生，或不可能变成行动。”— Gustave Le Bon,《乌合之众》当弹幕已经不是什么新鲜的话题，一路从A、B、C、D站(Acfun/Bilibili/吐槽网/嘀哩哩)滚动到了各大主流视频网站，当这种原本属于二次元文化的表达以一种未经修饰，粗鲁但充满生命力的形式欢快的奔腾进了大众视野——“弹幕＋影院”、“弹幕＋音乐”、“弹幕＋搜索”、“弹幕＋教育”，甚至“弹幕＋阅读”——在这一场场看似很美的亚文化和所谓的“弹幕社交”的胜利中，有多少人受到精神污染，又有多少人笑出了腹肌。弹幕为什么会火？在三次元的世界里有没有水土不服？花花绿绿、大小不一的文字，这看似糟糕的体验为什么成了一种情怀？在搞清楚这些问题之前，如果你还不知道「神吐槽」、「高能预警」、「空耳」，不明白死宅们被戳中笑点后为什么会发出一连串2333333，先来「科普」一下。弹dàn幕mù（日语：弾だん幕まく）本义是指战场上由密集子弹形成的火力网（子弹密集得像幕一样），相当于中文的“枪林弹雨”。而日语中，“弹幕”一词除了指密集子弹火力网，还用于代指密集移动的事物，现今多用于 ...继续阅读 (37)

前言最近火热的有声娱乐平台 APP，企鹅 FM，在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感声效的 H5 呢。回想到做鬼节活动页的时候，接近午夜零点还在调整页面效果，看着页面上渐隐渐现的可怕画面，活生生吓到了自己，也是蛮难忘的。作为刚刚来到活动页新手村的朋友，踩到了一些坑，所以让我进入正题吧。哦，等一下，请先扫一下二维码啦~与设计师的沟通在拿到视觉稿和需求单之后，我们需要了解整个活动的流程。有的时候，设计师并不会把每个页面的动画效果做成视频，而是用口述的方式和工程师进行沟通。这样就需要工程师结合活动页流程和设计稿之后，自己先构思一些动效再去同产品以及设计沟通，这样交流的效率才会比较高。动画新手有的时候会天马行空想到一些奇怪的效果，可能会不符合整体设计风格，可能会违反现实物理规律，有自己的想法，还要和产品设计确认。比如这个页面：一开始是做成了先出现手电筒，再出现光，在我的设想中刚开始手电筒上不会有那层黄绿色的光。后来经设计师提醒：如果完全没有光源，也应该看不到手电筒。才改成了现在的方案：灯光闪两下：物理定律什么的，我才记不清了呢T T。P.S. 做动画的时候铭记动效原则，基本上动画的效果不会跑偏。具体实现仔细想想，这个活动页 ...继续阅读 (23)

最近大家有没有被下面这只可爱软萌的熊刷屏呢?他的名字叫Dov多福，Dov在希伯来语中是“熊”的意思，他可是QQfamily家族中的一员噢，现在在为”来电”产品代言中，看看他在生活中的样子吧：( *・ω・)✄—————————以下是正文，请沿虚线剪开———————————-因为发现同学们长期伏案工作，身体缺少活动，加上坐姿不正确，办公室人群都会出现腰酸背痛的现象。而八段锦是古代引法的一种，对腰部疾患有着良好的作用。为了改善这种亚健康状态，QQfamily计划做一次关于八段锦的推广。但是我们通常看到的宣传资料图是这样的看起来是老人家的活动呢，我是年轻人我才不要学(ㅎ‸ㅎ)或者是这种好像教得很详细呢，但是还是看不懂，那么麻烦我还是不学了(ㅎ‸ㅎ)(以上图片均来源于网络)思考八段锦是个好东西，但是它有两个问题：1.它很传统，可能会给人感觉很老派，大部分年轻人并不会它提起太大的兴趣；2.现有的八段锦分解图资料都是静态图，信息量有限，对接触过八段锦的人或许能起到一定的提示，记忆动作的作用，但是对于大部分观众并没有什么卵用，即使耐下心来 ...继续阅读 (24)

 这是7月31日11点的呼伦贝尔，正午的太阳照耀在广袤的草原上，也照耀在此刻海拉尔气象站那群年轻人的心里，炽热而焦灼。ISUX即通设计中心一行人的目光追逐着一只冉冉升起白色气球，2分钟后，它变成一个小点，渐渐消失不见，直到3小时后再一次与它重逢 ，他们才确定，那个3月里萌生的“帮QQ企鹅去太空逛逛”的梦，居然真的成真了。QQ在太空中的第一张自拍照 在这个价值35元的搪胶QQ真正登上35000米高空之前，这并不是一个被寄予“厚望”的项目，甚至可以说，它似乎一点儿也不“靠谱”——2次实验重大失败，3次小范围结构受损，因天气、地域性法定禁空等原因停滞3个月，加上接连不断的质疑和否定，“你，是否还会继续？”一直是萦绕在QQ设计组中挥之不去的问题。从南到北，从泥土到天际，越过河流和森林，告别云朵和蒲公英……是什么，让QQ有了第一次太空之旅，有了无边天际里与地球道的那一声“Hi”？ 缘起这事儿，得从ISUX即通设计中心里头一个叫QQ美术馆的项目说起。ISUX即通设计中心是负责QQ用户体验设计的团队，将一个自己团队做了很多年的产品的过去、现在和未来梳理，用美术馆的形式沉淀，是Deen在今年这个温暖躁动的春天里萌生的想法。跟中心内的小伙伴敲定方案之后，美术馆中过去的和现在的两大版块将由丰富的历史、更迭的版本素材来呈现，那么未来馆呢？这似乎很难用具象的场景来界定。要不， ...继续阅读 (41)

现代智能手机给我们提供了非常多丰富实用的功能，比如平时颇为在意金钱去向的我，就是一个 手机记账 App 的使用者，曾经尝试过各种记账 App，但好像都有那么一点不满意，于是我就想如果是我来设计这么一款 App 的话，我会怎么去设计呢？本文记录的就是一次移动记账 App 的设计探索过程。一. 设计前的思考简单、高效和安全是设计之初就想到的三个关键词在一天的使用过程中，我很可能存在多次记账的需求，这也意味着我会频繁打开这个产品，简单和高效可以让我更快的完成任务。记账因为涉及到资金这个问题，所以它同样需要一定的安全性。如果要给这个 App 一个定位的话，我认为它是一款 “能满足大众基本记账需求的轻便的移动记账 App ” 。基于以上的思考，很快就产出了以下稿子：视觉呈现上，我把它做的非常简洁干净，在进入密码解锁以后直接呈现一个列表，左下角则是有一个常驻的悬浮着的绿色添加按钮，用来添加一笔支出或者收入。当然也有比按钮更优雅一点的方案：通过手势下拉的操作展开一笔新的支出或收入，因为手势的优势在于没有固定的需要点按的操作位置，能有更高的效率。尽管看似合理的初步方案就这么出现了，但是如果仔细深入思考的话，会发现它并没有实际解决你希望能够更高效记账这个行为。出于安全的考虑，你始终在打开记账 App 后需要输入四位的密码，然后才能进入记账的行为，这个过程会让你在每次记账的时候都需要多按几次手机。为了 ...继续阅读 (30)

简介这个八月，ISUX举办了一场面向ISUX全体员工的海报设计大赛，为大家提供一个展示才能并且宣传公司部门精神及文化的平台，获奖作品更有永久展示在办公环境的机会。海报大赛不仅仅是视觉设计师的独活，本次大赛还得到交互设计师、UI工程师、产品经理等职业交叉的参赛团队的支持。接下来请欣赏大家的优秀作品~ 获奖作品大赛共收录12个获奖团队的作品，恭喜以下获奖作品及作者（排名不分先后）,大家可以在万利达各楼层观赏到这些作品。入围作品 颁奖现场  ...继续阅读 (66)