网页设
解析网页设计扁平化设计VS拟物化设计
这篇小短文是关于最近很火的扁平化风格的深度探讨。我可以听到你们脑袋里不耐烦地抱怨：“Brah，这种事情随意啦!”。但是如果你想做一个有品味的设计师，还是看看为好。当然，我会尽可能得快点讲完。我从不认为哪种风格或哲学立场更正确或者说更优于其他，我更中庸一些，我认为答案通常不是极端的;我也认为，使用得当的就是好的。当下被讨论的很火热的用户界面设计风格有两种：扁平化设计和拟物化设计。在实际的案例中我们应该怎样取舍呢?简单说来，设计师的品味决定了他如何在实际案例中灵活运用这两种设计风格。在iOS客户端的Dropbox中，这两种设计风格被很好地融合在一起。我要说的第一件事，过犹不及。iOS中Header的特点是它有十分丰富细腻的渐变等特效，而扁平化设计则完全摒弃了这些特效。如果我们像iOS那样使用更多的特效，制造更多的细节和对比，最终会得到下图中第一个Header;如果我们去掉全部的渐变和效果，我们会得到一个像Windows8一样扁平的结果，即下图中间的Header;最后，如果我们在Header上加入一点点不易察觉的、十分微妙的渐变和特效，我们就会得到下图第三个Header和《三只小熊》(The Story of the Three Bears)里的小菇凉一样，我个人更喜欢第三个效果。我要说的第二件事，还是过犹不及。检查一下UI视图中“选中”状态的设计。我们使用浅蓝色的背景来表明这个部分被选中了，而不是复杂的特效。这个设计很好地给了用户操作反馈，既不会太显眼，又不会引不起用户的注意。我们需要有目的性地、科学合理地使用扁平化和拟物化风格，而不是生硬地套用某种风格，更不是一条路走到黑。这样才能让我们的用户界面设计看起来更高端!更大气!更有品味!更国际范儿!亲，你们懂的!
网页设计10个精致的导航菜单欣赏及点评
这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美。这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法。这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平。一、木质页面上的抽屉创意不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗?我自己反正是没想到，这就是值得学习的创意。我们不要一做导航菜单就想也不想的画一个直角或者圆角的矩形背景，将文字放在上面，用竖线隔开文字。这就落入了程式化的束缚之中了。看过这个案例后，你可以明白一点，就是根据已有的东西(这里是木质的页面材质)去展开思考元素样式的可能性。以这个案例为例，你可以思考一下在一个木质的页面上，如果能将抽屉的开合作为导航菜单的两种状态的话，那么暂时不考虑技术上的实现问题，还可以通过什么样式来实现?弹孔?刻痕?油漆?这里你就可以放开你的想象力了，这时候就是创意迸发的时刻。有了创意之后再考虑技术的问题，而不能让技术上能否实现限制住了我们的想象空间。关于木质材质的创建我建议使用素材来实现，高分辨率的素材不仅细节丰富而且风格多样，上图的材质属于比较细腻的风格，这样的素材其实有很多，一搜一大把，但是关键在于平时的积累，有了不同风格的素材在手边，实现这样的效果其实非常快。二、重复和对比原则的应用垂直导航也是网页设计中常见的设计元素。在上面的设计中，我们能够看到设计师对于重复和对比原则的充分理解和应用。其中，一级导航的样式都很类似，左边是文字，右边是简洁的小图标，每个图标虽然不同，但是风格都是统一的，这正是多样性的重复原则。所以这些父导航按钮会让人感觉是平等而有某种联系的。而当前所在的位置以非常醒目饱和度较高的黄色显示，明显区别于一般状态的导航按钮，让访问者清楚的知道自己当前所处的位置，提高了用户体验并且增强了设计感。子导航既然和父导航不属于同一层次，那么必然要在视觉上和父导航有所区别，所以在背景颜色和文字颜色以及样式上你就能看到这种差别所在。另外，我将这个导航按钮重新做成了PSD文件，放在这里供大家下载，你可以学习一下如何使用杂色滤镜、图层样式来实现这样细腻的导航菜单，以及如何使用铅笔工具以像素级的标准画出文字旁边那个小小的三角图标并且还要给它应用图层样式。以下是PSD文件预览图。
网页设计中色彩的运用心得技巧
一个好的网页设计会给用户带来记忆深刻，好用易用的体验。从网页设计的版式、信息层级、图片、色彩等视觉方面的运用，直接影响到用户对网站的最初感觉，而在这些内容中，色彩的配色方案是至关重要的，网站整体的定位、风格调性都需要通过颜色，给用户带来感官上的刺激，从而产生共鸣。从色彩研究的方向来看，色彩分为色调、饱和度、明度三方面，颜色的运用是纯色之间的关系，以及它们混合在一起的效果。我们可以从当前众多的网络应用中的实例，找到色彩运用的一些广泛的色彩关系和配色方案，通过这些色彩的关系，可以作为实际工作学习中配色的指南。单色：使用一种色调不同的饱和度与亮度近似色：使用色盘中的邻近色调互补色：使用色盘中的相反色调分割互补色：使用一个色调和两个与它的补色邻近色调
详细解析网页设计如何设计实用的网页表格
想必多数同学曾经学习计算机就是从Word开始，其中一项重要的学习任务就是创建表格，如今在网络页面里表格随处可见，尤其是商业产品里充满了大量的数据，要没有这些表格估计看内容得吐血…… 表格形形色色，默默无闻的呈现着数据，阅读起来如何最为顺畅，如何才能从表格里发掘出重要信息，有哪些可以对表格进行的操作，梳理一下以供参考。在后台界面，表格对数据的维护和体现是最常见的，那么也推荐您看看一组惊艳的后台管理界面设计1.行高是表格浏览时的重要参数行高是表格非常重要的参数，行高间距直接影响着阅读的体验，有如同Omniture为了最大限度的放置数据内容，强化数据显示效果而降低行高的情况，也有SugarCRM一样的行高较高可以放置更多文本信息的表格。2.斑马线更好的引导阅读斑马线和悬停时的整行变化也是表格中能引起视觉变化的重要元素，斑马线会使得行与行的界限更为分明，尤其对数据列较多时的横向引导得到加强，这样看行内的内容时不容易错行，而悬停变色行主要是配合操作交互，为了明确区分出光标所在的行。3.选择和操作提升使用效率对表格数据的选择会有单选多选或者全选的情况，如果遇到数据项很多有翻页，全选的位置就会增加一些选项来确定是当页全选还是整表全选，如同Gmail和SugarCrm里的效果，这种表格是将选择区域放置在表格的左侧第一列，也有表格的设计是将选择放在右侧最后一列，像Campaign Monitor就是这样设计的，好处在于浏览完一行的信息就可以确定是否需要选择该行内容进行下一步操作。
浅谈如何提高网页设计垂直方向上的阅读节奏感
多掌握点字体设计知识是好事。良好的字体基础能帮助你挑选字体，理解字体本身的意义。挑选合适的字体，想必对很多设计师来说，都是一件棘手的事情。我们今天就来谈谈垂直方向的阅读节奏感。对!你没看错，韵律感也决定了字体是否适合设计。界面设计，尤其是网页设计的字体选用上，垂直阅读的节奏感是重中之重——而且能够搭配视觉元素，打造优秀的阅读韵律感的字体不是很好筛选，耗时且需要实验多次。实际上，很多手段都能帮助我们打造阅读的节奏感。与这些很难关注到的设计细节相比，或许还有一篇超有意思的文章值得您观看《四大秘要!让用户第一眼就爱上你的网站》何为垂直节奏?节奏就是…一种强烈的，有规律的，重复的声音或者运动模式。如果节奏一致且令人熟悉，那么节奏感会非常强烈。我们将节奏原理应用到将诶面设计中，便产生了垂直节奏——我们一般是从左到右，从上到下进行阅读，我们要以此阅读习惯为基础，打造一致的视觉阅读节奏。一致的垂直节奏才能保证视觉效果更放松，达到更好的阅读体验，让用户感到安心，没有阅读障碍，没有违和感，可读性自然强。打造优良的垂直节奏可不是一件容易的事情。设计师需要协调好元素与元素(图像，文本)，元素与整体之间的关系。
关于网页设计交互Demo设计的一些心得和建议
为方便产品经理、设计师、开发及项目相关人员能够看到直观的效果，进行更有效的沟通;提供直观的产品设想，说明用户将如何与产品进行交互，在交互设计的过程中一定会产出各种各样的产出物，如流程图、思维图、纸上的草稿、甚至高保真演示稿。这里简单分享下自己在项目过程中的交互Demo设计的一些心得。延伸阅读：经验分享!移动端设计开发流程(附神器推荐)Axure制作交互Demo的软件有很多，个人比较喜欢且习惯的就是Axure。Axure操作简单明了，对于初学者来说，非常容易上手;它也拥有强大的交互演示动作，对于高级使用者来说，制作非常高保真的演示Demo, 也是非常有成就感的。Balsamiq提供了丰富的手绘风格的web常用元件，能创建接近于纸上手绘的原型，让人有眼前一亮的感觉，个人建议初稿方案的时候可以考虑用这个更能吸引人。
网页设计师应该知道的网格系统技巧
今天我们来聊聊网页设计中的网格系统。网格确保了设计结构的组织分明、结构明晰。我们可以通过网格系统更好的打造设计的信息层级，让设计阅读起来更具有韵律感。就跟编码一样，编码需要有机的组织结构，而网页设计的网格系统也是同样的作用。The Grid System 设计师用起来舒服，开发者用起来顺手，当然，网格系统对于用户也是大有裨益的。我一直在强调设计要注重用户体验——毕竟，客户为你的内容消费，因此你要向他们提供有价值的体验。使用坚固的网格系统会对你大有帮助，不但能保持设计的一致性，还能更好的引导用户。如果你的网站设计的已经很不错，那么可以通过网格来让你的网站更进一步，让用户浏览起来更愉悦。但有一点需要注意，网格系统不意味着循规蹈矩，一味按照网格线来进行布局。就拿响应式设计来说，灵活性是其最大的特点——网格系统也应如此，网格系统的意义在于更灵活的帮助你有序布局，而不是限制你的设计。什么是网格系统?包含了水平和垂直方向的参考线，用来合理排列内容。最基本的网格系统由一系列水平和垂直的、彼此交叉参考线构成，这些格线让内容布局变得简单起来，让内容更具可读性。网格系统在纸媒中广泛应用，有着悠长的历史，引入到网页设计后，出现了很多CSS网格框架，几乎成了网页设计的标准。利用网格系统可以更好的驾驭内容，保持一致性。均匀化的布局，一致性自然就有了，这样导航功能就能更易于使用，好的用户体验也有了。——当然你也可以打破网格系统，用更好的布局取而代之，也可从网格系统中衍生出自己的布局方式。
99个漂亮的网页注册和登录页设计PSD素材
我们之前有介绍过一些很漂亮的网站登录界面，登录和注册是获取用户的第一步，是最能体现网站用户体验的地方。 这里我们又收集了更多的登录和注册界面设计，它们来自于国外优秀的设计师们，而基本都是设计稿，附带PSD，你可以下载下来用在自己的项目中。Wooodapp sign in pageSign In WidgetElegant Login Form DesignSimple Login FormLogin Form
浅谈网页设计动作按钮可没你想的那么简单
动作按钮?不就是一个按钮加两文字么?这有什么好说的·····如果你还这么认为，那就大错特错了。一个小小按钮，看似简单，里面却有大大的学问。下面是我总结的一点见解，希望抛砖引玉，给大家一点启示。按钮分为两个部分：按钮文字 按钮形状先说说按钮文字的设计：1 用文字创造出一种紧迫感这主要适用在购物网站，使用一种紧迫感的词语更可能让用户采取行动。在按钮上加”现在”"立即” “马上”等文字，能大大提升按钮的转化率。这些文字能给用户暗示和感知，如果继续等待，很有可能错过这次大好的机会。不信?可以试一试。
详细解析网页设计的构图技巧
一篇开拓网页设计思路的文章，虽然有些年代了，但是其中分享的构图技巧到现在依然是非常受用的，如果你能领悟个中精髓，融会贯通。那么今后你设计出来的网站，一定会从格局形势上让客户眼前一亮。网页给人最直观的感受就是它的页面框架与构造，就像一座大楼的主体框架与形态，你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙，但我想你一定记得起它们是什么样的形状。同样，网页设计中的构图也足以影响到整个网站给人的感受。虽然比喻并不十分恰当，但就网页其构图而言，些许的改变和简单的创新也许就能起到事半功倍的效果，使网站给人耳目一新的感受。如何将网页这座楼盖的漂亮?以下就例举一些在网页设计上能起到事半功倍的构图技巧。个人拙见，希望能够抛砖引玉。【一】坚实的地基——几何图形的力量几何图形在页面中往往能起到大梁的作用，也是网页内容最为常用的承载面板。图形之间合理的搭配和有效的穿插，能使页面除了信息传达外，更具层次感和观赏性。此网站把圆角矩形巧妙地与信息模块穿插在一起，在营造了网站的主体富有节奏的形状之外，更加强了页面的层次感，使页面不在枯燥单调。圆形和椭圆形的结合搭载了轮播广告和重要信息，使得整个页面既有亮点又不失简洁。同样是圆角矩形的穿插结合， 色彩填充的图形交集既展示了重要信息又勾勒出整个网站的风格形态。