网站UI视觉设计入门教程.ppt
LOGO由NordriDesign提供Web设计中，什么最重要？毫无疑问，内容！但是，能够在一瞬间，抓住访问者眼球的是什么？是外观！web-视觉设计视觉设计视觉设计LOGOPage 2引言讨论的主题：web的视觉设计问题讨论目的：有助于我们了解web设计中的视觉设计问题，加强我们的学习交流，更好的运用web中的视 -觉设计。视觉设计视觉设计LOGOPage 3先来看看视觉设计与其它web设计的关系视觉设计视觉设计视觉设计的重要性！视觉设计的重要性！LOGOPage 4视觉设计的定义视觉设计是指：针对眼睛官能的主观形式 的表现手段和结果。“爱美之心人皆有之”，在Web领域也不例外。无论网站界面采用什么样的设计风格，或简约、明快，或复杂、精致，大家都喜欢井然有序、外观漂亮的网站。漂亮的外观，首先给访问者一个不错的第一印象。视觉设计视觉设计LOGOPage 5当谈到网站的视觉设计这个问题时，有两种截然相反的观点。一：可用性倡导者们，一直认为，网站要便于使用，而非漂亮。jakob nielsen认为，几乎所有为实现视觉效果而做的事情，都会对 可用性产生妨碍。不过在过去几年，可用性倡导者们的防线，以有松动。视觉设计视觉设计LOGOPage 6二：美观性反对的观点则将网站提升到“体验”的高度。因此网站应该利用web这种媒介的独特性（它扩大媒介的限制），刺激、吸引、迷惑、愉悦、迷住访问者。出色的视觉设计，能够赋予意义，提供语境，唤起情感。它可激起访问者的兴趣，并使其相信网站的专业性和可靠性。它可以确定焦点，设立重点，建立网站元素之间的关系，并指导用户完成任务。但是，如果不能妥善处理，可能会交付一个华丽空虚的网站。视觉设计视觉设计LOGOPage 7对使用web的人来说，争论双方的观点既非完全错误，也非完全正确。事实上可用性与美观性在web上是不冲突的。我们能够同时拥有美感与功能性。让我们尽全力平衡形式与功能。如果说，可用性因素使网站具有功能性，视觉设计使网站令人难忘，那么，我们的目标是，二者兼具。视觉设计视觉设计LOGOPage 8那么应该怎样做好web网站的视觉设计呢？视觉设计视觉设计LOGOPage 9视觉设计视觉设计传播产品理念传播产品理念视觉设计视觉设计干净，简洁，工具化干净，简洁，工具化视觉设计视觉设计重点突出重点突出视觉设计视觉设计防止不恰当的低龄化防止不恰当的低龄化视觉设计视觉设计制定规范，维持统一制定规范，维持统一视觉设计视觉设计从五个方面做好视觉设计从五个方面做好视觉设计LOGOPage 10 1、视觉设计传播产品理念只有当我们对产品抱有一个完美的理念和愿景的时候，我们才能做出优美的设计来体现理念“QQ邮箱，常联系”是腾讯的愿景。这个愿景需要完美的产品设计，优秀的技术实现，和优质运营来达到“封面画和选词，呼应邮件含义，淡雅而不张扬”视觉设计视觉设计LOGOPage 11 传播产品理念找对你的感觉。视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。视觉设计的风格是否准确关系着设计的成败。那么一个产品的视觉设计也同样需要一个对的定位，最终以合适的视觉表现出来。我们不妨以几种聊天软件来做个的比较，从中窥视一点设计定位的视觉意 味。看下面一组图：视觉设计视觉设计LOGOPage 12视觉设计视觉设计 传播产品理念图一：图一：QQ 的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活泼的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活泼的色彩。的色彩。图二、图三：图二、图三：msn 和和TM 的视觉定位是以办公室工作人员为定位，所以它的视觉使用的视觉定位是以办公室工作人员为定位，所以它的视觉使用比较稳定和平静的色彩。比较稳定和平静的色彩。LOGOPage 13品牌：塑造身份视觉设计的一个任务就是：确保网站具有视觉一致性。所有页面看起来，就像是从一个模子里刻出来的一样。它们必须有相同的logo,相同的配色方案，以及（对大部分而言）相同的布局。访问者看到一个页面，就应该可以立即识别出其他的所有页面。除此之外，这种一致的外观和感觉，应支持网站的“品牌”。什么叫品牌？它是一个产品或整个组织给人的整体映象。它包括logo、包装、广告、视觉呈现、当然还有网站本身。令人映象深刻的品牌，具有一种身份，个性，以及自身的特色，具有能够吸引目标，与众不同的外观和感受。更为重要的是品牌令人难以忘记。传播产品理念传播产品理念视觉设计视觉设计LOGOPage 142、视觉设计干净，简洁，工具化“推广”很重要，“简洁”也很重要，因此舍“推广”而取“简洁”语音邮箱放到邮箱登录后的邮箱首页右上角，但太重hardsell了，会影响一些速度和简洁性不多用一个图片在好友Qzone文章的摘要前加头像，感觉会破坏阅读感（容易吸引眼球到头像而非文章），而从关注好友的角度，头像能突出好友。但给用户2个图片，用户看哪个呢？工具化设计意味着清晰的逻辑和操作。不是内容越多越好，是越简单越好。视觉设计视觉设计LOGOPage 15干净，简洁，工具化视觉结构和层级关系。页面表现的层级关系和结构是用视觉的形式表现出来的，比如包含关系及业务的先后顺序的表现。让用户通过视觉就能够直接的明白应该先看什么，后看什么，元素时间是什么关系等等。让我们来看下面的两张图：视觉设计视觉设计LOGOPage 16wordpress 博客的后台管理界面，我们可以看到清博客的后台管理界面，我们可以看到清晰的从属关系：管理晰的从属关系：管理文章文章文章内的修改区域。文章内的修改区域。干净，简洁，工具化干净，简洁，工具化视觉设计视觉设计LOGOPage 17vista 系统的界面：三个区域的层级关系一目了然系统的界面：三个区域的层级关系一目了然，“1”区要高区要高出出“2”区域，区域，“2”区域要比区域要比“3”区域的颜色深，这样整体的区域的颜色深，这样整体的从属关系就很明显。从属关系就很明显。干净，简洁，工具化视觉设计视觉设计LOGOPage 18是什么就是什么，图形达意尽量明确。什么样子代表什么都有其特定的视觉暗示，如果不是游戏，我们应该尽量避免和用户捉迷藏。例如应该用页签来表现的从属 关系，我们不应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布局因素之外，图标的表达是视觉中的一大块，好的图形表达可以帮助用户直观 感受功能，缩短操作时间，提高效率；不过表达不好可就麻烦了，用户可能要歪着脑袋想半天！干净，简洁，工具化视觉设计视觉设计LOGOPage 19箭头所指之处为刷新图标，上面那个刷新图为原来图标，假如是做成下面箭头所指之处为刷新图标，上面那个刷新图为原来图标，假如是做成下面这个样子就会和后退图标显得太象了，意思区别不是太明确，会造成误解。这个样子就会和后退图标显得太象了，意思区别不是太明确，会造成误解。就准确性而言，上面那个刷新图标更让客户容易接受。就准确性而言，上面那个刷新图标更让客户容易接受。干净，简洁，工具化视觉设计视觉设计LOGOPage 20明确你的视觉状态理想状态是：用户的每个操作行为都应该有相 应的视觉反馈，比如有没有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的感 觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意的，因为它默默的达到了设计的 目的。站在是否可用的角度分有：可用状态、不可用状态.干净，简洁，工具化视觉设计视觉设计LOGOPage 21请用准确的视觉来辅助信息反馈。我们用来对应的视觉辅助图要力求表现每种情况的准确含义。当然，为了增加趣味性，我们可以允许任意表现形式或表情的存在，前提是你的表达要准确，不要有歧义，否则使用者的第一反映可能不是你要表现的，由于理解的歧义所带来的损失和挫折感会让用户感到厌恶。通过下面几张图我们来对比一下：干净，简洁，工具化干净，简洁，工具化视觉设计视觉设计LOGOPage 22下面哪一个更能体现出“对不起，出错啦！”干净，简洁，工具化干净，简洁，工具化视觉设计视觉设计LOGOPage 23第二张图的淘气鬼脸图，我以为我成功了；第三张图的表 现让我以为是在警告。第四张图如果你犯错的时候出现了，你会想到什么？只有第一张图让我意识到我失败了，并且有趣味性。由此可见：趣味性和准确性并不矛盾，我们在设计趣味性的同时，别忽略设计的准确性。干净，简洁，工具化干净，简洁，工具化视觉设计视觉设计LOGOPage 243、视觉设计制定规范，维持统一文字使用要规范，语法，大小，颜色，大小写都需要注意能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话每个概念都只有唯一一种表达。如”VIP”的概念能用一种字体颜色的，不多用一种颜色能用一种字体大小的，不多用一种大小用标准组件能用标准控件的，不自己画控件能用文字的，不用图片（加图片是要申请的）保持尽可能少的格式式样维持统一就算字体和行间距等小细节都应该关注到视觉设计视觉设计LOGOPage 254、视觉设计重点突出每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。左边的设计排版不对，有一横条的压着的情况黄色块就不能加框，视觉会很繁杂看着不舒服，句号也是多余的原来方案 目前方案视觉设计视觉设计Pony：在设置了独立密码的情况下,当登陆到需要输入独立密码时,总是先出来输入框,此时已可输入,我经常是立刻输入,但打了几个字母后上面,才瞬间出现上面的黄色提醒请输入独立保护密码,而会导致输入框位置立刻下压,比较影响输入.最好能改一改html里的结构,能够快速让人立刻输入(越快越好)的基础上,其他显示的可以慢些load到但不应影响其他部件的改变.LOGOPage 265、视觉设计防止不恰当的低龄化在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化。当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成熟”源自合理的设计，“低龄”源自不合常理的设计。视觉设计视觉设计不恰当的低龄化LOGOPage 27小结传播产品理念大气成熟，干净整洁，工具化规范与统一重点突出防止不恰当的低龄化视觉设计视觉设计LOGOPage 28案例分析http:/视觉设计视觉设计我们的案例是从整体视觉这块来分析我们的案例是从整体视觉这块来分析LOGOPage 29不同点页面导航页面导航n饭桶网：无导航条，有标签饭桶网：无导航条，有标签n大众点评网：有导航条，有标签大众点评网：有导航条，有标签视觉设计视觉设计大众点评网大众点评网饭桶网饭桶网LOGOPage 30广告广告n大众点评网：有广告，但广告能大众点评网：有广告，但广告能避免干扰视线，避免喧宾夺主，避免干扰视线，避免喧宾夺主，广告图片符合整体风格广告图片符合整体风格 n饭桶网：有广告，且广告干扰视饭桶网：有广告，且广告干扰视线，喧宾夺主线，喧宾夺主 视觉设计视觉设计大众点评网大众点评网饭桶网饭桶网不同点不同点LOGOPage 31网站地图网站地图 饭桶网：为用户提供清晰的网站指引。饭桶网：为用户提供清晰的网站指引。大众点评网：地图更加具体。大众点评网：地图更加具体。视觉设计视觉设计大众点评网大众点评网饭桶网饭桶网不同点不同点LOGOPage 32新开窗口新开窗口 n尽量减少新开的窗口，以避免开尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口过多的无效窗口，设置弹出窗口的关闭功能。的关闭功能。n显然大众点评网就比饭桶网做的显然大众点评网就比饭桶网做的好。好。视觉设计视觉设计大众点评网大众点评网饭桶网饭桶网不同点不同点LOGOPage 33栏目的层级栏目的层级 n饭桶网：导航不清晰饭桶网：导航不清晰，栏目没超栏目没超过过3层。层。n大众点评网：导航清晰、栏目超大众点评网：导航清晰、栏目超过过3层。层。视觉设计视觉设计不同点不同点内容的原创性内容的原创性 公司介绍公司介绍 n饭桶网：有小部分内容为转载的饭桶网：有小部分内容为转载的 资讯资讯 n大众点评网：尽量多采用原创性大众点评网：尽量多采用原创性内容，以确保内容的可读性内容，以确保内容的可读性 饭桶网：除了以下的信息都有以外还有饭桶网：除了以下的信息都有以外还有 视频介绍。视频介绍。大众点评网：真实可靠的信息发布，包大众点评网：真实可靠的信息发布，包 括公司规模、发展状况、括公司规模、发展状况、公司资质等公司资质等 好友推荐好友推荐n饭桶网：未提供饭桶网：未提供n大众点评网：提供邮件推荐功能大众点评网：提供邮件推荐功能 LOGOPage 34 无论用户浏览到哪一个层级，哪一个页无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。面，都可以清楚知道看到该页面的路径。视觉设计视觉设计设计风格设计风格符合用户的审美习惯，并具有一定的引导性。符合用户的审美习惯，并具有一定的引导性。确保确保logo的保护空间，确保品牌的清晰展示的保护空间，确保品牌的清晰展示而又不占据过分空间。而又不占据过分空间。网站网站LOGO页面速度页面速度重点突出，主次分明，图文并茂。与企重点突出，主次分明，图文并茂。与企业的营销目标相结合，将用户最感兴趣的，业的营销目标相结合，将用户最感兴趣的，最具有销售力的信息放置在最重要的位置。最具有销售力的信息放置在最重要的位置。与品牌整体形象相统一，主色调辅助色与品牌整体形象相统一，主色调辅助色不超过三种颜色。以恰当的色彩明度和不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。亮度，确保浏览者的浏览舒适度。有图片，且图片比例协调，不变形，有图片，且图片比例协调，不变形，图片清晰图片清晰 显示路径显示路径 图片展示图片展示页面色彩页面色彩页面布局页面布局相同点相同点LOGOPage 35判断一个网站的好坏，要从太多方面分析，以上分析这只是其中一个小小的方面。如有不同见解，可予以提出。共同进步。视觉设计视觉设计谢谢观赏谢谢观赏 多多指教多多指教
