‘交互设计’ 分类的存档

交互设计是一个新兴行业,尤其在互联网,越来越多的公司注重用户体验,而用户体验很重要的一部分就是交互设计

没有评论给学生们讲UE的感想记录~

2011年11月3日

本周一去学校给互动媒体专业的同学讲了一节关于用户体验、交互设计方面的讲座~

准备过程如下:

1.尽量以实际例子先把用户体验的概念能够普及一下

2.讲交互设计的通用原则(用了 注册表单、PC、手机上Map的设计)的例子来深入

3.最后以一个简历中的交互设计收尾 希望能给同学们一些实际的应用~

 

感想如下:

1.关于用户体验想讲出来就像量化一样,概念太大,只能讲一些基础的现象

2.学生的冲劲还是蛮大的,都拥有一番梦想,期待飞翔~

3.与社会现状差异还是蛮大的,对于企业而言应届毕业生确实有太多思想和能力太学术化及落后

 

晚上与老师和同学们一起聚餐,希望他们能够有好的发展:)

分类: 交互设计 标签: , , , ,

1 条评论设计稿标注首屏线 更易于评估效果

2011年7月14日

今天看云谦的blog 看到该文章,觉得不错 mark一下

对于首屏估计大家都会关注,但设计稿发到不同的人 由于分辨率不同,体验效果其实也不同

正好内部在做新的设计稿也推荐给设计师看了一下 之前注意首屏并没有通过这样详细的统计分析来获得首屏高度

根据内部统计系统中的操作系统、浏览器分布和屏幕分辨率等数据,结合浏览器状态栏、任务栏等高度进行分析:

得出两条首屏线,分别为 580 和 710,对应不同的分辨率。

==

C 再从实际用户的角度出发,在某应用布点进行用户数据的收集,分析用户实际的分辨率和浏览器可见区域:

1. 分辨率

1) 1024×768, 1440×900, 1366×768, 1280×800 仍占了绝大多数
2) 分辨率总类非常多,除上面列出的之外,other 里包含了几十种分辨率
3) 800×600,1024×600 等 600 高度系列的已逐渐推出舞台

2. 用户可见区域高度

具体数据举例:

测试用户总数量为 261645)

1) viewport 高度低于等于 580 的有 116786 个人,占 44.64%
2) viewport 高度低于等于 720 的有 216227 个人,占 82.64%
3) viewport 高度低于等于 800 的有 241420 个人,占 92.27%
4) viewport 高度低于等于 900 的有 259174 个人,占 99.06%

==

接着,D 根据 C 的数据,生成浏览器可见区域的热区图

最后结论如下:

  1. 根据 D 的热点图,可以看到如果首屏高于 600 像素会有很多用户看不完整。所以请设计师以 600 像素高为首屏进行设计。
  2. 根据 C 的曲线图和 80/20 原则,首屏设为 710 像素可以照顾到 80% 的用户。所以前端开发可考虑把 710 像素视为首屏,对首屏的资源进行优先加载。

9 条评论EDM邮件营销的注意事项

2010年11月28日

公司近期也在做edm方面的尝试 看到此文收获颇多 感谢ico同学的分享

EDM现在已经是电商营销的必备的环节,作为用户,每天都会收到好多EDM,吃喝玩乐样样都有。但反过来作为EDM策划者或者设计师,面对如此多的“竞争对手”,我们如何才能变得“独一无二”。(若你希望成为一个好的EDM营销人员,时刻收集EDM,一定要成为你的好习惯。)

1. 确定EDM的种类

EDM分很多种类,不同的EDM所要表达的东西都不一样,不全是进行销售,营销,也可能是别的。所以对于不同种类的EDM,需要调整到合适的方向。

通常我们把EDM分为以下四类:

纯文字类型:适用于对顾客进行通知和简单的互动反馈,文字内容又较易于格式化的,例如:注册确认,注册成功,订单成功,账单等

商品促销类型:如名字,适合用于商品销售,大多数电商临售网站都用这类型的模板,例如:6pm邮件,京东促销邮件

活动及功能上线类型:团购将这类型的EDM发挥了极致,差不多整个页面就是团购网站的缩小版,言归正传,这类型的EDM最适合一些需要强力push的活动。例如:淘宝商城1111活动

信息推送类型:定期将信息类推送给用户,比较适合此类型的EDM,例如:infoQ的信息推送等

2. 开始编写代码

由于不在自家服务器上,EDM中的代码和普通网页是有区别的,代码编写和普通网页是有区别的,有如下几个地方可以注意一下

乱码:你没法知道所有用户的系统环境,因此使用utf8来避免乱码是非常重要的

绝对URL:若是相对URL,用户在打开页面是将看不到图片

图片Alt属性:大多数邮件服务器都屏蔽图片,所以在一片红叉的时候,你能够让用户看到图片原本的意义是很重要的。

图片压缩:打开的时间越短,用户看到的越快,还从服务器压力来说,对于图片的压缩也是需要的。

Table布局与内联样式:90%的服务对Table布局支持都很好,而DIV却无法得到很好的兼容,所以推荐使用table来制作,同时CSS也推荐使用内联样式来进行制作。

3.EDM的发送

请不要忽视这个最简单又最困难的环节,因为这关键到精心制作的EDM是否准确到用户手中,还是白白被扔到了“垃圾邮件”文件夹中。还有选择合适的发送时间也是一个勾引用户看EDM的好方法。

好的邮件标题:在打开邮件前,最先入眼的就是邮件标题,这个标题的好坏可以决定用户是否会打开这个邮件。在取名字的时候,重点+简洁有力的文字会是个不错的选择。

细分顾客:发送前,一定要好好定位您的客户,哪怕是老客户,针对不同类型的客户发送的EDM要有所区别,别一股脑儿的群发。

使用专用的发送邮件:邮件要专业,用户若看到了发件人是“tom02191@gmail.com”,绝对会降低您的第一印象,请选择个专业的邮件。

选择合适的发送时间:各大知名电子商务邮件,大部分集中在“11-13点”(京东,MasaMaso,Apple,Vancl等),和“7-9点”(新蛋,团购站等)2个时间段,这2个时间段恰恰是上班族打开电脑,或者疲倦想要休闲一下的时间,这样的话打开EDM和点击EDM的可能性就大大增加了。这样是不是比滥发EDM好呢?

4.数据监测

邮件发送后,对邮件的后续的数据监测也是至关重要的,我们要知道邮件的到达率,打开率,点击率…..等各方面的数据,来判断这份EDM设计的好坏,也可以帮助到我们下次的设计。

监测的数据:对于数据,这篇文章说的很清楚《邮件营销的核心数据

监测工具Google Analytics99click,等。

转自:ico的ui设计-http://icojump.in/?p=1317

分类: 交互设计 标签: ,

没有评论原型设计软件Axure6:含汉化包+新增功能介绍

2010年11月27日

看了介绍 几个新功能都必要吸引人 解决了以前的一些麻烦问题

2010年11月22日,Axure公司释出了最新的Axure RP 6.0.0.2826测试版。

2010-11-23 10-13-07.jpg

Axure RP 6是一次重大版本升级,全新的架构。
PC版本与Mac版本达到了风格统一。这次同时放出了它们的测试版。
PC版安装过程中会自动更新.NET Framework4.0。

Axure RP 6.0.0.2826备用下载:
英文PC版下载地址http://u.115.com/file/f9d967ce12
汉化包下载地址http://www.webppd.com/thread-2143-1-1.html
(先安装英文原型,再把汉化包文件覆盖到axure安装目录,英文原版与汉化包的版本要对应。)

英文Mac版下载地址:
http://maxure.s3.amazonaws.com/AxureRP-Pro-Beta-Setup.dmg

此次Axure RP 6 Beta版新增功能下面一一道来:

1. 可以设置页面背景图片、颜色以及相对于浏览器整体居中了。

2010-11-23 10-31-58.jpg

2. 可以设置整体在线框边缘变为手绘风格的,以及是否彩色输出。

2010-11-23 10-37-25.jpg

3. 因为是全新的架构,不再存在某些输入法中文无法输入的问题。

4. 可以设置文本行间距了,同时个性化字体可以输出到Html。

2010-11-23 10-47-20.jpg

5. 更加易用的事件编辑器,再也不会像之前版本那样,编辑器窗口自动变大了。

2010-11-23 11-21-25.jpg

6. 输出Html时可以选择用哪个浏览器打开。

2010-11-23 11-43-33.jpg

7. 增加了栅格系统,自带960宽的12栅和16栅。
在菜单栏:Wireframe-Grid and Guides-Create Guides…中

2010-11-23 11-47-01.jpg

8. 增加了页面和模块的搜索功能。

2010-11-23 11-50-16.jpg

9. 增加了快速隐藏网格的快捷键。Ctrl+’

2010-11-23 11-53-52.jpg

10. 新的测试版本不能再输出Word2000格式的文档了,只能是Word2007格式。

11. 兼容性,用Axure6可以打开以前所有版本制作的RP源文件,但是如果是Axure6制作的RP源文件,将无法使用像Axure5.6这样的低版本打开。

2010-11-23 12-39-00.jpg

12. 取消了原来的状态栏,改为拖放组件时直接在右下角显示组件的位置和大小。

2010-11-23 15-08-19.jpg

13. 没有了原来的收起工具面板,不知是为何考虑的。如果能有像Photoshop那样的Tab隐藏工具面板的快捷键就方便了。

2010-11-23 16-33-22.jpg

14. 条件判断,判断组件或变量值时增加了包含与不包含,这下可以判断输入框是不是包含@符号,用于判断是不是邮箱地址了。同时还增加了一个不是数字或字母的判断,原来版本只有“是”数字或字母的判断。

2010-11-24 10-59-44.jpg

15. 增加了针对变量或组件值的公式计算,貌似可以加减乘除运算了,还可以插入当前日期或页面名称。具体怎么使用还不熟悉。

2010-11-24 12-17-08.jpg

16. 可以创建临时中间变量,方便记录各输入组件的值,而不是设置全局变量。

2010-11-24 12-23-21.jpg

17. 增加了三个可用于条件判断的类型:
1. text on focused widget 是判断当前光标所在的组件内容值。
2. drag cursor 拖动鼠标的判断(目前我还不知道是干吗用的)。
3. widget rectangle 可以判断两个矩形组件是不是叠放在了一起(不知道有何实用性)。

2010-11-24 14-55-07.jpg

18. 增加了一个可被赋值的类型:
1. text on focused widget 给当前光标所在组件的文本赋值。

2010-11-24 15-02-50.jpg

19. 矩形右键多了个分配给某个组,不知干什么用的。(可能和未来拖拽有关)

2010-11-24 15-34-33.jpg

20. 右键有了特殊性粘贴,但试了试并不清楚怎么用。

2010-11-24 15-42-25.jpg

转载自
http://www.webppd.com/thread-2121-1-1.html

2 条评论弹出窗口[浮层]与切换页面的对比总结

2010年7月28日

看到这个标题很感兴趣,之前看过一个关于Tab效果的 这是交互设计的基础

转来分享给大家

作者:丽君 来源腾讯ISD

分享较早前的一个小总结,关于在选择弹出窗口还是选择切换页面来承载信息时,可用用来判断的几个角度,合适初学者来读。

1.弹出窗口与切换页面的区别

1) 操作的连贯性 弹出窗口的速度会比打开一个页面的速度要快,响应更及时一些,点击后可以比较快的得到操作的反馈,而切换页面则经常会让用户等待一段时间。

实例一:个人中心中,查看好友照片的操作:

之前查看照片的操作页面会跳转到该好友的空间“相册”页面,而现在则更改进为弹出窗口,能够很快看到照片的放大图,关掉窗口后,又可以继续浏览其他好友的信息了。

阅读全文…