网页设计
网页设计趋势之来尝鲜多边形风格设计吧
我们介绍过2013年的网页设计趋势有扁平化设计(Flat Design)、条纹式网页设计等等，其中Flat Design最为流行，不过最近，设计达人又发现了新的设计趋势——多边形风格，什么是多边形风格呢？其实它有点像白纸风格一样，如果不懂，下面我们为大家介绍一个制作多边形图像的网页工具。工具由somestuff提供，我直接分享至微盘：微盘下载使用方法很简单，下载后用支持html5的浏览器打开，拖动一张图片到”Drop your bitmap here”区域，如下图：拖进去后，你可以随意单击鼠标来制作多边形，也可以点击Randomly来快速生成，还有一个好处就是能生成SVG图片，这样能可以在AI在随意修改了。生成SVG方法：点击 Export ，然后在 this link 右击另存为，保存的时候记得添加”.svg”后缀哦！全屏网页设计最近不也很流行吗？所以设计达人网尝试使用这个工具来制作一个背景。原图：（图片来源未知，很多年前收藏的，有版权问题请告知我）
网页设计中透明效果的使用技巧心得
运用好透明效果是提高网页设计水准的重要方法之一。如同使用其他方法一样，设计师们有很多种手段将透明效果运用到网页中，今天这篇文章就来好好和您分享一下关于“透明”的实用小技巧哟。在网页设计中使用透明效果是件既美观又冒险的事儿。透明效果的使用是把色块，文本或图像“变薄”或者降低饱和度，使颜色变浅透明，这样下个图层的内容就能穿透显示出来。这种方法如果用好了，效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点。但设计者在运用透明效果时要特别小心，因为这么做可能会影响页面的可读性。要是框和文本的透明度不对，更可能会影响到整体的设计。下文是一些注意事项以及巧妙运用透明效果的成功案例。用“透明效果”来制造对比使用透明效果最大的优点是可以形成对比。设计者可以在图像上打造出一个色块或文本的焦点，增添屏幕的色彩维度。透明效果还能使文本从不抢眼的背景上跳脱出来。在运用透明效果时尤其要考虑对比度。只有图像和文本都具备可视性时，透明效果才算成功。所以采用透明效果时，别忘了问问自己：这会使文本/图像更容易理解么?不要遮盖图片的关键部分透明效果不能遮盖传递信息的背景或图片。当决定采用透明效果为框架时，要想想会不会少了什么。
16个网页设计师应该知道的UI优化秘诀
优异的用户界面可以让用户用得顺心，从而提高转化率(conversion rate)，换言之，好的 UI 在使用与销售层面上形成双赢。本文整理了16点优化用户界面的方法，希望对大家有所帮助。本文原作者加拿大UI设计师Jakub Linowski 译文出处： Inside单栏型式优于多栏单栏型式让你更能掌握自己的内容，从顶部到底部一气呵成，用故事引导读者，最终是要诱引他们「采取行动」(call to action，下称CTA，意指下载或消费等目的);而多栏反而可能导致读者分心。不要劈头销售产品「略施小惠」给使用者，贩卖的意图不要设计得太明显。小小的优惠或礼物，对未来的销售会带来大大的帮助。统一相似的功能，避免支离破碎的UI浏览网站时，我们很常看到琳琅满目的元素或特色，但它们的功能毫无二致，而相似的选项太多，只会提高让使用者无所适从。倘若发现自己的网站内有以不同 型式重复相同功能的状况，不妨考虑重新设计UI，把类似功能整合起来。譬如图中「Customer Service(客服)」、「Contact Us(联系我们)」其实是一样的意思，应当保留一个选项就好。
6个网页设计师必须知道的小技巧
平面设计和网页设计是两个截然不同的领域，这两个领域有不同的设计需求、设计实践和设计方法。例如，在网页设计中更常使用基于像素或栅格的文件格式，诸如JPG、GIF或PNG。相反，在平面设计领域像logo这样的图形可能会用到不同尺寸，因此使用最多的格式则是EPS和AI这样的矢量格式。然而，用于网页的矢量格式，如SVG或HTML5 Canvas则不能广泛应用，也不会被所有浏览器所支持。另外，用于web端的图形有基于它们自身的相关处理方式。其中一条便是你要时刻注意文件的大小，因为你需要使你的网页加载越快越好。作为一名网页设计师，你应当尽量减少HTTP对图像的请求次数——无论通过减少图片的使用数量还是将它们整合成CSS sprite——以及确保你选择了正确的图像格式，使其在图像大小和质量间得以平衡。photoshop是平面设计师和网页设计师使用的行业标准工具。以下是你在创建web端使用图像时的一些简单的小技巧。1. 将图片保存成Web所用格式在网页设计中，你必须确保你的图像大小越小越好。当然，当你想要图片完好显示时可以抛弃这条原则。在Photoshop中创建图像的完美方法便是平衡质量与文件大小。网页设计师经常犯的一个错误便是使用“另存为”命令，而不是使用“存储为Web所用格式”。“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式，包括图像质量、图像分辨率、浏览器兼容性和文件大小。
猜想未来的网页界面设计长什么样
近期引发最多讨论的界面设计无疑是iOS7新UI变化，但对iOS7的设计我在这先不做评论。而是想跟大家讨论界面设计趋势，引导设计走势的因素是什么?有句老话：“以史为鉴，可以知兴替”尽管人机交互界面发展时间不久，但从西方艺术发展史中能依然能给予我们启发。19世纪前艺术是为权力贵族与宗教服务，其宣扬的是宗教信仰与权力。那时期，以巴洛克，洛可可为代表的作品中，奢侈华丽绚烂的装饰特征深得权贵喜爱。无论宗教建筑，室内装潢家具，还是贵族妇女的摆群，甚至小到留空雕花瓷器茶杯，这些无都是文艺复兴思想的体现。19世纪后随着工业革命运动的爆发，自动机械开始代替传统手操作。同时随着对机械语言的理解加深，思想家逐步意识到工业设计应该服务于大量生产，为大多数人生产实用美观的物品，而不是为少数富有的特权阶层生产奢侈品。
格式塔在网页页面设计中的应用
什么是格式塔?格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。本文作者：搜狐畅游视觉设计中心团队，@畅游VC 欢迎关注：)最重要的格式塔原理接近性原理;相似性原理;连续性原理;封闭性原理;对称性原理;主体/背景原理;共同命运原理。>接近性原理接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组，而那些距离较远的则自动划为组外。如上图所示，左图中的圆相互之间在水平方向比垂直距离近，那么我们看到了四排圆点，右侧则看成四列。接近性原理案例
浅谈网页设计提高表格可读性的一些技巧
表格的应用DLIN：由于工作原因，经常接触到表格。我们发现，表格不但广泛的运用在各类数据收集和分析，同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式)，能够很好的表达信息之间的逻辑关系，易于帮助理解横纵信息之间的关系。在实际的网页设计应用中，表格横纵相互独立又相互关联的模式尤其适用于：1.组织和展示大量的信息表格简单的结构不但能包含大量的信息，且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。2.展示对比性信息通过合理的布局，表格能清晰的展示出同类对比信息，便于读者分辨不同条目信息之间的关联和区别，从而关注到关键、问题条目。总的来说，一个构造清晰的表格布局，将大大提升读者对信息的接收速度和理解程度例如下图中苹果官网对不同型号mac book的信息陈列方式，就采用了表格的结构，清晰的展示了4款不同的macbook，及各自的性能、售价等属性，同时读者第一眼就可以扫描到并理解表格 结构，横向是4款macbook的排列，纵向分别列出了各自的属性，然后进一步就可以根据自己的兴趣点就4款macbook的不同属性进行对比，信息完整 且便于扫描。
2013年的13个优秀的网页设计趋势
1、扁平设计扁平化设计正好是苹果一度推崇的拟物主义skeumorphism的反面极致。有一家公司尽管不是第一家实现这种风格的公司，但把它推向全新高度的却是这家公司无疑。这家公司就是微软。似乎 Windows 8 整个操作系统都是围绕着彻底扁平的 UI 来开发的，随处可见 Metro 和 Live Tiles。这种风格有利有弊，应根据需要权衡。最近采用了这种扁平化设计的是一颗冉冉升起的新星，它的名字就叫做Rise—一款闹钟 app。它的整个 UI 都没有一丁点的三维元素，简洁贯穿着整个应用，跟灰度结合起来之后，我们看到的是以一个外观漂亮的闹钟。当然，扁平化设计并不适合于所有的应用，但是越来越多的设计师和开发者仍将会把极简主义作为 app UI 设计的方向。2、更少按钮，更多手势一旦应用缺少了各种按钮和可视化维度的东西，用户不自觉地就会求助于手势。Clear就是一款出色地运用了手势的应用，彰显出四维思考的魔力。Google 最近发布的 Google Maps 想要同时做到扁平化设计和运用手势这两点。手势将会是 2013 年的设计趋势。3、辅助动画：功能可见
详细解析网页设计大型网站导航设计指南
对于大部分网站，导航并不算是个挑战。一条主导航加条二级导航支撑，通常就足够了。典型的做法是，二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单，允许用户在菜单间切换。然而，有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。定义大型网站一个大型网站由结合了综合服务和产品的典型大型组织所有。这个组织通常也服务各色用户。拥有大型网站的组织，包括BBC这类机构型的，类似微软这种项目多样化的公司型的，政府部门，高等教育类的以及运作多种活动的慈善组织类的，比如世界自然基金会。这些网站：庞大，层级多而深，由多个小网站和频道组成，迎合受众众多，许多入口，这种规模级的复杂网站导航颇具挑战。大型网站上的导航挑战在我们公司，我们花费了大量工作在这类大型网站上，尤其当我们想使用传统的导航时特费劲儿。传统的导航无法负担深层级传统的导航随着网站层级越深变得越难用。传统导航很容易应付三层;超过的话，问题就会暴露。即便拓展到页面众多的房产类网站导航，他们会更致力于导航多过内容(大型网站里页面太多让问题变得更糟)，或更顶层的页面不再出现在导航中。在后者中，如果用户处于网站的深层级页面，他们将搞不清上上下级关系，因为无法看见当前页面在整个网站中的所处位置。
网页设计中的那些不容忽视的细节
这篇文章说实际问题的，所以不多强调，下面是我总结的一些比较突出的细节问题，而且我一直认为这些问题比较严重，正因为这些都是基本问题，很容易解决的，但把这种忽略养成一种习惯性的”经验”那就”杯具”了，然而这些细节问题也不同程度的代表了你的工作态度。1)调整后的毛边当对一个位图的大小进行调整后，正常情况下会留下1px的毛边(如果你注意的话)，边界会变得模糊，如果继续调整模糊度会加大，这个问题太不起眼了，以至于你无法用肉眼来理绘，我们先用商品图片举例子：也许单张小图还不够显注，下面对比一个列表图和大图，当然了除非你故意想要这种效果。放大2倍后对比