[画册设计欣赏][包装设计欣赏][包装设计欣赏][微信手机界面设计欣赏]
关键字&TAG聚合
[leomessi 作]
[约翰麦格雷戈 作]
Copyright CnWebShow
All Right Reserved.
互动联系方式：QQ:61674&&交流群：
中国网页设计秀为中国网站设计师、设计师联盟提供优秀的网页设计,平面设计,工业设计等方面的作品展示。免费提供网页设计教程,网站CMS源码,破解源码,免费微信源码
做最专业的设计服务网站,秀出自我，秀出精彩！中国设计秀，秀---无处不在！！
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "/h.js%3F0c12a7c47decd6fdd391ea7' type='text/javascript'%3E%3C/script%3E"));</script深圳-11月1日全国可收听 10月22日已结束上海
10月25日已结束
阅读（4421）
加入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品
交互设计从来都不是简单的事情。可靠的交互通常需要借助对用户行为的深入分析，然后有针对性的精心策划。可是随着新的技术和新的交互模式的不断涌现，事情就变得不是那么容易了。
其实大家遭遇的困境都很相似，用户已经很难被单纯炫酷的图片、流畅的悬停效果和出人意料的动效所打动，真正能让他们露出微笑的是持久、令人愉悦的交互设计和用户体验。如果你对于日常的设计中的常见的误区有所了解，自然会有意识地绕过这些坑。
为了更好的设计，我们为你简单总结了一下最常见的5种交互设计的误区。
1、过度的创意
网页设计师 绝对不缺少创意。我们希望借工作表达自己，也一直在试图寻找能让产品脱颖而出的优秀创意。但是当涉及到交互设计的时候，推陈出新并不一定总是好的，它甚至 会对你的网站和产品产生不利的影响。的确，许多用户渴求新鲜的创意，但是在操作和交互上却往往希望协调可控，所以他们更倾向于熟悉的交互。Etsy的创业 总监Randy曾经撰文探讨过这个问题，文中直言“设计师们不要在此（交互设计）自作聪明了！”在这篇文中，他详细解释了为什么你不应该走极端去设计充满大量创新交互的网页。
以为例子，漂亮的页面和柔和的音乐都非常的赞，但是用户进来之后会迟疑，想知道这个网站要如何操作。不要曲解我的意思，如果你是纯粹处于炫技，那么这种华丽而充满游戏性的网站绝对称得上是创意无限，但是对于普通用户而言，他们的直觉失去效果，茫然无措会成为网站浏览的障碍。
下面是另外一个案例，这个名为是为了说明冬季运动的危险的，整个网站的设计整洁，交互也直观。网站设计也有所创新，但是同时是以用户交互直觉为先决条件，以身临其境为目标。
2、令人迷惑的交互
“不要自作聪明”的规则也应当应用在导航设计上。一些设计师试图运用别具一格不同寻常的名称，以活动更富有实验性的导航。比如这个， 就让前来应聘的用户充满困惑。如果你是网站的访客，需要来回折腾一阵子，才能搞清楚这个名为“Co-Create”的页面实际上也就是常见的 “Services”页面。最纠结的是，即便是你将整个页面都看完之后，仍然高不清楚要怎么办，因为这个页面的底部仅仅只有一个表单，展示行业新闻，并且 仅仅提供一个注册入口！至于联系页面就更简单了，仅仅提供了一个邮政编码和一个邮件地址。总而言之，他们用各种手段让用户无法直接快速有效的联系上他们。
在看看这个案例。你猜猜看，的页面上的“Universe”这个分类是干啥的？这个炫酷的链接，实际上是链接到他们的Facebook页面的……唉。
反例当然也有，看看的网站吧，他们的创意非常不错，导航清晰明确，用户也不会在导航中迷失。
3、杂乱无章
曾经有过一个阶段，设计师试图将所有的内容全都塞到一个页面当中去。虽然这个时代已经过去了，但是很多网站依然在犯这个错误，甚至在我们自己设计的时候，有时候也会身不由己地想这么做。看看这个的设计吧：
设计师试图使用简单的配色方案，但问题是页面中大大小小的框、复杂多变的字体破坏了整体的风格，用户也在大量繁复的信息中懵逼。搜索框中“那么你今天想得到什么呢？”文案还是挺时尚的，但是页面风格却完全是过时的设计。
反观，在设计上则更为克制，保持清爽而简单的设计，凸显用户关注的内容，并且明确地提示用户下一步该怎么做。
4、要有对比度
对比度是构建视觉层次最重要的手段之一，也是让视觉元素吸引用户的绝佳方式。在网页设计中，对比度不仅仅是通过色彩来呈现的，尺寸控制、形状设计、位置调整也都能表现出对比度。
最简单也是最生动的案例，就是。设计师在网站的一致性上做的颇为不错，但是相对复杂的背景和文字内容、按钮等前景元素之间的对比不明显。
相比之下，也采用了深浅色（黑白）的对比来进行设计，但是结果却截然不同。另外，充满创意的滚动效果也引入了颇为不错的视觉效果，很酷吧？
5、忽视表单样式
表单设计其实是用户体验设计的基本组成部分之一。每个网站都有不同的设计目标，不论是销售产品、呈现信息还是提供沟通平台，然而许多设计漂亮的网站总会给你一个令人感到无聊到死的复杂表单，除了那些极其想加入会员或者想参与问卷调查的那些访客，许多用户（比如我）会直接关闭页面，离开网站。
有了这样的跨浏览器解决方案之后，你就可以同丑陋的默认表单样式说再见了，你可以设计更优秀更人性化的表单那设计，来提升交互效率和用户体验。
另外一个恼人的情况是，表单要求太多，想法不成熟，或者并未经过良好的测试。比如 这个网站中，表单突出了所有的空白字段，即使有些是不需要填写的。
反观的表单设计，你会喜欢表单中的鼠标悬停提示。另外，其中“Don’t be shy”的提醒为整个表单增添了人性化的元素。
网站并不是做好了就够了，你还需要多加测试！有许多问题并不是意料之中的。用户会在哪里碰到问题？导航中的设定是否符合用户的意识？视差效果和内置 的视频是否能够流畅加载？让用户参与测试最大的好处是你真的开始拥有用户的视角，而非你自己的脑补，了解实际的需求，才能有所改进。不要试图限制你的创造 力，但是也不要忘记基本的原则，这样才能在不为用户带来困惑和沮丧的同时，给予他们惊喜。
译文来自：
原文地址：
优设译者：
分享到微信朋友圈
我不制造文章，我是互联网的搬运工
人人都是产品经理（）是中国最大、最活跃产品经理学习、交流、分享社区，集媒体+招聘+教育+社群活动为一体，全方位服务产品经理，微信公众号woshipm。成立5年以来举办线上活动500余场，线下活动数百场，覆盖北京、上海、广州、深圳、成都、杭州、南京、重庆、厦门等30多个城市，在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝，其中产品经理占比50万， 中国75%的产品经理都在这里。网页设计中的交互：关于分页问题的浅谈
查看: 2058|
摘要: 点评：分页在网站设计中是一个比较常见的问题.
　　作用：跳转到上一个页面或下一个页面。　　元素：分页的基本元素有：上页+页码+下页(如标注1);总页码(如标注2);跳转页(如标注3);确认&按钮(如标注4);　 ...
点评：分页在网站设计中是一个比较常见的问题.
　　作用：跳转到上一个页面或下一个页面。　　元素：分页的基本元素有：上页+页码+下页(如标注1);总页码(如标注2);跳转页(如标注3);确认"按钮(如标注4);　　场景：根据以上这些基本元素在不同的场景会有不同的组合　　(场景1)19楼论坛:　　论坛页面数量多的时候会达到上千页;分页的内容多数是顶贴或者是原创陆续更新帖子所以一般用户都会查看首页原创帖，然后又选择性地查看些留言页面。手动全部翻一遍的几率几乎为0;所以论坛性的分页会又以下特点：　　1.多数用户会在看了原创帖后直接翻页或选择回到贴子列表所以除底部还在顶部添加翻页并设置了"返回列表"的快捷操作　　2.所以第"1"页是home的作用，始终有第"1"页，中间用"&"表示未显示的页码;　　3.只提供"首页1+5个连续页码+最后一页"页码;开发者应该是考虑一般用户最多连续查看5页的内容。或者就直接跳至最后一页查看所以显示最后一页页码和直接跳至最后一页的快捷按钮;　　(场景2)微博：　　用户浏览的信息是关注的信息，会像读报纸一样逐页的浏览下去，因此"上一页""下一页"用的次数最多;其次是跳转翻页，为体现轻量微博的概念，将传统翻页的中间页码部分简化成下拉菜单，既能标识当前页位置又能翻页切换跳转;　　新浪weibo：一页45条微薄，更多则翻页，上一页、下一页及第几页，默认推送10页　　(场景3)百度搜索页面：　　1.搜索结果首次只提供10个页码;一般用户在这10页内还没找到想要的内容应该会更换搜索内容。脚印图形和下面页码对应都可点击翻页，增加了页面趣味性　　2.因为搜索页面用户一般不会回到首页所以页面只有上一页和下一页的快捷按钮　　3.点击任何一页码继续浏览，发现后续提供的页码是：当前页+9;便于用户扩大搜索范围放大。　　4.最多提供20个页码;比较适于页面宽度　　(场景4)信息滚动翻页：　　1.腾讯weibo：一页45条微薄，更多默认显示更多按钮，点击后下面又多显示45条，以此类推;同时腾讯还推出页码翻页模式供用户选择　　更人性化了　　2.花瓣"无限滚动翻页"，当用户浏览到页面底部，自动刷新页面展示新的信息;连续翻过很多页后，当再无内容可以展示时，自动出现关联信息按钮"查看更多信息"，引导用户去浏览其他相关信息;页面过长时提供"回到顶部"按钮;　　拓展：以下为其他不同的分页形式　　以上是交互团队对分页的小小分享。
站长推荐 /1
【环球网综合报道】“亚洲时报”网站前不久刊登了皮特-布朗（Peter J Brown）的一篇题为《中国对印度的导弹系统无能为力》 （China can't stop India's missile system）的文章认为，中国即将对巴出售的红旗-9防空导弹，将推动印加紧发展导弹系统和反导系统。此外，中国2007年年初进行的反卫星试验也给了印度反导以极大启发——印度将效仿中国强化用反导系统打击卫星能力。
Powered by当前位置： >
网站设计中的UTF-8编码有无bom的问题
今天做站有碰到了那个离奇的问题，模板明明没有问题，显示出来就是头部多处两个双引号，进而引起网页排版错误，原本排版应该是这样：
而偏偏顶部会多处一行：
用谷歌浏览器审查元素，偏偏就多处一对双引号：
以前也碰到过这个问题，郁闷的不能自已，今天碰到高手终于答疑解惑，终于知道了什么原因，原来是utf-8的有无bom的问题!
解决方法：把文件设置成为utf-8（无bom）的编码方式，便会正常显示了。
现附下utf-8关于bom的知识：
在UCS编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符"ZERO WIDTH NO-BREAK SPACE"。这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little-Endian的。因此字符"ZERO WIDTH NO-BREAK SPACE"又被称作BOM。
UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符"ZERO WIDTH NO-BREAK SPACE"的UTF-8编码是EF BB BF。所以如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了。
UTF-8编码的文件中，BOM占三个字节。如果用记事本把一个文本文件另存为UTF-8编码方式的话，用UE打开这个文件，切换到十六进制编辑状态就可以看到开头的FFFE了。这是个标识UTF-8编码文件的好办法，软件通过BOM来识别这个文件是否是UTF-8编码，很多软件还要求读入的文件必须带BOM。可是，还是有很多软件不能识别BOM。
在Firefox早期的版本里，扩展是不能有BOM的，不过Firefox 1.5以后的版本已经开始支持BOM了。现在又发现，PHP也不支持BOM。PHP在设计时就没有考虑BOM的问题，也就是说他不会忽略UTF-8编码的文件开头BOM的那三个字符。
由于必须在在Bo-Blog的wiki看到，同样使用PHP的Bo-Blog也一样受到BOM的困扰。其中有提到另一个麻烦：“受COOKIE送出机制的限制，在这些文件开头已经有BOM的文件中，COOKIE无法送出（因为在COOKIE送出前PHP已经送出了文件头），所以登入和登出功能失效。一切依赖COOKIE、SESSION实现的功能全部无效。”这个应该就是Wordpress后台出现空白页面的原因了，因为任何一个被执行的文件包含了BOM，这三个字符都将被送出，导致依赖cookies和session的功能失效。
解决的办法嘛，如果只包含英文字符(或者说ASCII编码内的字符)，就把文件存成ASCII码方式吧。用UE等编辑器的话，点文件-&转换-&UTF-8转ASCII，或者在另存为里选择ASCII编码。如果是DOS格式的行尾符，可以用记事本打开，点另存为，选ASCII编码。如果包含中文字符的话，可以用UE的另存为功能，选择“UTF-8 无 BOM”即可。(编辑：-畅维网络)
友情链接：