存档: ‘视觉’ 分类

网页设计师之我见

4 条评论 2010年5月25日

网页设计师之我见
入行近3年,听了很多,见了一些,也有了一些粗糙的想法。

一些过程 

1、学校里的另类:读得专业五花八门, 工业设计, 视觉设计算是比较沾边了。大学里很难学到实际可操作技能,所以“正经”课一般很马虎, 沉静在自己的世界里。

2、实习期的迷茫:能进大公说明你有一定的实力, 运气可能也是一部分。一般是创业公司, 企业建站,批量化生产的需求, 期间更多是加深对美工的认识, 软件技能或许会有质的提高。

3、毕业后的蹉跎:能坚持到现在还在做的话, 应该不是业余爱好者, 会抱着满腔热血,意淫自己能在互联网刻上自己的大名。但理想跟现实总有差距的,拿着糊口的工资,又要设计, 又要切割,还要接受公司各阶层的指导。会怀疑自己的能力,怀疑是否进错了这个行业。

4、转变:工作2-3年后是一个分水岭,你会考虑自己的职业规划,或转行,或就近的转岗,或继续奋斗在设计的路上。 有了一些对设计的沉淀,有了一些自己对产品的看法,有了些对生活的思考,总之在成长。  

以上更多是本人的一些“道听途说 ”请勿联想。

 

一些变化

 1、称呼变化 :早期的美工,网页设计师,UI设计师,视觉设计师,交互设计师,最近听到比较多的是用户体验师。很多公司为了跟进时代的变化,名称也会做相应的调整, 但杯具的是更多只是形式。

2、工作内容变化:早期套模板,简单的切图就可以混日子,但现在不行了,你要关注用户,关注产品形态,关注用户体验。 

但很多还没变,如社会认可度(介绍自己是美工比较容易让人理解),薪资待遇(行业整体)…

 

一些毛病

设计前的功课不到位 

设计师负责的表现层是用户感官上最直接的体验。如果设计师理解有误或有变差,都会造成产品的打折,传达的信息不到位。所以在前期产品的需求分析和规划阶段, 设计师一般都应参与进来,融入到产品的开发流程,而不是自己定位成美工的角色。 

感性的设计 

设计师设计时会不知不觉融入自己的情感,倾向使用个人喜欢的表现形式,慢慢的形成所谓个人风格。但对于产品来说,最终的受众是我们的用户,而不是设计师本人。所以应该时刻做到“心存用户”,感知用户所期待的。 

缺乏产品意识

产品是有生命力,是有情感,是需要满足用户的需求。而设计师会经常陷于单个页面的表现,把所谓潮流的表现形式加强到自己的设计稿里,而忽视用户使用场景,忽视产品所要表达的核心功能,造成形式与功能的脱节。

以上是本人近期在工作中的体会。

产品开发中的视觉设计

5 条评论 2009年12月1日

产品开发中的视觉设计

视觉设计是产品开发过程中的一个重要的环节,也是用户最直接感观的。

个人根据设计的过程做了一个简单的分析。

1.设计前

了解产品:你可能是流水式的下单作业, 也有可能是项目制的作业,但对产品的理解是做好设计的前提。

竞品分析:主要是从交互方式、视觉层面的吸取。平时多看,多积累,动手时脑海里才有活跃的思绪。

2.设计中

对于视觉方面,很多公司都有一套自己的规范来维持风格的一致性,来加深品牌识别度和减少用户的认识成本。所以这里对视觉元素的具体表现不加以阐述,主要是写一下自己工作中的体会。

颜色:根据产品的性质,用户的人群定位, 还有所处整个体系的位置等,来筛选确定颜色的方案。如果页面很跳, 不“和谐”,加点灰色或许会有惊喜的改观。分享几个颜色工具:Color scheme    COLOURlovers  

文字:一般是12px、14px宋体来做正文,黑体,微软雅黑来做标题或需突出的信息。数字时可以考虑用英文字体,比中文的舒服。这时需要考虑留白、层次分明、与图片的混排、还有整齐,这些都有利于阅读,信息的摄取。 

按钮:如果需要突出可以考虑与主色相对应的对比色,设计时需作出鼠标的各种交互效果。 

布局的分割:个人是把它分为色块和带标题栏的线框这两种方式。国内的大部分网站很多是带标题栏的线框模式再在局部加点色块来调和。 

整体:个人是理解为各个视觉元素组合在一起形成的页面后感受。如:清爽、大气、简洁、平淡。在选取视觉呈现形式上都要往整体去靠, 才可以体现出中心的关键词印象。“想法”太多页面就会“三不像” 

把页面做成“动”的:我想设计师不仅仅是做美化的任务,应该在设计时考虑到各种交互状态效果:页面加载、鼠标的操作、Tab、反馈、浮层…所以在高保真效果图的交付物里,应该包括交互状态的页面。 

3.设计后

检查html页面是否还原效果图的原貌;

上线后跟踪用户的反馈,配合相关人员进行修改迭代。

最后推荐两本书:

《写给大家看的设计书》    

《Web视觉设计》

或许会有一些收益

浅析网站中的隐喻设计

6 条评论 2009年11月17日

1.     定义: 

 百度百科: 隐喻是在彼类事物的暗示下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为。 不仅仅是一种视觉形象语言, 更重要的是一种视觉设计思维。

 好处:易识别, 易记忆, 通用性强 

 2.       隐喻的分类:   

具体隐喻:从隐喻对象的“物“出发,

举例:图标 

 

结构性隐喻:信息架构, 交互流程 

19楼:真实、丰富、温暖的网上城市,网上银行, 财富系统,楼层,不动产

全国首创的同时拥有网络公共会所、个人空间、商业区、互助公社等社区功能的全新网上城市 

 

功能性隐喻: 从隐喻对象的“能”角度出发, 把你在计算机环境下的所作的工作同你在其他环境下所作的工作联系起来。

举例:   

2

语义:最高的,最上的及最高最上的部分:~点。头~。山~。~巅。~尖。

支持,赞同和欣赏的意思。多见于跟帖,表示对发贴者的观点理解和赞同。 

后来各大论坛逐渐完善了精品帖子置顶的技术,导致字又具备了一种推荐阅读的意思。

举例:19楼bb大卖场的千金鼎服务 3

 

3.具体的应用(具体的隐喻)

 

图标:已经被大家认知

现实的事物
图标
表达信息
信封
 4
邮箱, 联系
文件夹
 5
文件
放大镜
 6
搜索
房屋
 
首页

 

导航:  

歌唱比赛的专题网站, 运用了舞台的铁架 

9 

 

唱片公司的网站, 导航借用现实生活中的事物

 8

 

肌理:

中国元素的水墨

 10

 

 

布局(视觉结构) 

 卖T恤的电子商务网站

 12

  

4.如何使用

 

a.选择合适的隐喻对象

根据用户的需求,产品的定位,建立起相应的功能模块, 然后联想现实世界中的事物(包括具体的和抽象的)

 

b.要遵循一致性的原则

 

c.避免滥用隐喻

不要为实现某种功能而强制用隐喻这种方法,也不要强制某种隐喻去适应某种功能

13

   图标被毫无节制的滥用,那些原本有价值的图标被淹没在众多“网页设计素材”中。 把图标当作页面上的装饰元素