2018年6月9日

基于网格系统塑造独特的版式——栎工坊评改过程

最近自己参与评改网友作业分享,设计选图感觉很赞,版式有自己的思考。但是摆放有些失控,因为没有利用到基础网格的功能。

原来问题如下 那个男人12月12日 提问:老师您好,仰慕已久。我主要是碰到了一下问题:

▍在制作网页的时对于网页交互的体验不够了解,往往是做的很平。 ▍优秀网页应该具备那几点呢?来证明一个网页作品。 ▍网页在制作过程中对于后台优化的问题怎么尽量做到最好,本人略懂代码,在平时学习中经常听到在制作网页的时候要考虑到后台优化问题。

2013年1月27日

总部怎么做产品(专题/频道)?

北京设计交流之行,各地设计师与总部UED讲师团就规范/技巧/项目/用研进行几天的交流。各地的同事都很sweet,各种激情不断。且对总网整体工作流程有了进一步的了解,以前,总站和地方站的童鞋其实都对各自的设计工作流程有着各种各样的疑问,通过交流活动,进一步知道大家的工作情况,对梳理自身设计有着蛮大的作用~再次感谢总部和地方站童鞋的给力交流~

【用户研究对产品的重要性】

  • 总部用研团队工作方法:通过两人的用研团队发展下线——ce,每个频道一个。
  • A.用户调查问卷1)拒绝奖品

    2)需求list——用户群基本特征,需求

    3)调研规避上线时间附近和大事件,主要考虑是推广资源对真实数据的影响。

    4)问题设计的要点问题抽象,问题杂糅,敏感性问题,诱导性问题,其他

  • 用户类型,目标,场景,心智模型
  • B.可用性测试:1)5到10人

    2)业内和不同区域用户不参与

    3)控制在1小时以内

  • 文字链碎拼的问题(列表有两个链接,后一条链接的效果很差):迷你首页部分页卡文字新闻区,跌广告的问题 

    不同的组合形式,通过用研的优化,流量翻倍增长

     

【门户(频道)细节考虑】

  • 现代互联网产品的趋势:扁平化,突出内容,个性化,社交化

  • 视觉平衡

    用户视线“落点”在前三屏,重点栏目规划区域。

    区块有醒目的区隔标识,“头条”是拦截注意力的最佳形式

    用户阅读的最佳宽度是600-650px,从左栏到右栏横向大跳跃应极力避免(避免使用横屏全文字描述)。

  • TAB切换标签

    尽量避免在首页用tab,要加也要维持3个以内。tab之间点击差异在10倍左右(第一个TAG与第二个间的数据差异)。

  • 移动时代的web趋势

    视觉上统一、考虑移动端的功能、层级浅、触摸设计,点击区域至少有30px高度、提供内容预览和快速扫描设计、确保主要内容是目标支持的格式,考虑适配性、尽可能显示默认值

  • 明确设计风格:

    产品定位,客户喜好,是否可实现,时尚的,自己擅长,高效的。

    同样是产品,设计不仅仅是为了装饰,而是更好的让用户理解“产品”

【大型项目设计规划方法】

  • 腾讯网未来的网媒产品基本以做精致和深度为主,根据设计趋势制定栏目的风格走向,尤其是针对大型项目。

  • 腾讯网改版

    1)品牌区留白增强品牌  2)要闻区增加间距  3)产品区放置右侧

  • 信息图形化(新闻频道开始大范围使用)

  • 腾讯网大项目的定义

    品牌设计,产品设计,媒体界面设计

    1)具有战略意义的大事件项目

    2)垂直领域的报道

    3)项目周期长,子项目较多(设计持续2个月)

    4)公司联动,参项人员多

  • 设计趋势分析的重要性

    细分每个步骤,每个阶段的设计趋势植入

【总网团队演讲技巧】

  • 简单的介绍自己(讲者)的喜好

  • 介绍下历史(以例子的方式引导听者思考,可以是视频,游戏或图片)

  • 根据主题展开话题,平均一个主题在30页左右的容量,时间为每个1小时左右。期间大专题包含小话题,中间设定休息时间或奖品时间(针对回答问题的童鞋)

  • 回顾每节课的内容,简单梳理知识点。

 

【问题Q&A】

  • 问题:新浪,搜狐为什么不改版?基于其业务线原理,门户业务是其主营业务,轻易不敢改动。
  • 问题:Q首改版后,数据表现如何?8成喜欢Q首页,满意度提升25.8%

    原因:可以快速遭到感兴趣的内容,内容丰富,功能便捷,图文比列协调。

  • 问题:404的由来?原因是在404房间报错,就是404。
  • 问题:汉字调整机制?韩国yahoo产品导航案例,通过调亮图标的阴影和去掉描边

    增加汉字的行间距,多留白

 

【精品栏目】

最后感谢总部的接待同事——韬光养晦,UED的讲师团队~

2012年12月7日

IxDC用户体验与设计管理讨论

和各大公司用研童鞋做交流。谈到设计师被称为美工话题,一人说,设计只有给公司带来价值,才能配得起设计师的称号,而且美工也只是称呼而已,不用过于在意,专业度上来了才能得到别人的尊敬。另一人说,个人价值的快速提升是最核心的东西。笑称,如果两年后,部下没被阿里百度以两倍薪资挖走是他的失败。

 

团队运作

  • 老板拍脑袋决定,团队分交互设计和用研,找用户回来用数据说话。
  • 策划提出来,测试也由它决定。以项目划分团队,项目由谁负责有进度,预先安排。有沉淀下来,方便减少沟通成本。每个月有专业分享,分级别。中级设计师有考核分享。专业业务能力,每个部门抽人出来,关在小黑屋沟通。

 

用研团队架构

  • MIG_用研组,创新组,重构组,各业务组(不同产品_一个设计师一个交互)
  • 设计师有驱动心态,未来设计师要求。
  • 业务能力,产品感觉,团队贡献。设计帮产品落地,保证利润。管理与专业并行。
  • 把设计与产品绑定,大公司容易懒惰。用户体验怎么走?不用想,已经发展很快。要沉淀下来,将产品做好。

 

设计数值化?

前提:将问题提出来。在设计里埋代码,灰度发布。强调设计,产品,技术三位一体。

 

人才培养激活

  • 需要什么样的设计师:是否每个职位的人需求描述是一致的?抄的相同岗位需求_结构性思维_创造力考核。
  • 正职:掌控思想和全局观,思考有全局性。任务:短期(常规任务)/长期(思考项目优缺点)
  • 实习生:更多是做执行,要求很明细严格,与自己的设计理念同步。不用否认,更多告诉他我怎么想?
  • 专业过硬,沟通积极(一般设计被动完成需求),思维弹性(复杂项目如何简化落地)。
  • 设计蜂巢(专家分享),设计夜校(专业技能培训),新人魔鬼营(导师牵头的产品),跨职能培训(主要是产品,技术,设计了解相互如何工作,设计和开发有边界,做出来的东西是想当然)
  • 月度一对一,个人产品,高速思维(以数据图说明价值,一般5分钟完成)

     

用研的价值

用研提高产品专业度,将结论落地。产出实际产品,才有说话的地位。

 

团队设计流程

  • 精益ux设计方法_需求等同于设计,同步工作,向用户学习,快速迭代验证。控件抽象化,需求和设计源同步。
  • 让设计师尊重设计流程_改变美工的称呼,先尊重自己。两种方法:1)跨职能的形式,有需求如何实现,由制度制约 2)吐槽大会,技术说美术,美术说技术,不同职能部门说不同的东西,互相了解可以说什么。风险评估,输入物品质控制,技术体谅,驱动上下游。
  • 速度与品质之间的平衡_每月选出自己最满意的产品,与高层汇报。

 

用户体验布道

  • 美工,在没做出成绩时,先放下尊严。
  • 用研团队解散,可能专业发展不太成熟,设计师和产品经理坐在一块。设计带给公司价值,个人价值的快速提高才是最核心。
  • 产品深绑定,开发是兄弟,市场数据,体验细节逐渐落地。
  • 尊重设计师,主动配合,爱上体验思维。
  • 设计师要求:工作更容易,解决有价值的问题,降低错误率,全局设计优化工具。

 

设计师的分类:

  1. 普通设计师_波动较大,作品专业度起伏。
  2. 专业设计师_给足设计时间,可以做得好。
  3. 职业设计师_在某些恶劣的环境下,能又快又好的做出产品。

 

2012年7月2日

腾讯改版,网友精彩观点回顾~

4D2486F3000BB0D0CD7F47B4A345EC4A B500 900 500 156 - 腾讯改版,网友精彩观点回顾~

观点类:

Da_Kid:新闻门户作为媒体,是传播平台,社交化只是其内容传播渠道的一个补充方式,这里更应该做的是让对的内容和对的用户匹配,强内容弱关系,是要做一个基于用户兴趣喜好的一个推送,而不仅仅是通过协同过滤出来的“朋友们都在看”

 

@AmazingLv:今天你们说炳浩说的有道理,把阅读往日常习惯上努力,是不是这个对于腾讯新闻努力的方向也一样呢?而推荐这个看起来很美好的东西命中了什么,现在不是产生信息太少,而是用户被塞爆了不知道看到哪停。新闻本身信息行动比低,不认为高质量的新闻短时会有突破

 

禤文杰:若是这样的格局,整个首页的广告呈现方式要求更高。若最大个性化,可以在栏目定制上下工夫。例如我不关心文化教育,可以选择性将这行通栏消失。这对页面提出更高要求。

 

@来去之间: 新闻门户的社交化,现阶段不是把新闻阅读社交化或碎片化,而是通过社交平台给门户带来更多用户和流量,同时加强基于新闻的社交互动,这方面Yahoo做的算最好的了~~

 

李聪聪V5:有围脖还能有点自主的内容看看。否则都是编辑们的豪乳童颜、离婚激吻。

 

@aaron_WNG: 只能说国内的设计师太差了,这是一门户的主页吗?这明明就是一晚报的风格。在全世界的设计师都开始走包豪斯简约风的今天,腾讯的设计师又一次在世界面前展示了华强北的精神。

 

蔡幼林:启动大社区交互战略是大势所趋,但由门户时代进入到个性定制时代仍有很长一段路要走!单从腾讯新版DEMO看不出颠覆性的改变,不知底层页打通如何,不过地方新闻在新版的地位提高!

 

技法类:

@网页设计师联盟: 对于设计师来说,这中间将面临最大的挑战是:1、如何平衡资讯/业务/广告的求?繁杂的内容如何通过板块划分来合理布局和协调?  2、如何突显自己的风格?既容易被大众接受又不乏个性化?这些看似矛盾的诸多方面将是改版的关键点和难点。

 

@ZOL_Teddy:关注到的细节:1、使用3*3像素的灰点对齐;2、大格局上使用了2栏结构;3、Tab的切换更大更明显;3、给微博更多篇幅?强化互动氛围;4、内容版块整合和精简;5、界面风格简约;6、采用1000px的页面宽度。个人总结:感觉还不错,没有什么问题。

 

@电子商务的那点事:【腾讯新版首页早泄】小电说下改版亮点:①. 原3栏改为大2栏,框架更清晰,信息主体更突出;②.挖掘用户的行为模式、兴趣偏好,个性化推送信息,重点在微博 .

 

Mophy:其实我想让你们看的是另一个方面,那就是好的设计是拟真的,不会有Ctrl+V和Layer Copy存在的。

 

CE78BC915E637CAED4CB76EEA18D5FD1 B500 900 450 381 - 腾讯改版,网友精彩观点回顾~

新版腾讯首页

6A529B526A6DAD4BA7760E9DDE0E9EE0 B500 900 450 410 - 腾讯改版,网友精彩观点回顾~

新版腾讯科技首页

2011年8月8日

设计交流-从大粤网看区域门户设计之道_图标栏目篇

f8e0b75bdf23ae31bd1386fdd30ca779 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

    导语:腾讯大粤网上线了。从设计的角度看,值得学习的地方还是蛮多。相较于大门户的设计模式,区域门户的设计规范还是有很多不同。尤其自己最近也在负责这方面的事情,感触比较深。从本文起,我尝试从图标设计,框架布局, 栏目导航,交互设计的角度,对这个区域门户产品做肤浅的分析。

 

图标篇】

·首页_主导航    87cc9b5064b4e94b2a5b3fb27656e5c7 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

大粤的核心产品都集中在“粤生活”这个区域,其余栏目都属于已有腾讯产品体系。

从色彩上,大粤使用的是橙色系的亮色调体系。这与南都的南都网十分相似。相较于资讯型的网站,腾讯主打是地方区域产品路线。从导航里产品的布局就可以略见一二。

 

 

·图标次序设计原则

这一版的大粤在设计上有个特点,我总结起来应该叫:“宽松布局、折线和圆角”。

【核心栏目】使用的是圆角+底色。

在宽松的布局体系里,小面积的色块十分突出。当浏览时,大粤网保持每屏出现2个大色块外加3-4个小色块,以便控制阅读时浏览的适度跳跃性。其余次级的内容采用列表。

根据这个原则,产品图标出现的位置我感觉还是略有不妥。

 

1)产品区混合图片区,视觉焦点分散。产品不容易被用户发现,如果是主推这块内容的话,应该考虑产品区留有更为广阔的呼吸区域。现在的排列方式略显拥挤。

2)团购区(右上角)的处理方式挺值得学习。如果做成全底色的图片形式,这块区域就拥挤不堪了,设计师巧妙的利用语言和空白减弱此区域的视觉层级,同时通过语言去适当提升此区域的趣味性,增加用户的点击率。(不过这种效果如果是签稿的话,最恐惧的情况是编辑根据自己喜好,替换了字体或颜色....那么,呈现的效果就....)

0bd0519d44c32d0d012824f672001fa7 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

 

【次级栏目】使用的是折线+透底+渐变

和巨型门户相比,大粤走的是小资生活路线。这一点从起次级栏目的设计思路可以很明显感觉到。混合时尚杂志的设计思路,栏目处理显得较为精致。

1)以数字和英文的辅助命名方式,会使设计显得更为洋气。这里还要充分考虑色彩的因素,栏目的变化过于丰富乍看感觉不错,但是对于网络媒介来说,可能有所不妥。由于页面的特殊性,栏目间短时间变化的可能性不大。每个栏目虽然漂亮却长期不做更新,有可能增加用户的阅读疲劳度,而忽略了栏目下内容更新。

当然,这只是拙见,不过我认为,栏目设计更多应该是服务于内容,而不是喧宾夺主。同时,在中国,英文真的那么重要么?英文在中文网页里更多应该是充当点缀的装饰物吧?有必要放大到这个程度么?不解...

 

f898d8c01fa0745b7b1a6c19a6d245d5 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

9c025460a054d3163409dcc4711d159c - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

 

【频道核心栏目】使用的是图案+图片+大面积色块+超大按钮

大粤网对频道产品拳头产品的定义十分到位。互联网有这个定律,只要把某项功能做到满足90%需求,自然能招募到用户使用。而往往面面俱到的产品,最终都是失败告终。专注确实是网络世界里一项优秀的品质。

每个频道保持一款拳头产品,并把它放在最醒目的位置。

1)核心产品放在第一屏,为其定制特别的样式。当然根据每个频道定位的不同,这个并不是绝对的。不过我建议为了保持网站的整体性,固定每个频道的核心产品位置还是有必要。起码,新用户能通过这个一致性,迅速掌握到网站的使用规律,方便其参与到网站的活动。

2)产品的定制规律:

· 一级信息:产品图标+参与人数+功能性大按钮

产品的目的是让用户方便参与,尤其是地方性网站。更容易召集用户参与线下活动。将产品核心功能区进行视觉强调是有绝对的必要

·二级信息:栏目名+辅助图形

再次提醒用户您正在参与什么活动,增强栏目的识别性,降低参与的出错率。

·三级信息:其余辅助信息

      包含其余活动情况,活动参与度,编辑推荐等。不过大粤在这一块做的不是特别理想,不同频道将信息处理手法有很多的不同。会导致部分用户迷糊,而且每个区域的大小,样式都有极大的区别,需要用户花费相当的时间去筛选有用的信息。

 

 

     【总结】大粤网的栏目分布以及图标处理

 

     ·粤生活

      身边事(新闻) 买房子(房产) 去旅游(旅游) 爱美丽 (时尚)

娱乐眼(娱乐) 找靓车(汽车) 食天下(美食) 理财铺 (金融)

 

·首页_主打产品 http://gd.qq.com/   c87b1189fb959c0bb93b24a6004061f6 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

 ·频道_主打产品展示方式 (房产)  http://gd.qq.com/auto/

09e25fa2a769e5950de784faddb67aa8 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

·频道_主打产品展示方式 (旅游) http://gd.qq.com/travel/

b8dd5a0f72e255d3cfc10c9a47eaafde - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

 ·频道_主打产品展示方式 (时尚) http://gd.qq.com/lady/

85e8be9dcf3c794f1fc8251aaeb734c3 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

 ·频道_主打产品展示方式 (汽车) http://gd.qq.com/auto/

d102ef5e7e6ad656404e6970631b491f - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

·频道_主打产品展示方式 (美食) http://gd.qq.com/food/

f5e9b0f15fd352f6f30e486a0acc9477 - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

 ·频道_主打产品展示方式 (数码) http://gd.qq.com/digi/

ec8ebfd777a6361979a798d20057900f - 设计交流-从大粤网看区域门户设计之道_图标栏目篇

 

的微博: http://t.sina.com.cn/drizzlep  欢迎交流~

 

2011年4月5日

用户体验-好用的网站人人爱,用研项目调查与研究

9a04581f90c78c1ca2a41e10549f87a6 - 用户体验-好用的网站人人爱,用研项目调查与研究

   网络世界里充斥着太多难以使用的页面。如何改进怎么改进或许是困扰每一个站长的问题。以下摘录的一些易用性法则,可能会对这个问题有点小小的启示~

 

·7+-2原则:

人脑处理信息的能力有限,人们短期记忆每次能处理5-9件事情。

 

·2秒钟法则:

系统等待反映的时间不应该超过2秒,当然如果用户等待的时间越短,用户体验越好。

 

·3次点击法则:

用户在点击3次之类如果还没有找到他们想要的信息或了解网站的特色,他们就会离开。

不过如果用户对系统的运作有全面的了解,那么点击多少次都是没关系的。那么清晰的导航,符合逻辑的结构和易于理解的网站层级是很重要的。

 

·80/20法则

也被称为“少数关键定律”,它表明80%的结果,由20%的原因产生。在网络产品中,这可能代表对20%的用户、客户、活动、产品或过程的定位,可能为你带来80%的利润。所以我们需要极度关注这部分群体。

 

·FITT's定律

在定位时存在存在一个速度和精度的平衡,目标越小和距离越远需要的时间越久。这点在鼠标动作上表现明显,即内容越容易被点击到,它的点击率越高。

 

·倒金字塔法则

倒金字塔是把摘要放在文章前面的一种写作方法。其写作方式一般是结论——关键词——细节(背景资料)——正文。

由于网络用户需要即时的满足,这种方法是十分有利于用户体验的提升。

 

 

【总结】

·导航菜单的元素应该限制在7个以内。每块区域相同样式最多能保持5—9次的重复。

·系统反馈时间应该在2秒以内。

·控制信息的层级,通过3次点击就能达到目标。比如:少用数字、大字体或者粗字体,信息保持在三个层次:标题、子标题和正文。

·最能产生价值的用户一般比较少,关注他们的需求。

·内容越容易点击,它的点击率越高。可以考虑增加点击区域的大小,色彩和形状。

·倒金字塔的写作方法,适合网络的传播。

 

 

2010年12月13日

设计思维-人文关怀下的设计细节

d469c1fa422c50347a6eb461794a206d - 设计思维-人文关怀下的设计细节

  引言:人文关怀在体验日上成为众人津津乐道的一个话题,可是回看国内诸多网站,能真正做到人文关怀的又有几个呢?腾讯带来的这一个议题,真的值得我们深思......或许设计应该承担更多的东西.......

 

弱势群体网络使用情况的现状:

·盲人:约有500万人,其中弱视者1500万人。(净人数,非上网人数)

·中老人年:2898万人使用网络,约占上网总人数的6.9%。

·儿童:1300万人使用网络,约占上网总人数的31%。

3181417a11911026498c4cb388c59643 - 设计思维-人文关怀下的设计细节

 

我们能做什么:

腾讯给出的建议是从视觉声音认知理解以及环境的角度全方位的体现设计的人文关怀,不过这对于大多数公司来说,实际可操作性比较小。或许,我们应该集中精力关注这四个角度中某一个点,对于成本和预算相对应比较薄弱的我们可能是比较好的做法。

 

从视觉的角度出发,我们该做什么:

· 字号较大的字体: 主流网站基本都采用了14px作为主要大小,辅助信息则依然延用12px。传统出版物的字体字号要依目标读者的年龄特点和实际用途来确定。

 

· 文字与背景间颜色对比度强:按视觉卫生的医学原则来说,白底黑字是最佳的颜色搭配或者。它能有效的减轻阅读者的眼睛疲劳、保护视力。当然选择80%以上的黑色同样也是可行的。同时尽量少用容易引起眼睛疲劳的暖色或者与背景反差较小的颜色

9428c1dade48f82f3643e8166ad95549 - 设计思维-人文关怀下的设计细节

 

· 选择合适的行距与边距:如果行距过宽,上下文难以连接延续,给人以脱节之感;如果行距过窄,上下文字就会互相干扰,影响阅读的流畅性,容易产生拥挤感和疲劳感。阅读的流畅度除了行距的设置外,边距(margin或padding)是一个重要的评判指数。

标题文字的行距最小应该大于字体高度的50,最大不应大于字体高度的150%,这样看起来才比较舒适。当然,这也要结合字体来具体分析。另外,栏目与栏目的间距(或称其为边距)应比标题与正文的行距大,

 

· 简单且清晰功能设计:其实用户都是很忙,他们会以跳跃性的操作寻找所需要的功能,所以应该将核心功能放在清晰的位置,对这些功能所在的区域可以突出表现。

ad6137400dbb8f5f9160e10a631f61b0 - 设计思维-人文关怀下的设计细节

醒目的提醒标题,大而明显的按钮,

    · 温馨的操作提醒:用户希望每一步操作都能得到即时反馈。

876ec90b6915591a7f898ff05493aac7 - 设计思维-人文关怀下的设计细节 友好且亲切即时的反馈,让网站不再冰冷

 

小结:

在人文关怀角度出发,提出了视觉设计上改善几个点:
 ● 字号较大且清晰的字体;
● 文字与背景间颜色对比度强;
● 选择合适的行距与边距;
● 简单且清晰功能设计;
● 温馨的操作提醒;

 

参考资料:

·设计中的人文关怀

·版式设计心得

·轻设计,让网站灵敏轻便的6个技巧

·别让妈妈生气——浅谈长者用户

_________________________________
Copyright © 2015-2018 IMITEN.COM.  粤ICP备15075518号