推荐阅读
解析如何设计好看有好卖的企业官网
在谈到企业产品的营销时(本文中提到的“企业产品”是指“给企业客户使用的软件/应用”)，一种观点认为客户肯定是靠线下推广来获取的，另一种观点认为应该让用户主动购买而不是被动推销，持这种观点的公司尤其重视通过产品官网来获客。无论持哪种观点，不可否认的是官网是客户对你产品的第一印象，很多潜在客户在购买之前都是先通过官网来了解产品的。然而很多公司在产品官网设计这件事上投入的精力还不及线下推广的万分之一，有的只把官网当作摆设，粗制滥造套个模板结束，甚至还忽略了移动端适配。作为企业产品的设计师，我们要如何设计好看又好卖的产品官网，有没有一些套路可循?企业产品官网的作用是传达信息和促进转化。传达信息是告诉访客这款产品是什么/能为你公司做什么/为什么值得我购买，再配合一些增强说服力的手段来促进转化——将尽量多的访客(潜在客户)转化为注册用户并最终完成购买。按照用户浏览网站的顺序，有以下5大设计要点：善用首屏大图吸引视线销售主张明确传达产品价值合理的导航方便访客获取信息无处不在的CTA推动转化客户案例增强信任感一. 善用首屏大图吸引视线首屏大图占据了官网最宝贵的第一屏，它决定了访客对官网的第一印象。首屏大图可以辅助产品Slogan来有效传达产品价值，同时还会影响到官网整体的气质。常见的首屏大图有以下5种表现形式：
Phootoshop制作大气金属质感艺术字教程
本教程主要使用Phootoshop制作大气的金属质感艺术字教程，上一次我们做的是立体字教程，今天我们使用了平面的效果制作立体的感觉，然后加上光影的装饰效果来衬托立体的感觉，喜欢的朋友让我们一起来学习吧。有什么不懂的朋友可以下载PSD源文件研究吧。下面是效果分析和教程最后给两张海报添加文字，就大功告成了，设计嘛，还是要不断的调整自己，无论是技巧还是技术。
Iphone苹果手机更换字体教程
在中国拥有iPhone用户已经不少，如果看惯了iPhone自带的字体，能不能更换iPhone的字体呢，下面来看看iPhone字体更换的详细图文教程。工具/原料 iFunbox 了解系统字体 首先我们需要了解，iPhone的系统字体分为三种：系统中文字体，系统英文字体，以及锁屏桌面时间显示字体。我们这里说的系统中文和英文字体不是指手机语言里面的简、繁体中文和英文，而是当你手机语言为中文的时候，手机文字里所显示的中文和英文字体，两种字体分别对应三个文件（中文两个，英文一个）在更好自己iPhone中的字体之前请一定要先备份自己系统原来的字体，这个非常重要。 步骤/方法 打开iFunbox软件。 在iFunbox中依次打开路径：【手机的盘符】/System/Library/Fonts/Cache 在Cashe文件夹中，我们可以看到有很多文件，我们只要找出以下四个文件即可。解释一下：STHeiti-Light 和STHeiti-Medium 对应的是中文字体 HelveticaNeue（有可能是_H_HelveticaNeue）对应的是英文字体 LockClock 对应的是锁屏桌面时间显示的字体。 把下载好的字体，复制到iFunbox的Cashe文件夹中，覆盖掉原有的文件，然后重启iPhone，字体就能被替换更改了。 例如，我下载了华康少女字体，华康少女字体的文件夹中有STHeiti-Light 和STHeiti-Medium两个文件，椒友们要做的就是把这两个文件直接拖进iFunbox的Cashe文件夹（或复制粘贴），然后重启手机就可以了。至于更好英文字体，凌少再这里不推荐，因为不同固件的iPhone，所对应的文件会有所变化，一个修改不好就会出现白苹果。
Photoshop制作唯美风格婚纱照
一:校图何为校图？ 纠正偏色.优化图片! 如果一张好的原片应该层次分明、色彩清晰。那么我们动起手来会轻松很多。前面这一步较图也可以省去了。但是由于摄影技术、环境光线等各方面影响或多或少的有些毛病。例如欠曝、过曝、阴影高光失调、偏色、等等。。。那么如果解决呢？欠曝的可以用色阶、曲线提亮暗部。过曝的只要细节无损可以通过色阶、曲线来压暗。稍稍复杂的方法可以通过计算等到选区再用曲线加以调节达到自己满意的效果！在计算得到的选区内调色等等。。。阴影高光失调可以利用调整菜单里的阴影高光功能来调节这是个非常好用的工具！至于调偏色的方法就更多了。。。我们可以通过观察直方图的峰值来发现这些问题。建议初学者可以先学习一下直方图知识。还有一点就是主次分明。一般人物照片都以人物为主体。可以适当对周过环境物体进行虚化。达到烘托人物的效果。做到有虚有实! 后期还要对图片进行锐化细节和去噪.以达到清晰、细腻的效果。二:风格一张好的调色作品往往给人以视觉的强烈冲击感。很多大师级的人物或婚纱摄影机构就是因为个人风格明显受众多人模仿！所以个风格相当重要。而这一点又是相当主观和灵活的。这和你的性格你对色彩方面的理解。审美观都有直接的影响。我建议大家开始的时候多欣赏和多模仿大师级人物的作品，学习他们的调图风格。当然调色的方法也是多样化的。可以在图中合成一些素材。漂亮的笔刷。起到渲染气氛。。或画龙点睛的作用.......好了下面进入正题，看下面的实例：
最新发布
淘宝设计师经验分享之APP的栅格试验
这里专门说一下关于WAP App的栅格设计。以下相关都是基于一淘H5和一淘App总结得出。先介绍三个名词：Wap App;Native App;Hybrid App(融合体，H5页面嵌套在Native中)，之所以说这三个，是因为它们相互之间的联系在某种程度上制约了Wap App 的栅格设计。下面详细说下栅格试验。Phone栅格和PC栅格，本质上没有区别，一样的计算方式，无外乎屏幕大小的差别，但这屏幕大小，就有很多细节需要结合手机用户习惯来判断和取舍。我们试验的Phone栅格都是流体栅格，简单说，就是不定义具体尺寸，而是屏幕占比。说到屏幕占比，我们需要设定基准屏幕(这个可根据某些具体数据确定，比如我的目标用户群使用的手机屏幕尺寸占比最多的是1136*640，即可定位基准屏幕)，这里假定基准屏幕是960*640 。通常栅格的计算公式 (m+a)*n-a=640-2b (m 栅格宽;a 槽宽;b 留白宽;n栅格个数)试验 1m=40 n=12 a=10 b=25(我们通常定义栅格数目n是2，3，4，6的整数倍，12栅格算是最简单的栅格结构)。试验1的栅格是沿袭PC的思想，但在后来应用到越来越多的页面时，这种栅格做2，3，4，6等分都很OK，但不做等分时，灵活性就很差，也算是一个致命的缺点，对于视觉设计师来说有很大的局限性。所以不建议在手机上使用12栅格。
浅谈什么样的网站才可以吸引客户眼光
展示工作流在网站设计中的地位已经不可小觑了，这样会更接地气，让客户直观的知道你们在怎样的环境为他工作。这些新颖的网站里，设计师都通过了巧妙的手法将办公环境、办公流程优雅地展示在网站上，并且运用了2014年网页设计新趋势。让访客知悉自身工作室的办公状况和运营优势。好嘞!来看看今天要推荐给您的优秀站点吧。Digital Werk利用视频背景展示了堆满东西的办公桌。半透明色调更好地做到了视差效果，让访客一看即懂。JAO Creation创造了一个有趣的欢迎页面，加入儿童元素使其更富创造力和易用性。这吸引人的充满人情味的元素给网站本身的魅力和创意增添了不少动力。Ian Coyle展示了全套摩托车工具包括头盔，整体虽然看上去物品很多比较杂乱，但是总体的味道充满阳刚的韵味。
让你惊叹不已的HTML5画布技术应用
随着老式浏览器(IE6)的逐渐淘汰，现代浏览器（火狐浏览器，谷歌浏览器，Opera，Safari）走向主流，越来越多的HTML5和CSS3技术开始出现在各种网站上。这些最新的网页技术究竟能给我们今后的浏览带来什么样的改变？下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已。当然，也许你也会认为，过去在老式浏览器中用flash技术也能实现这样的效果。但是，下面的这些演示只使用了现代浏览器里自带技术，完全不需要借助 Flash 或 Silverlight 之类的插件。这种技术门槛的降低必将给这些技术的普及繁荣创造不可或缺的前提保障。这是我最喜欢的一样演示，因为里面有一个很可爱的小女孩，似乎是有了人气就更能让人动心。如果你也喜欢这个小女孩，那就移动你的鼠标，让风从各个方向吹动它的头发。→ 观看演示 撕扯布单的这个演示在过去的几个月里成为了互联网上的大明星。用你的鼠标在这个网状布单上拖拽，你会发现它动画效果非常的顺滑，而完成这些效果的只是一小段代码，想必它已经让你惊叹不已。然而，不仅这些，这个动画还能响应你的拖拽的力度和速度，根据不同的力道，表现出不同的撕扯破坏效果，够神奇吧，完美的HTML5画布功能的体现。→ 观看演示
交互设计中如何增加趣味性和愉悦度
趣味性、愉悦度，这些都是针对用户情感化设计的领域。功能、实用性，这些需要很强逻辑性的事物很难和情感产生关联，并不是指这些不重要，它们很重要，它们是基础，但缺少了情感的作用，很难产生一些东西，像：快乐、愉悦、悲伤、美…花、大海、春天、小屋… 这些都是很普通的名词，但将它们富有诗意的组合在一起：我有一所房子，面朝大海，春暖花开。接受者会投入不同的情绪去理解这样一个组合。上面这些名词就像我们在设计过程当中所遇到的各种元素，按键、菜单、icon、动态效果… 将它以诗意的方式组合在一起，由此用户产生了情绪上的波动。交互设计的本质是对用户行为的一种设计，直达内心的设计能够影响用户自身的情感，从而导致用户的行为。常会有设计师说将用户当成是一个易怒、情绪不定、不明理的人，为什么?因为人的本质是非理性的，逻辑是理性层面的考量，而面对情感这个潜藏在理性背后的东西，需要设计师有深厚的功力，这不是单纯技巧上的问题，而是一种时间、感觉、情绪等综合的圆熟。针对用户情感进行设计时需要考虑产品的用户群，情感设计的应用将会为产品塑造个性，需要明确产品个性是否与目标用户相符。所以题主需要考虑一下，所说的趣味性是否与产品所预期的个性相符，这很重要。扯回到正题，交互设计中的趣味性如果让我用一句话表达，我会说：「情理之中，意料之外」btw：自己对有趣的定义可能会与大家不太一样。方式一：「延伸现实」最知名的例子莫过于，iOS的惯性滑动效果(或许有同学会不同意，但这真的是我认为很有趣的设计)，这样的一个设计，在我眼中可以用两个字来形容–惊艳，什么样的设计师才能够对周围世界的观察敏锐到如此境界呢?让我们记住这个人的名字吧 — Bas Ording，可以说没有这个设计可能就没有iPhone的诞生吧
详细解析儿童产品可用性研究分析
儿童产品在几年间异军突起，越来越受到人们的欢迎。艾瑞咨询于2012年2月进行的儿童网民用户调查的数据、CNNIC公布19岁以下网民规模及中国统计局公布的各年龄段人口分布加以推算，艾瑞咨询得出目前中国6-14周岁的儿童网民数量达到7660.2万，较2010年6-14岁儿童网民规模7379.2万增加了约280万。儿童用户量在不断的增加，网民年龄分布及互联网渗透率也在不断升高。儿童产品用户群非常明确，用户量在不断的增加，粘度大，衍生出一系列的周边，如图书、电影、包括版权等等，儿童游戏盈利前景也非常大，关注度非常高，儿童产品市场的竞争越来越激烈。2010年洛克王国正式上线，对于儿童用户我们了解的并不是很深，对于儿童用户的浏览习惯，以及儿童的心态感知，我们了解甚少，在儿童网站设计、重构过程中，带来不少的不便，于是做了一些比较浅表的研究。儿童的市场越来越大，这里也有一份爱奇艺无线UED负责人@晓生分享的儿童界面设计指南《经验分享：为儿童设计移动应用界面的技巧》以下为洛克王国官网首页与七雄争霸官网首页的热区图：
详细解析浅谈HTML5网页设计的游戏化之路
如今商业网站中用于广泛的HTML5无限下拉效果已经越来越受到游戏网站的喜爱。各个品牌为了打造专属自己的游戏特色，纷纷推出了模拟HTML5效果的品牌站，且都起到了相当好的效果。可是从很多方面来说我们对HTML5的真正形态并不了解，而且在很多方便来说处于探索阶段。视觉上看上去酷炫的技术并不都 是HTML5，更多时候我们把HTML5当成了一切技术站点统称。广义论及HTML5，实际指的是包括HTML、CSS和JavaScript在的一套技合。它希望能少浏览器对于需要外挂程式的丰富性网路应用 服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，Oracle JavaFX的需求，且提供更多能有效增网路应用的标准集。这样，搜索引擎可以更容易索引Web站点，我们也可以搜索到更快，更准确的信息。HTML5会带来一个统一的网络，无论是笔记本，台式机，还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候，开发者需要重新考 虑用户体验，网站浏览，网站结构等因素使得这个网站对任何硬件设备都通用。以下将讲述HTML5与常用的Flash的区别，及与IE的常见问题HTML5 与 Flash 这个争论由来已久，Flash被某些开发设计者滥用导致一些网页加载缓慢，而HTML5为之带来一线曙光。相对于移动设备用户来说，ios设备用户可能会 从HTML5获得更多好处，因为苹果一直不愿支持Flash。现在看来，就页面游戏而言，Flash是更好的选择，但取决于你的浏览器，如果你的游戏不是很复杂，HTML5是更好的选择。Web开发与设计者从这些争 论中应该吸取的东西是，Flash之外还有别的选择，但Flash有牢固的地盘，在为客户提供开发设计的时候，需要对他们的目标客户做一些研究。HTML5 与 IE IE9经常高调宣扬它对HTML5的兼容，它确实将是一个很好地支持HTML5的浏览器，因为，IE9使用 Windows现代图形API以及PC的图形加速卡输出文字和图形。微软还曾宣称，IE9将支持GPU加速的 HTML5，将图形滚动，3D图形显示等处理交由图形加速卡。 但是不可忽视的是，在中国用户中还是有一部分固定用户正在使用不支持HTML5的IE6。所以在网站的制作初期，目标用户的定位要明确。李安导演的PI’S EPIC JOURNEY电影创造的一段佳话，而他的网站也极具代表性–以前大家着重在于内容本身，而它有着浓郁的HTML5的特征以交互为核心。整站在不同分辨 率下面css用的不一样，移动设备下面可以有动画，移动设备下面可以播放视频。就设计而言，3d翻转的特效可以大胆构想；可以使用滤镜、圆角，以前这些需 要切图来实现，现在只需几行css即可。这些强大的功能背后都给设计师留下了更多的想象空间，同时也创造出了更大的交互难度。站址：http://journey.lifeofpimovie.com/
如何提升移动应用的心理响应速度
在移动体验的设计当中，界面的响应速度是我们需要重点关注的。移动用户所处的典型情境通常会使他们的注意力更难集中，耐心更有限。如果交互的触发或内容的加载需要让用户等上太长的时间，那么很少有人会不动声色从容不迫的听之任之。怎样使你的移动应用变的更快？这个问题显然会涉及到很多方面的因素，例如界面图形资源及开发技术方案的合理性等等，而我们今天要探讨的，是一些从“心理”角度出发的细节设计技巧在几个典型场景中的使用方式。图片上传当你在Instagram里发布照片时，图片文件实际上是在你刚刚完成拍摄或是从本地选择好之后就已经开始悄悄上传了。整个上传机制充分利用了Instagram自身的照片发布流程——用户在拍好或选择好照片之后，还需要经历一段包含着若干步骤的编辑操作，例如缩放、剪裁、添加滤镜效果、添加文字等等，而图片文件的上传工作就在这段时间里悄然完成。用户不需要再焦躁的面对进度条或是上传状态提示信息一类的东西了。一旦用户完成编辑并点击“分享”，界面会切换回到feed当中，如下图所示。此时feed内容上方会短暂的出现一个“正在完成”(Finishing up)的提示，然后用户刚刚发布的照片会立刻出现在feed当中。整个“上传”环节给人的感觉非常简短而自然。回顾这一流程，你会发现正是那些让人觉得很有参与感的图片编辑环节分散了用户的注意力，文件的自动上传工作巧妙的利用了这个时间段。良好的设计使用户产生了一种“幻觉”，让他们感到图片的上传似乎没有花费任何时间(用户可能根本就不会产生任何感觉，因为流程太自然了)，而实际上，用来上传图片的时间长度从技术角度讲并没有真正被缩短。如此一个低调到用户可能完全不会察觉的设计方式，给产品体验带来的提升作用却是相当巨大的。过去，市面上的多数照片分享应用都使用着相同的“传统”方式，即在用户完成编辑并确认分享之后再开始上传流程;而Instagram的方式使其在“轻松”和“快捷”等方面的体验极大超越了同类产品。用户未必了解原理，也不在意原理，他们只是在潜移默化当中选择那些让自己觉得“好用”的产品，放弃那些“不好用”的。消息发送这也是移动体验设计当中的一个典型“加速点”。
7种快速的提升移动端用户体验的方法
一项好的设计往往起始于内容。要想你的移动用户体验更充分的表达和符合实际的操作体验，在内容的设计上你可能需要经过一些调整和改变。不过，你应该从哪里开始呢?内容应该如何适应移动设备并做到可以无缝地工作呢?我想，你可能需要从思考用户如何与小屏幕交互的方式开始，以及它如何能够影响(以及能影响的程度)他们想要去阅读。1.你需要每一屏只保留一个主要信息(想法)当移动设备的内容设计看起来一团糟的时候，试着重新计划和规划页面的元素(这一点在网站设计项目中是一样的)，你需要保证每一个屏幕最多承载一个主要的的视觉或信息。即使现在的手机日益趋向于更大的尺寸和分辨率，也不要被诱惑在屏幕上塞过多的信息!每一屏保留一个主要信息已经足够了，再多，你可能就冒着压倒用户的风险。一般来说，习惯使用移动设备的用户更倾向于多任务处理。他们可能在看你的网站设计的同时，也在看棒球比赛，或者和朋友聊天。通过保持信息和内容的简单和直接，你有一个更好的机会来传达一个想法，同时，这个想法也更容易被用户吸收(因为页面上没有其他不先关的干扰)。但这个想法具体是什么呢?它可以是一组文本、图像和可操作的元素。内容的组合应该让用户做出一个选择:你想要这样做吗?2.优先级导航
详细解析网页设计中微文本的使用技巧
目前，网站设计的最大趋势之一是使网站所承载的内容极简化和微小化。“微小化”的文本元素已经成为一种流行趋势，但这种设计趋势，在设计领域同样引发了一些争论。毫无疑问，小文本在大小和尺寸上可能会导致一些可读性问题。但如果你用心并处理得当的话，小文本区块实际上可以帮助你创建一个视觉焦点和重心，并将用户吸引到设计的特定部分。接下来，跟上思维，让我们来看看这个微小的文本趋势应该如何实现以及它将如何发挥作用，以帮助你获得一些设计灵感。1.创建层次结构和组织感尽管超大型文本随着使用已经在设计领域打下一定的基础，成为主页和标题设计的主要选项。但是目前有一种趋势——在浏览器或桌面的第一个屏上尽可能在保证视觉的基础上提供更多的信息(原因之一可能是设备尺寸和分辨率的不断增加，给设计师更多的设计空间)。这也就是“微小化”文本“横空出世”的原因。字体的大小和比例的不同，使得排版有明显的视觉流动感。通过使用一层很小的文本(通常使用14到16点的尺寸大小)，你可以创建一个额外的焦点让用户聚焦。小文本，特别是与其他较大文本一起使用时，可以吸引用户，因为它们是不同的，这在视觉上就形成了对比。Maxime Bonhomme在其网站设计中使用了小文本。你可以看到，微小化的文本元素提供了关于项目的关键细节，而更大的文本则负责提供工作的描述。你需要观察和注意这些周围有大量空间和内容的微小文本元素是如何工作的。2.形成风格
浅谈国内游戏官网现状及网页设计趋势
为什么游戏官网的构建好像这年从来没变过 ?这是功能使然还是思维惯性?什么才是真正是对的?设计师的工作就是在此框架下在样式上做文章?思考点其实很多，答案其实也是随环境在一直变化着的。今天的答案，也会成为你明天的束缚。但我认为最重要的还是结论得来的思考过程，能有样的一个沟通机制，一个平台来和业内设计师一起交流思考的过程。按部就班，惯性思维的做设计，可能会让你的思路越做越窄。就如ideas这期主题—-”游戏官网”一样，设计师emily和jason会和大家分享下，他们对于游戏官网现状，看法，发展方向的一系列思考。1.未来你的样子：关于游戏类官网趋势的猜想 by:emily用户界面设计随着产品屏幕操作的不断普及，已经融入我们的生活。界面设计是以人为中心，使产品达到简单使用和愉悦使用的设计，用户界面设计对于任何产品、服务都极其重要。在过去几年里我们看到了互联网的快速发展，我们手头上、眼前的信息一直在爆炸式的增长着，视觉设计师当然也不在仅仅只是在视觉上的表现，现在和将来，从 信息架构和交互流程的角度，无论未来的潮流如何变化，归根结底，设计师们都在努力的降低用户的认知成本。让界面所承载的信息内容更直接、便捷的呈现在用户 面前，用户将在不同使用场景需要可以得到更好的支持，用户体验已经成为狠角色。现在的游戏类网站一成不变、让人窒息的网页布局，可否应该让用户被动地接收信息向转为主动创造互联网信息蜕变?如何能让用户达到改变的临界点，需要通过很 多设计技巧来做。未来，随着移动端智能设备用户数量的愈来愈多，表象如何变化，追究实质要如何去思考和准备呢?1.扁平化趋势 游戏类网站可以扁平化吗?那就看你要怎么去做!在没有加入使过多的元素看起来更干净，拥有独特的大的背景图像、前景图像或按钮、文本和导航、更合理使用的 交互方式等，如何把他利用恰到好处?扁平设计有独特的外观，依赖于一个清晰的层次和便于用户理解和互动元素的设计和布局，另外还有受欢迎的JS应用程序及 有小惊喜的交互设计。(有些JS动画暂不支持IE6，但是如果你还因循守旧墨守陈规的话是否改变一下呢，IE6总不可能一直持续下去吧?CSS3大势所 趋，抓紧时间了解学习)http://www.nexon.com/