2014-4-22 蓝蓝
转载蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的 BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
来源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
UI设计师为了让网站设计脱颖而出，不仅需要有丰富的高质量内容，同时也要兼顾网站的创新性和功能性。从用户的角度出发好好想一下，怎样让你的网站用户体验更友好？简单的搜索功能是需要的，或者你也可以精心设计一下网站的导航。同时，要注意保持整个网站设计语言的一致性。在这个html5狂潮涌进的时代，诞生了很多优秀的网页设计作品，他们都有卓越的导航设计，接下来蓝蓝设计整理的这些网站将唤起你关于导航的极限创意，快来亲自体验下吧！
这个简单的响应式布局显得相当漂亮。Lowdi用线条和形状来划分页面的区域，这是一个很好的方式来打破传统四四方方的布局。我喜欢”Order Now”按钮融入到这个满是线条和形状的设计中的方式。这些元素能很好的适应你的屏幕分辨率，整个设计也保持了高度的流畅性，使阅读体验非常好。
Barcamp Omaha是一个在线邀请别人加入某次活动的网站。这个单页非常的用统一的视觉风格来引导用户浏览网站内容。活动最重要的信息，时间、地点、事件都放在了页面的头部，但网站的设计让用户有强烈欲望的往下滚，看看还能发现什么。我非常喜欢twitter和facebook在这个页面中的变体图标。
当用户往下滚的时候，通过大胆的标题设计，更多的信息被系统的呈现出来，网页布局依然很简洁整齐。会议内容的目录则是以简单的动画来吸引用户的眼球。当用户滚动到页面底部的时候，联系信息出现了，唾手可得。
当网站家在完成的一瞬间，这个网站给人的感受就是非常的稳定、安静，这是严谨设计的结果。虽然没有态度的留白，但网站却不让人感觉压抑。标签在鼠标hover的时候展开，展示了更多的信息并且提升了可用性。和其他元素一起，这个效果传达了一种通透的、平静的感觉。这个设计也映射浏览网站的词汇，其余元素也组合起来传达了连贯和统一的设计风格。
一个完美的Hover效果不应该只是简单的呈现更多的信息，也应该为网站的视觉体验做出贡献。在这个网站中，当用户鼠标悬停在图片上时，图片扩张，并且由灰度照片恢复饱和度成全彩图片，同时呈现标题。这个效果让我和我的小伙伴们都着迷了。
在网站中对产品和信息进行列表布局的时候，我们经常会做出一个静止的传统列表页。Lift网站的书本列表则给书本的hover效果添加了一个简单的3维旋转动画。这个简单的视觉效果让网站增色不少。给用户一种感觉就是他在和网站交流。你可以从这里获取这个3维效果。
Snowbird是一个用户交互较多的动态网站。当前的天气情况被直接展示出来，当用户鼠标悬停的时候横向展开显示这一周的天气预报。”FULL REPORT”按钮的hover效果则是大圆角变小圆角，这种按钮状态的变化很微妙有效，可以直接用css3圆角属性实现，在扁平化时代可以考虑采用。广告图片是三角形的，隐喻雪鸟的翅膀，当鼠标悬停的时候，广告图片的另一部分展开形成完整的图片。（译者注：值得一提的是，页面加载中时网站的logo会像翅膀一样折叠展开扇动着，和网页里的交互动画有很好的一致性）
整个界面由方块磁贴紧密排列构成，但却不显得拥挤。顶部的导航栏占据了一点空间，但这些图标都是用于细致的分类。当然，你点击菜单栏也可以隐藏这些图标。另外，这个网站也是响应式设计的，不同的分辨率不能影响它的显示和功能，响应式V55！
您可以选择一种方式赞助本站
支付宝转账赞助
