Saga

Wx: saga_jeanne
欢迎互联网同好加weixin

交互设计师必备的9种能力(下篇)

网易ued团队出品😁

大饼:

书接上回:


6.用户研究能力


    有一天突然被老大问到: “你的方案到底靠不靠谱,你有没有验证过?”小饼突然间就蒙圈了:“哎?没有验证过。我觉得挺好的。”老板暴跳如雷:“你觉得就可以了吗?拿出证据来!”



这里说的的验证或证据,就是通过用户研究来验证设计方案。那么用户研究有什么好处呢:



  • 低成本:在线上前的快速验证,避免提升开发成本和对用户体验的伤害


  • 高效:不需要上线版本,有时候几张纸面原型就能让用户体验,发现设计的问题。...

2016-09-13

关于交互设计师的能力与技能的9个故事

这个漫画好赞

大饼:



ps.感谢视觉设计师大头的支持!


ps,文章分享的视频地址:http://study.163.com/course/courseMain.htm?courseId=1002835013

2016-07-26

股票和互联网产品的那些事儿

故事是这样的...因为最近闲钱比较多,所以想着要不要去存掉呢。

所以找了一个私交好友,正好这个好友要发私募了,可以去投一些。

饭桌上聊了很多关于股票的事情,当时也是抱着一种学习的态度听着。不觉回想起来,竟有不少观点和我们做产品时碰到的问题那么相似。

1. 为什么中国散户炒股很少有赚钱的?

中国A股有99%的账户资金不足10万。而且大多数人都觉得自己是股神...所以喜欢交易来交易去的。其实每笔交易都有手续费要交,而且是有个最小额度的。所以当你资金投入很小,其实需要的盈利点会变高(资金投入大,则降低了这个盈利点)...虽然现在A股通胀好像有11%,但是总觉得资金太少就去玩,根本就...

2016-07-06

如何设计客户端版本升级提示

我们希望客户端升级的时候有一套说明新功能的升级图。这里就记录一下设计这个图要注意的事情。

1. 确保每次都显示最新的一套图。避免用户从1.0直接升级到4.0,要把2.0和3.0的升级提示也看一遍。

2. 确保用户一套图只看一次,比如用户在2.0已经看过升级提示了。那么从2.0升级到2.1就不用看到了。

3. 确保跳级升的用户也能看到升级提示,比如1.9升级到2.1,也能看到在2.0设置的升级提示(即使2.1没有修改)。

所以呢,感觉比较好的做法是建立一张目录,记录每个升级提示版本,然后只去显示最新的一个版本。然后如果用户已经看过某个升级提示,就做一个标记,...

2016-05-16

一件想警示所有交互设计师的事情

很多体验问题,请最好在第一遍开发的时候就确保体验最好的效果。

不要太相信这些体验问题有机会在未来迭代。

因为“迭代”中,这些事情的优先级总是很难被提起来

2016-05-11

几个交互设计问题

回答几个问题:

1. 如果没有任何移动端交互设计经验的交互设计师想开始设计移动端要怎么开始?

看书的话,去看下《移动应用UI设计模式》即可。动物书还是很不错的工具书(封面是一只鸡)。另外,就是看经典app呗。im看微信/易信/陌陌。社区看看微博(够负责)。新闻阅读类的网易新闻。总是经典app去临摹几遍就知道大致的布局规范了和模式了。另外就是可以看看一些小众app,appstore很喜欢推荐,里面有不少创新的uI模式。(不过要慎用)

2. App和pc交互设计的区别?

核心区别有两点吧,一是app的屏幕永远那么大,而pc可大可小。所以app里我们想的总是如何充分利用空间,有时候...

2016-04-14

超越可用性:在设计中考虑说服力(译文)(第二、三部分)

非常值得一看

alvinzsc:

原文:Beyond Usability: Designing With PersuasivePatterns


作者:Anders Toxboe


译者:张书超



初次使用挑战:爱上你的产品


    当用户注册了你的产品之后,就是时候带给用户优秀的新手体验了。目标应该是使用户快速了解你的产品能够提供什么东西。那就让我们一起看下该如何去让用户体验真正地实现产品价值吧!


使特定的行为发生的方法


    目标是使...

2016-03-14

需要注意的交互细节——no.24

关于模态窗口的使用:

不得不承认,在交互设计的时候,模态窗口还是很好用的(特别是在web端设计的时候),因为他可以让用户不用打开新页面就去完成一些复杂的任务。

但是,在使用的时候,还是觉得要谨慎一些,不要想当然地去用模态窗口(说真的自己有时候也会偷懒,想想直接开个模态窗口就好了)

举个例子:


上面的图片是一个简单的地址填写。当确定后,会变成下面的样子:


因为用户可能出现填写错误,要修改的情况,所以这里需要进入一个重新填写的状态,可能不假思索的就觉得,那用个模态窗口就好了:


但是仔细想想,点击修改直接回到图1的状态不也可以解决问题么?而且从代码的简洁性和体验的一致性来说也会更好些...

2016-03-12

贴心的提示弹窗设计

夏影姐姐可以看一下这个

Sim_H:

或许,我们未曾看过它们一眼;


或许,我们曾因为它的出现愤怒不已;


或许,它们来去匆匆不带走一丝留念;


它们,是谁呢?


它们,就是传说中的提示弹窗。


说到提示,大家可能第一反应可能就是toast提示,例如下图所示的搜狗地图收藏成功的提示。toast提示尽量不遮挡页面的主要内容,无需用户手动点击,只需等待1s左右即会自动消失。



其实不然,除了toast之外,提示还有气泡、Dialog(弹框)等样式。不同的时机,提示出现的样式不同,给用户的感受也各不相同。正如开篇所描述的,有些提示...

2016-02-03

读后总结(第2篇 - 盘点那些应该杜绝滥用的设计)

对于新手引导那部分不能同意更多

木木:

创新总是很少,互相借鉴总是特别多,我们一起来看看那些被滥用但有时并没那么好的设计,给大家敲响警钟,参考无罪,但是多独立思考,自主设计。


好,进入正题。



问题1:看不懂的图标


因为有限的屏幕空间,似乎尽可能使用图标代替文字来节省空间是个无需考虑的真理。图形显然占用更少的空间,他们无视多语言,而且用户很很习惯,不是么?几乎所有应用都是这么做的。



如果你从来都没有用过谷歌翻译,你认为点击这个鬼画符似的图标会发生什么呢?




还有这个。坨式导航给人眼前一亮的感觉,但是如果是用户不太熟...

2016-02-03

需要注意的交互细节——no.23

未读数字的消除:

是这样的,很多集合都会有未读提醒。 比如新的喜欢,新的评论什么的。这里的做法还是有蛮多讲究的。

本人觉得有个体验是蛮不好的,那就是!慢!

所以说说数字消失的问题吧。最好的体验,当然是读完内容出来,未读计数就要消失。不过,有时候因为开发会做成服务器同步,因此数字消失会出现一些延迟,让用户觉得很难受...(好吧...真的应该要盯开发盯的紧一些)

所以很多时候,不仅仅是设计那么简单,用户体验更要同步给开发,让开发去思考体验的重要性。

凡事都需要一个过程,但是我们一定要不停进步。

2016-01-26

读后总结(第1篇 - 教你写一手好文案)

木木:

交互中当然会涉及文案,虽说在整个前端展示中并不算突出,但若说信息架构逻辑流程是产品交互的筋骨,那文案无疑是其中的血肉。


先举几个例子来说明。


例子1:




许多平台都喜欢以猜题的形式做活动,特别是出一些与平台自身相关的题目,既做了活动又可以向用户安利自己的优势。但对于许多对平台特性不了解的用户,这类活动无疑门槛太高;虽然想拿奖,但不了解题目又怎么猜得对?!看到这类活动的标题,一部分用户已经选择放弃。


如果改成“蒙”呢?虽然描述的是用户的实际心理,但直白的表述却大大降低了用户心理预期,说不定还会会心一笑,反正是蒙嘛,随便蒙一蒙说不定...

2016-01-20

需要注意的交互细节——no.22

创建和编辑的差别:

只是今天突然又看了下钉钉的创建/管理团队流程。所以突然想写点东西了。

很多内容在被创建的那一刻就是注定要被编辑的~比如一个团队的信息,比如一些长长的文章。感觉创建和编辑还是蛮不一样的两个场景。创建的时候,用户会期望能简单地操作,快速看到创建完的结果。而每次编辑,则会更用心,希望编辑是有效的,因为这时候已经了解了会创建的东西是什么。

所以创建的时候,除了基本信息,或许不要让用户操作太多~比如第一次创建团队,先不用处理组织架构什么的,让用户先看到团队就好。添加人的时候,也是一个批量选择,而不用自己填写太多内容。

而编辑的时候,添加成员就会多出很多部门什么的选项。

其实...

2016-01-17

国外最优质的设计资源#mark#

mark

大杰不是风:

要做好设计不易,眼界开阔是必须培养的,你需要不断去学习新东西。那么接下来的一大波网站,我想对你的帮助应该会挺大.


Tips:在网页端直接根据名称,输入网址就可以了,比如第一个“Freebbble: 优质免费资源.”访问网址是“www.freebbble.com”,就可以进入相关的网站了.


So:好东西,要记得分享哦,把内容传播给更多的人,让资源更有价值.


▧Best设计资源



  1. Freebbble:优质免费资源.


  2. Dribbble:免费资源.


  3. Graphic Burger...

2016-01-09

需要注意的交互细节——no.21

webview的加载问题:

webview的加载还是不要用模态加载了。

其实很多时候加载的内容已经出来了,用户已经可以先查看内容了(往往确一些大图),而模态加载会锁住整个页面,不能滚动,体验会很不好。

所以在app内做webview的时候,最好还是用类似微信的顶栏下方进度条更好,那样不会锁住下面的页面,即使加载一半,也可以让心急的用户先开始浏览内容。

ps:如果直接判断到加载失败,别忘了直接在页面做个点击刷新哦,会很方便的。不用去右上角的...里找刷新了。

——————

最近有些低产,因为要处理的事情有些多,还要准备交互设计的微专业。

本来还想做quartz composer的教...

2016-01-05

需要注意的交互细节——no.20

关于进入评论页面:

好久没更新...今天感觉也是个酱油更新。

只是今天正好碰到这个问题,就写一句吧~

很多app会做评论页面,然后进入评论往往有很多入口,比如评论的icon,或者是放在外面的评论内容。其实点了以后都是进入页面,但是还是有些细节要定义下哦:

1. 键盘要不要弹出:用户进入评论页面无非两种心态:要么想自己写,要么想看。需要去分析下用户点按钮的场景,来确认要不要弹出键盘。

2. 要不要进入回复状态:还是一个道理,要考虑下,点击某条评论是不是想回复哦。当然如果进入回复状态,需要做一些定位(最好是把输入框定位到评论下方)和键盘弹出的处理。

————

感觉

2015-12-28

需要注意的交互细节——no.19

让用户感觉快速地看到新消息:

一直感觉微信朋友圈的新消息提醒做的很不错,每次看到tab上数字提醒到进去看到真正的消息的过程,都感觉没有任何等待,可以很快完成。

要做到这样,真的需要用心去处理服务器和客户端的交互机制。比如数字提醒要和消息内容同时下发给客户端,而且要直接保存掉这些新信息,然后第一次只显示新的通知,让用户不需要花很多心思去区分哪些是新的,哪些是旧的。

之前在易信也想做成和微信一样,但是体验起来总是觉得从入口到消息列表还是有一丝卡顿...看来微信在这些体验细节上真的很用心。

不得不说,很多设计是做在看不到的地方的,特别是交互。从前总是追求一些表面上很酷的设计,但是做的越多,越...

2015-12-24

设计的评价标准

快真的是特别重要!

希希部落:

一个设计师&产品经理应该在决策时下意识的、本能的考虑这些原则。就像以前很多零售业者能够一抓准,你要一斤糖,他抓起来就是一斤,不多不少,靠的就是不断的练习+思考,最后将其变成了自己的本能。


越是通用的标准,往往也就离细节越远,需要结合界面的具体部分(信息架构、导航、交互、语词、视觉等)和产品的具体领域(例如音乐播放器、阅读软件等)来看。往往说起来总比做起来容易,是不是纸上谈兵,就要在设计中具体去把握了。


下面列出给我印象最深的三个半原则:


1 优先级


苹果的设计为什么让我们觉得精彩?为什么我们父母级的用户都

2015-12-22

需要注意的交互细节——no.18

移动端的评论设计:

说真的,觉得评论设计还蛮麻烦的,存在各种各样的冲突。

首先我们来说说考虑顺序,一般来说先要确认下正序(微信那种),倒序(为了更方便看新评论,比如网易新闻,微博),根据你产品的评论数量,用户的阅读习惯来定喽~。

然后要考虑一下,评论是单独给一个评论页面呢,还是和内容结合在一个页面。如果你要选择结合在一个页面,那么注意,因为上面要放内容,所以你的加载一定是在底部加载更多评论啦。

当然,下一个问题就是你准备怎么设计评论框和评论结束的反馈啦。(不过个人觉得这个反而最次要)一种做法是微信那种很nice的评论完了直接让你看到那条评论。不过微信很nb的就是没有加载评论的过程,而是...

2015-12-19

2016年移动应用设计趋势:神奇的微交互

好文

SEZIGN.設計夹:

原作者:Jerry Cao翻译校对:晓黑原文链接:http://designmodo.com/mobile-design-trends-2016/



开发一个APP并上线了,你会觉得很了不起,同时呢它还有一个很酷的故事和视觉设计令人印象深刻。但这是不够的,它需要更多的东西,要让用户感觉这些元素活着。



这就是微交互!



图片来源:uxpin



当谈到设计一种上瘾的APP微交互的秘诀时。其实是少不了用户的角色,这些设计时刻保持用户的参与进来才行,才能够创造出意想不到

2015-12-15

需要注意的交互细节——no.17

让用户完成操作以后可以找的到&新手引导放哪里:

今天的用研测试,研究员告诉我新用户订阅了标签以后,不知道订阅在哪里...

仔细一想的确有这个问题,因为按现在设定的新用户操作路径,新用户在进入标签页面前,可能根本没看到过订阅那个tab。

所以这边就应该有个新手引导了对不对!

其实很多引导放在一些不经意,但是用户真的需要的地方(比如完成了某个操作)会更贴心,当然,这需要一个交互设计师对于场景有非常深入的思考哦!

ps:确保用户的每个操作都是能明白的也很重要哦(订阅后要知道在哪里可以找到订阅)~如果真的出现了这个问题,在第一次的操作后一个简单引导会蛮有用的~

 @本本 ...

2015-12-09

需要注意的交互细节——no.16

关于响应式动效的一些话:

其实现在动效还是蛮流行的,dribbble上好多大神用AE做出酷酷的效果,BUT...做到app上的其实蛮少的。

其实AE上实现的真的做到app里还是有蛮大距离的。

有段时间自己对响应式的动效很感兴趣,这里就分享一些关于那个的经验吧。

响应式动效是指把用户输入的一些参数(一般是手指在某个轴的位移)映射到一个界面元素的动效(比如当年微信还有下拉小视频的时候,慢慢下拉会出现的那个眼睛)... 一般简单的就是映射到元素的位置,大小,透明度什么的,而且常见的映射方式也都是线性。

但是,如果要做的好玩,可以映射到贝塞尔曲线的参数(比如qq那个拖动红字提醒消失

2015-12-09

APP的数据图表设计,你以为简单?

yoyo姐出品必属精品

周莜 | 视界:


做APP的数据图表设计之前,你考虑过移动端屏幕大小与属性吗?考虑过可视化数据图表,提升APP气质吗?考虑过在APP和WEB端,数据图表的展示有何不同吗?

也许你都考虑过,但作为一篇科普文,还是要从最基础的说起。

问:以数据图表为主的APP有哪些?

前期,yoyo通过App Store、MobilePattern、Dribbble疯狂搜图,积累了以下丰富的案例。             ...

2015-12-07

需要注意的交互细节——no.15

某些按钮,需要fix到屏幕底部:

今天看到一个同学做的活动页面交互稿,页面里面有长长的介绍,感觉还蛮吸引人的。然后,在页面的最后给出了一个领取优惠券的按钮。

不过考虑一下自己是用户的话,好像并不会真的把十几张图看完才会想要优惠券,估计看几张图就想要了吧~ 所以这种按钮还是一直固定到页面底部比较好。

关于长页面里,什么按钮要fix在底下呢?两种吧,1是用户一来就会找的东西,2是你希望每个进入用户都去操作的。

特别是你希望用户去操作的那个按钮,有些活动/推广页面,你不知道用户会因为哪一句话而萌生购买的意愿,所以把购买一直放在底部,还是挺好的^  ^

貌似很简...

2015-12-05

需要注意的交互细节——no.14

移动端h5页面的列表——详情页面进入问题:

手机刷h5页面其实还蛮痛苦的,由于本人一直处于网络不那么好的环境里,所以h5页面的刷新一直让我很头痛地要处理的问题。

在交互范式中,列表——详情页的跳转非常常见(简直每个app都有了呢...比如什么商品列表到商品详情页)。

所以这里就需要强调一个问题:如果说用户进入详情页面后,返回列表,去完整刷新列表,那会导致用户丢失浏览位置,体验很不好...如果不刷新,那可能导致用户在详情页面的一些修改无法体现到列表页上,体验也不是太好(让用户疑惑是否操作成功)

所以一般来说提醒开发按照一种交互规范来做比较好:1. 保留用户在列表的阅读位置,保留...

2015-12-03

需要注意的交互细节——no.13

关于一些多tab刷新的处理细节

看了几个app对tab切换和刷新的处理:
1.云阅读和易信会取缓存,下拉不刷新,或只刷当前页;但是切tab时会有突兀地跳跃感,感受不太好;
2.in不取缓存,每次切tab都刷新,且回到顶部,逻辑简单,但是感觉太耗流量没必要
3.微博和贴吧的做法比较稳妥,切tab时tab位置保持固定,取缓存(除了贴吧每次切tab是会刷新日志时间信息,其他内容不刷新);刷新只刷新当前页;切tab时如果是新加载则在页面中间转圈,不存在回到顶部刷新的问题
结论:微博和贴吧的比较好,建议采用

2015-12-02

需要注意的交互细节——no.12

关于报错的一些细节:

其实一般报错也就是三种形式,toast/alert/输入框类的在输入框下方直接给出错误原因。

toast的话,一般都是显示2秒,用户提示一些网络错误等内容(用来提示一些和用户操作无关,仅仅是客观原因导致的问题较好),特点呢就是文案比较短。不过在具体样式方面,着实觉得原生的不大好看,所以感觉还是自定义优化一些比较好(比如ins的样式还蛮不错的)。ps:在屏幕中间出现的toast会禁掉操作,这个有时候也会让用户有些不舒服。

alert,就是会出现一个“确定”按钮,需要用户点击才消失。这一类用来提示用户行为导致的错误比较好,因为需要用户很明确为何出错,所以才要用户点一下确...

2015-12-01

需要注意的交互细节——no.11

顶部多tab页面的刷新放哪里:

最近正好被这个问题给坑了一把,所以就来记录一下吧。

其实现在很多时候会去设计顶部多tab页面,而tab下面放上动态流,所以也就是会有刷新操作。对于刷新的位置,希望遵从一下以下原则:

1. 如果tab上面没有其他内容,或者上部内容较少,最大高度可以计算。则可以把刷新放在tab下方,这样的体验感觉会更顺。

2. 但是!如果tab上面有其他内容(比如很多个人页面会这样),内容较多或干脆无法计算出最大高度(因为包含用户填写内容)。那么请把刷新的位置放在整个页面的最顶部,而不要放在tab下面,因为那样会导致给用户的刷新位置不够,而根本没法刷新....

2015-11-28
1 / 3

© Saga | Powered by LOFTER