http://blog.a-feng.com/index.php zh-cn http://blog.a-feng.com/post/91/ 阿枫 <448734983@qq.com> Tue, 29 Jun 2010 01:35:06 +0000 http://blog.a-feng.com/post/91/
　　一个网站要想吸引用户，给用户带来好的体验，首先要有一个好的设计风格。因为浏览者刚刚接触到一个网站时，他对网站的第一印象很大程度上是由网站的设计风格所决定的。如果浏览者感觉整个网站的风格很有特色，就会很有兴趣继续浏览，从而对网站有一个更加深入和全面的了解。反之，如果网站设计地非常乏味，浏览者根本不会深入浏览，而是直接把网站关闭了。所以一个好的网站设计风格是至关重要的。

　　网站的设计风格主要通过以下三个方面来体现：网页的配色、网页的版式和网页对于主题的表现。

　　1、网页的配色

　　配色需要以良好的色彩感知能力作为基础，并且色彩的选取要符合网站的定位。岳浩总结了关于网站配色的两大原则：

　　(1)大和谐，小对比

　　大和谐即整个页面的色彩效果是统一的。可以通过采用近似色或者同一视觉感的颜色来实现。比如360安全中心网站，就大量使用了近似色，通过绿、浅绿、深绿、绿黄来对整个页面的色彩进行搭配。而像土红、土蓝、土黄虽然不是近似色，但是却给人们带来一种共同的视觉感受。小对比，就是给浏览者准确信息的地方要对比，而且对比要强烈，这样很容易对重点内容进行突出。可以采用色调的对比和亮度的对比。如果采用互补色，就会产生很明显的对比效果。而像黑、白、灰这样的中性色主要用于不同颜色之间的过渡和柔和。

　　(2)同一页面的中的色彩不要超出三种

　　一个页面要有统一的配色风格，则使用的色彩不要超出三种(不包括黑、白、灰)。在一个页面中按色彩的功能来分，有主色、辅助色和点缀色三种。网站的主色可以根据所属的行业来确定，也可以根据企业的标志或VI手册来确定。而辅助色应遵循大和谐的原则来进行确定，点缀色应遵循小对比的原则来进行确定。

　　2、网页的版式

　　网页的版式，即网页的布局、网页元素的搭配。对于一篇文章，好的排版可以使脉络清晰，便于读者的阅读和理解。网页也是如此，好的版式能够给浏览者带来好的访问体验，也能有效地对网站重点进行突出。"网站都提供哪些内容?哪些又是重点?"，一个设计合理的版式能够轻松地替用户解答这些问题。

　　网页的版式主要有两种基础结构，一种是栏式结构，另一种是区域结构。三栏是最为常见的分栏，能够体现出一种大气的感觉。两栏给人的感觉比较开阔，适用于传达一些具有意境的内容。而影响栏式结构选择的另一个重要因素就是网站内容的多少，如果网站内容较少，选择两栏就比较合适，如果网站内容较多，就会选取三栏甚至四栏。区域结构是把页面分成了若干份，包括对页面的一些不规则的划分。因为区域结构非常灵活，可以把整个页面划分成多个不规则或规则的区域，因此可以树立鲜明的网站形象，非常适合娱乐等个性化内容的展示。

　　一个页面中最为核心的内容，我们可以放在网页左上方的视觉焦点来突出。像一些资讯类网站，往往会在此位置放置幻灯片新闻来展示推荐内容。页面的布局还应保持整体的均衡，避免给人一种头重脚轻的感觉。页面中图片的选择，以及图片和文字的搭配，也需要进行精心的设计。

　　3、网页对于主题的表现

　　一个网页的设计风格一定要和表现的主题具有相关性。比如一家奶粉企业，他的主要消费者是婴幼儿，那么网站的设计风格就应该是生动可爱、富有趣味的。而一家生产电子产品的企业，他的网站设计风格就应该给人一种理性、科技的感觉。只有贴切的风格才能使主题具有更好的表现力。而网站的整体风格是由色彩和版式综合运用来实现的，所以还是要根据表现的主题来选择合理的色彩与版式。

　　二、功能上的用户体验

　　所谓功能上的用户体验，主要是指网站的各种功能是否真正的易用、好用。对于一个网站来说，操作的简便性、功能的易用性是最为重要的。不要让用户花时间去考虑某个功能该如何实现，因为不是每个用户都愿意花时间去寻找答案的。岳浩觉得网站应该达到一种这样的效果，当用户看到一个页面时，这个页面应该是不言而喻，一目了然，自我解释的，不需要花费精力进行思考。

　　以下和大家举一些具体的例子来说明网站的易用性，其中一些好的方法可以在功能上增强用户体验，从而使得网站变得更加易用、好用。

　　1、越重要的内容越突出。对于重要的标题，可以使字体变得更大、更粗，颜色也更为特别。把相关的内容放在一起，便于用户对同一类信息的查找和了解。

　　2、明显标识可以点击的地方。一个页面中的链接或按钮应该是显而易见的，不要让用户花上几秒钟的时间去思考某个东西是否能点击。

　　3、制作精准、清晰的导航。在最短的时间内指引用户进入他最想看到的内容页面，对于有需求的用户是非常重要的。所以网站设计者要根据网站的内容重点和用户最多浏览的内容设置精准的导航。对于一个页面较多，层次比较复杂的网站，建议使用面包屑导航来明确用户当前的浏览位置。让用户随时知道自己身在网站何处，对于用户体验来说是非常重要的。

　　　　4、搜索框的设计要方便用户。不要添加太多的搜索分类，让用户选择从哪个类别中搜索，因为有时候用户并不能确定他所需要的东西是属于网站上的哪个类别，这一点在网上商城中尤为明显。好的搜索应该拥有智能提示的功能，当用户输入一个简短的词语后，搜索会为其推荐用户搜索最多、最具相关性的搜索词。百度搜索的手写功能也是一个亮点，为不会打字的老年人提供了很大的方便，满足了特定人群的需求。

　　5、每个页面都应该有一个页面名称。一个突出显示的页面名称，能够让用户很容易知道自己所在的位置，并且能对该页面所包含的内容有一个大致的了解。页面名称最好和点击进入这个页面的链接文字相一致。

　　6、为网站设计一个好的口号，并出现在页面的显著位置。口号是对于整个网站的描述。一个好的口号应该能表述出网站的特点和显而易见的好处。这样口号不仅能给用户留下深刻的印象，还能树立网站的品牌形象。

　　三、内容上的用户体验

　　网站的内容建设要想获得良好的用户体验，应该始终贯彻一个灵魂思想，就是我们的网站要么能够帮助用户解决问题，要么能使用户得到快乐。因为广大的网民上网，主要的目的无非有两个，一个是为了寻找自己需要的信息，另一个就是为了娱乐。只有抓了用户的这两个需求，才能带来良好的用户体验。

　　资讯站、行业站和企业站的主要目的就是为了帮助用户解决问题。这类网站一定要为用户提供有价值的东西，帮助用户快速找到自己需要的信息。视频站、SNS等网站的主要目的就是为了让用户得到快乐，那么如何为网民提供有趣的内容、如何实现网民之间的互动就成为了关键。关于内容的策划，岳浩有以下几个建议：

　　1、对用户的需求进行分析，根据用户需求策划精准的内容。网站应该对用户的整体情况有所了解，包括用户的年龄结构、职业、收入和他们最为关注的内容。针对他们最为关注的内容和需求，我们再来进行精心策划和编排内容。优势往往会在全面中变得平庸，要想获得优势，我们一定要为用户提供精准的内容。

　　2、网站的内容要有差异化，这样才能在竞争中取胜。因为互联网时代是一个信息爆炸的时代，同类型的网站已经非常普遍，要想从这些网站中脱颖而出，就要提供给用户独特的内容。要实现这一目标，一是需要大量优质的原创内容，二是需要对采集的信息进行精编。网站只有提供新鲜、优质的内容，才会得到用户真正的认可。精心策划的内容也能够大大增加用户对网站品牌的信任度，从而建立良好的用户黏性。

　　3、让用户参与到内容建设中来。网易的文章之所以受到用户的青睐，就是因为很多文章有众多网友参与评论。在各大网上商城，众多网友对于某一产品的评论也是影响用户购买的重要因素。来源于网友的内容，往往更容易受到网友的青睐。

Tags - 网页设计 , 用户体验 , 网站设计 ]]> http://blog.a-feng.com/post/82/ 阿枫 <448734983@qq.com> Wed, 31 Mar 2010 02:06:23 +0000 http://blog.a-feng.com/post/82/ 二、归纳阶段-(分析所获信息以深入了解项目)
三、准备阶段-(准备设计所需的图、文资料)
四、设计阶段-(设计页面)



一、沟通阶段-(获取项目信息)

这里讲的沟通,其目的在于获取项目信息,给下一阶段的"信息归纳"提供必要的信息源。
通常我会索取以下信息:
·项目基本信息(项目主要的目的、项目的侧重点、项目期限等等)
·客户公司产品信息 (如产品定位、产品卖点、消费人群、经营范围等等,这点对于设计具体产品项目时,更为重要!)
·客户公司基本信息 (如公司简介、公司规模、公司性质等等)
·项目委托人个人审美倾向(委托人对网页风格的预期、委托人艺术审美取向等等)

在沟通方式上,不同性质的客户略有不同。我把之前的客户按客户性质分成两大类:

一类是设计类公司的外包业务,因为经过转手,这种形式的项目你往往不能与项目委托人进行直接沟通,信息传递过程中的误读也就在所难免。这类客户性质的业务,一般会有明确的网站策划,项目Manager也有一定"经验"。可能正因为"便利"太多,做这类项目时往往有放不开手脚的感觉,而且项目负责方一般都比较强势,所以在沟通上也自然就比较被动。

另一类就是企业性质的直接需求,我个人更倾向于接手这类项目。这类客户通常深谙设计之于品牌的意义,也大都会让设计师放手去做,此外在沟通、意见反馈上效率也会更高!所以在沟通方面我也就比较主动,站在客户、客户产品的立场思考问题也就是必须的。毕竟不能辜负客户对咱们的信任,对吧?


二、归纳阶段-(分析所获信息以深入了解项目)

当获取到项目信息之后,你会发现这些信息显得比较零散,所以接下来有必要将这些信息进行系统的整理,然后综合起来分析。经过系统分析之后,后期设计上的诸多雏形会在此阶段形成,具体的比如说,网页的风格、配色、素材、布局等等。

写到这里,或许有同学会问,我要怎么样去做归纳、分析,才能得出适宜的分析结果呢?对于干设计的我们,我想这个问题确实是普遍存在的!之前的线上交流,不少朋友也有反映到:"在拿到项目信息之后,头脑依旧很茫然,找不到一个适合的解决方案。"

对于这种茫然,首先我们应该反问自己,所需的项目信息我都索取够了吗?项目信息我都仔细去解读了吗?如果我们回答都是肯定的,也就等于说,在解读项目信息方面,我们仍需努力!其实当我们试着去解读、分析项目信息,你会发现,我们经常遇到的风格问题、配色问题,答案就隐藏在这些项目信息里边。

说到这,个人建议大伙儿在提升软件技术的同时,可以抽时间多了解了解哲学、心理学、营销学方面的东东。因为我们不得不承认,商业设计终究还得回归到人的因素上来,你的设计是给人看的,客户看、客户产品目标消费人群看、设计圈子的人看......所以,我们的设计想要得到认可,同时促进产品销售,就们就还真得跳来想些事儿。





三、准备阶段-(准备设计所需的图、文资料)
综合分析之后,紧接着我会准备好设计时可能会用到的图、文资料。
图片主要包括客户公司的图片、产品图片、模特图片等等。一般情况是,客户会提供部分图片,更多的,图片我会去素材网站找找。
文案主要包括网页广告标语、导航文案、产品描述等等。有做网站策划的客户,这些文案大都会提供,如果没做策划的客户,我会跟客户负责人沟通定出。



四、设计阶段-(设计页面)
最后一个阶段,用一个比喻容易说明问题。
即如果把网页设计简单的比作烹饪,这四个阶段也就是说这么几回事儿:1.顾客提出相关要求;2.店方去思考如何做出一道客户称道的佳肴3.店方准备好烹饪所需的材料;4.炒菜;
最后的炒菜,需要解决问题就是:在分析结果的指导下,怎么样去把材料变成一道色、香、味俱全的美味?推演到咱们网页设计上来说,就是这样一些工作:处理图片、细节、色彩、排版构成、用户体验等等。




Tags - 网页界面设计流程 ]]> http://blog.a-feng.com/post/79/ 阿枫 <448734983@qq.com> Sun, 07 Mar 2010 00:42:21 +0000 http://blog.a-feng.com/post/79/

基于jQuery下的
效果很好的一款相册
代码简单方便修改

点击这里下载文件

更多推荐：jQuery焦点图实用代码
               jquery的左右移动图片代码
               jquery幻灯广告代码
               jquery下拉菜单导航条代码
               jquery仿flash效果的菜单代码
               jQuery放大图片相册代码




Tags - jquery , 相册 ]]> http://blog.a-feng.com/post/70/ 阿枫 <448734983@qq.com> Tue, 05 Jan 2010 03:55:38 +0000 http://blog.a-feng.com/post/70/
jQuery焦点图片大切换
能适应各种需求的焦点图实用代码
大图切换很COOL
代码简单方便修改

点击这里下载文件


更多推荐：jquery的左右移动图片代码
               jquery幻灯广告代码
               jquery下拉菜单导航条代码
               jquery仿flash效果的菜单代码
               jQuery放大图片相册代码





Tags - jquery焦点图实用代码 ]]> http://blog.a-feng.com/post/58/ 阿枫 <448734983@qq.com> Tue, 08 Dec 2009 04:09:33 +0000 http://blog.a-feng.com/post/58/
基于jQuery仿flash效果放大图片相册代码
鼠标划过图片切换放大
切换效果很COOL
有点像flash效果

点击这里下载文件


更多推荐：jquery的左右移动图片代码
               jquery幻灯广告代码
               jquery下拉菜单导航条代码
               jquery仿flash效果的菜单代码也很实用
  





Tags - jquery相册代码 ]]> http://blog.a-feng.com/post/56/ 阿枫 <448734983@qq.com> Fri, 04 Dec 2009 14:19:46 +0000 http://blog.a-feng.com/post/56/
基于jquery的菜单代码
下拉区域可以自由定制
支持图片等
代码简单
修改方便

点击这里下载文件

更多推荐：jquery的左右移动图片代码
               jquery幻灯广告代码
               jquery仿flash效果的菜单代码也很实用




Tags - jquery代码 , 下拉菜单 ]]> http://blog.a-feng.com/post/55/ 阿枫 <448734983@qq.com> Thu, 03 Dec 2009 02:43:39 +0000 http://blog.a-feng.com/post/55/
jquery仿flash效果的菜单代码
切换效果非常COOL
使用修改方便
没有flash框架
不有SEOer去操心

点击这里下载文件

推荐：jquery的左右移动图片代码
     jquery幻灯广告代码也很实用




Tags - jquery代码 ]]> http://blog.a-feng.com/post/45/ 阿枫 <448734983@qq.com> Sat, 14 Nov 2009 04:51:20 +0000 http://blog.a-feng.com/post/45/ 采用js+css
代码简单
方便修改



还有是基于jQuery的左右移动图片代码
和jquery幻灯广告代码 这两个也不错。


点击这里下载文件




Tags - 阿枫 , a-feng , js代码 , 图片 , 代码 ]]> http://blog.a-feng.com/post/43/ 阿枫 <448734983@qq.com> Sun, 08 Nov 2009 13:24:48 +0000 http://blog.a-feng.com/post/43/ 为了得到更多的实践经验
我们几个人就着手对
喜之星商务酒店网站的建设
没有经过专业指导
什么都靠着我们自己来
现在开始学着写策划方案
还不是很了解策划方案
要注意到那些细节方面的内容
希望各位大虾们能指出批评
。。。
。。。
根据喜之星商务酒店提供的一些资料
还有站在用户的体验的角度
结合我们对酒店网站的分析
提出了网站策划的设计初稿
（喜之星商务酒店网站重点建设的订房系统）

网站策划方案（初稿）
前台
    1、酒店新闻
       a、酒店新闻包括标题、时间
    2、优惠活动（图片）
       a、图文结合
    3、酒店基本信息
       a、酒店订房电话
       b、电子地图（酒店地址位置）
       c、酒店简介
       d、客房、商务中心、休闲中心、餐厅介绍

订房系统
    1、会员系统
    2、会员注册
    3、注册是电话认证

后台
    1、会员管理
       a、酒店会员
       b、注册会员
    2、订房查询
    3、新闻发布
    4、酒店基本信息管理
    5、酒店介绍信息管理


订房系统流程分析图
PS：不断修改完善中...



Tags - 阿枫 , a-feng , 网站 , 设计 , 策划方案 ]]> http://blog.a-feng.com/post/42/ 阿枫 <448734983@qq.com> Fri, 06 Nov 2009 15:01:28 +0000 http://blog.a-feng.com/post/42/ 老师就布置一个作业
要求我们每个小组
设计三套瓶子方案
还要做市场调研
需求分析
创意说明
还有演讲说明

以下是我们设计的初稿
我们选择了设计香水瓶
不还有很多不足的地方
日后慢慢完美吧
请大家不要见怪哦


市场调研：
一、定位细分：
    香水的市场细分，主要争对性别、年龄、消费水平。香水暗含一个人的风格和生活品质和品位。
    市面上的香水瓶模各种各样，如人头，蝴蝶等等。瓶模包装构成香水品牌的一个重要因素。众多国际香水品牌畅销名品的瓶体本身就是美轮美奂的艺术品，它们的曲线、轮廓和色彩搭配能使其他工艺品相形见绌，对消费者有着强烈的诱惑力，为品牌创造了相当大的附加值。


二、设计方案：
1、女性市场：（女士型）
设计要求：S型\细身女性
    瓶子的整体风格体现了现代女性的曲线美，瓶盖的形状运用了皇冠的形状，突出现代女性高贵优雅的形象。同时线条流畅，造型优美是整个瓶子设计的一大重点，犹如一位身穿流畅时装的女郎，亭亭玉立，静泌中洋溢着东方的高雅与神韵。



2、男性市场：（男士型）
设计要求：简约大方
    如果说女人如烟，那么男人就是一枚极品的打火机！ 而我们这款男士香水就利用了这一点做创意。用简单的线条勾勒出一个像打火机造型的香水瓶子。同时象征着男人在任何艰难困苦的生存条件下，只要男人的兜里有一只打火机造型的香水，那么他们一定会点燃一线希望。



3、情侣市场（情侣型）
设计要求：以锁和钥匙为主题设计
   这套情侣瓶子采用了我们常用的锁和钥匙的图形结合，来表达情侣间的亲密关系。利用这个造型创造出来的香水瓶子更能体现出情侣间那淡淡的香水味相溶在一起，你中有我我中有你的最高境界。而且钥匙很容易就可以打开锁的心结，锁的心里也只能容纳下那把钥匙。符合年轻一代的需要。







Tags - 阿枫 , a-feng , 设计 , 瓶子 , 香水瓶 , 3dsmax ]]>