推荐阅读
精选国外非常吸引人的旅游门户网站设计欣赏
其实酒店和旅游类的网站最能体现多媒体内容和文字的搭配技巧了，这类网站通常需要营造氛围，展现美感，体现吸引力，优秀的案例比比皆是。今天我们就来看一组优秀的案例。现如今的旅游和酒店类网站设计的越来越带感了，壮美的风景和精致的界面融为一体，优质的服务和梦幻般的界面让用户在网站中流连忘返。这些网站以惊艳的图片和视频立足，配合以突出的现代网页设计技术，结合当下的设计趋势，视差滚动、全景图片、响应式布局、动态图片一个都不缺席。这些网站巧妙地将多媒体技术、文字排版和特效平衡为一体，为用户提供了身临其境的体验。>Pygmy ElephantPygmy Elephant 是一个旅游机构，网站为用户提供了逼真而难忘的视觉体验。其中涵盖的多媒体类型丰富，通过丰富的视觉体验鼓励游客踏上旅程。网站使用了视频背景，漂亮的图文混排，精致的交互细节。>Cruise Me为了让项目效果突出，设计和开发团队使用了诸多先锋的技术。当用户打开网站的时候能够看到首页上交互性极强的地图，每个地标都能够为用户提供丰富的信息以便浏览和了解。再向下，用户可以翻看不同主题不同旅游项目的卡片，有目的和针对性地了解具体信息。整个网页的设计友好而令人愉悦。>Bird Luxury Travel PR
PHOTOSHOP绘作逼真蕃茄
4.画个大椭圆，羽化20，反选，增加亮度30。 5.取消选择后，用加深和减淡工具处理周边，上面和两边减淡，底部加深。使用加深和减淡工具的时候，需要不断的尝试，这时最好给图像做个历史快照，或是复制一层来做，这样便于修改，涂抹时次数是很多的，不一会就数十次了，在历史记录中可恢复不了。 6.蕃茄有几个瓣，现在来做这几条陷下去的纹。画个椭圆，用选择-变换选区旋转和移动到适合的位置，羽化1，在凹纹的位置用减淡工具檫。 7.反选后用加深工具檫。 8.同样方法做出余下的陷纹。观察整体，再对局部作一些加深增强立体感，可加轻微杂色，数量约1。 9.给这个层命名“蕃茄”，新建一层，在上部画个小椭圆，羽化3，填充灰白性线渐变，将图层模式设为“颜色加深”，作为蒂部位下陷的暗调。向下合并到蕃茄。 10.新建一层，命名“茄蒂”，用钢笔仔细钩出蒂的形状，填充绿色（46/77/27）。 11.绘画实物时，离不开我们的好帮手――加深和减淡工具。刚接触时，我也是极为头痛的，它们不象图层样式那样，调节参数就可以得到效果的，不容易掌握。但只要经过耐心的练习和尝试，你会发觉它们实在是可爱极了。处理茄蒂时可用钢笔辅助钩出叶瓣，也需要载入茄蒂的选区，用轻移、旋转、羽化、反选等动作来得到我们需要的工作选区。完成后加杂色1.5%。
Photoshop打造斑驳压纹镂空文字效果
简 介】 利用PS可以打造出各种各样奇特的文字效果，下面我们来制作一款压纹镂空文字…… 先看一下效果： 效果图 制作工具：Photoshop CS 制作过程： 1、新建一个宽度为100像素，高度为100像素，分辨率为350像素的文件。 2、新建图层1，单击工具箱中的“自定义形状工具”，在其属性栏中单击路径按钮，并在形状下拉面板中选择五角星图案，然后在窗口中拖拽创建一个五角星路径，如图01所示。
自己动手用Dreamweaver制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 图1 在Dreamweaer中新建一个文件，绘制一个层，在该层中插入一个表格(如图1)，对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的CSS样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为“None(无)”，将“Hover”的“Color(颜色)”设置为红色，最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界)，在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置(如图2)。在时间线窗口中的第15帧处再次单击右键，在弹出的快捷菜单中选择“添加动作”，为该帧添加一个交互行为，Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮，从弹出的菜单中选择“Timeline/Stop Timeline”，打开“Stop Timeline”对话框，选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”，动作为“Stop Timeline”，这样当时间线运行到第15帧时，动画将停止播放，这样就实现了菜单条弹回的功能。图2 2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为，这样就实现了菜单弹出的功能。添加了这两个交互行为后，在时间线窗口的相应帧上面都出现了一个蓝色方块，它代表一个交互行为。选择“自动播放和循环”复选框，使动画能够自动循环播放(如图3)。图3
最新发布
如何从零开始做出数据可视化的动效图
58作为中国最大的分类信息网站，其服务覆盖了生活的各个领域及中国所有大中城市。在58高速平稳发展的今天，我们希望用数据可视化的效果来整合展现58集团的数据资源，让大家全方位了解58的价值。由此，我们启动了“城市脉动”项目。(注：文中附图所有数据均非真实数据，仅为效果呈现)视觉：温六六 动效：软饼干一、调研我们对“城市脉动”项目的整体定位进行了思考，如何展现数据?展现场景是怎样的?我们的用户是谁?我们该给用户怎样的体验?围绕着这些问题，整个项目的核心目标也愈发清晰。数据是什么？是信息的表现形式和载体(定义中摘取)。那么抛开狭义理解的数字本身，从表现形式和载体入手，只专注于各类数据应用于不同环境下最优的表现形式，让展现更具有目标性，让设计“有理有据”。展现场景是怎样的？我们的用户是谁？有展示场景才会有用户，因而我们将用户与展现场景放在一起进行分析。整体项目是利用大屏设备进行相关数据及图表展示，我们预想将项目应用的场景分为两种情况：1.专业展示：参与商务活动、分享或为某些团体进行讲解及展示使用。
详细解析中文字体常用技法及设计应用
当接到一个设计主题的时候，大家经常怎么做?分析设计主题传递的信息，头脑风暴，找参考。这些工作的目的，是为了找到合适的设计语言，应用某些技法，通过创意组合，用图形传递情感信息，应用在特定的主题下。我的目的是把各种技法归纳到这些常见的情感和应用主题中，比起罗列各种设计技巧，在什么场景下用才是更重要的。就像技术再好，脱离实际的业务也是空中楼阁没法落地。即使信息内容千千万万，但传递的人类情感或者应用主题是有限的，这些情感和应用主题就像一个个筐，各种信息都可以分门别类的装进去。比如情感有欢乐，悲伤，恐惧，惊悚，愤怒，迷茫，坚定，沉稳等，应用主题如自然，战争，科技，古代，文艺，鬼神等。设计师根据表现的主题情感在创意初期会有个方向，如果能汇总尽量多的实例甚至提供技法建议，能更快的帮助设计师把握设计特征，专注在创意上。我从网络借用了很多优秀设计师的作品作为案例，感谢他们在网络上无私分享的作品供大家学习。本人非专业字体设计师，暂不讨论规范宋体字的书写方式，有欠妥的地方望大家多留言指正。做宋体字经验方法总结先从做字的流程说起，然后按照笔画粗细，装饰字角汇总，笔画变形种类，单字的设计方法，词组的组合方法，特效几个方面，从微观到宏观逐步展开。1.0 做字的流程(图片来自秦德超老师的工作坊)选择字体变形的风格。分析设计需求，找到潜藏的情感诉求，如粗狂、柔美、空灵、时尚…找到相应的图形特征;
如何设定用户界面中的人称视角
从「我的电脑」-「电脑」到现在的「这台电脑」，人称视角的转换会带来什么体验差异呢?这篇文章从3个角度讨论了这个有趣的话题。欢迎关注点融设计中心DDC微信公众号：「微信ID：DR_DDC」如今我们每个人手机里都下载了各式各样的App，每天花费大量的时间去使用和维护，你不仅享受App带来的各种服务和乐趣，还通过它们创建和管理自己的文件内容。你在互联网上留下大量的记录或内容，是否有想过这些内容是否是“属于”你的?而越来越多的App开始提供定制化的、拟人化的服务，你和App之间的互动关系有没有变得更像真人之间的交流?这篇文章讨论了一些有趣的问题：1)一个产品在其用户界面上应该提供什么样的人称视角?2)其功能服务和用户之间，是一种怎样的关联?3)我的收藏 | 你的收藏 | 收藏 | 这三个不同的词组，真的会带来什么体验差异吗?这篇文章也许并没有给出明确的答案或实践指南，但这个问题却是我们在设计产品及界面时值得一想的。
移动界面动效设计的全方位科普指南
读完顾小犊这篇文章，你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等，特别全面，强烈推荐收藏学习。动效在用户体验设计中正变得越来越重要，那么动效能带来什么好处呢?体现交互层级动态界面使人更容易理解交互层级关系，减轻了人们的认知负担给予反馈给人感觉界面是活的，让体验流畅弥补静态页面的表达不足在内容优先的设计趋势下，用户界面变的更加简洁。这将给用户带来操作上的盲目感;动效则可以在不打破界面美感的前提下，弥补认知的损失原则设计是为了解决问题，动效设计作为设计的手段之一，能解决一些静态界面设计无法解决的问题。但是，它并不是万能的，动效要克制，过多、过慢或不适合的动效，只能让界面失去重点，让团队和用户怨声载道。
详解Banner文字排版的七大金规玉律
文字的排版有多少技巧，没有人可以说的清楚，因为每一个在不同的基点，看问题会有不同的观点。所谓规律也是个人的一种理解。但是掌握这些规律确实可以少走一些弯路。版式更接近大众化，赢得更多的好评。毕竟得到认可才是最重要的。一：文字中间大，上下小二：少用黑色亮色为主三：字体一识别四：文字小.乱时加图形来弥补五：数字夸大六：文字扎堆七：颜色多变一：文字中间大，上下小不敢说所有的排版都是这样，大部分的排版都在遵循着这个规律。从审美的观点上看，大概是比较协调的原因吧。二：少用黑色亮色为主除了一些特殊商品外，几乎没有多少banner的颜色是黑色的。人们买东西是要激情和心情的，黑色会使人激情消退，没有购买的欲望。文字颜色，很少用黑色的，但在特殊场合也会适当搭配一点，作用也很好的。下面这幅，文字用了一半黑色。说明这位设计师虽然喜欢黑色，也不敢过分使用的。三：字体易识别文字的具体字体，banner没有要求，但一定是易识别的。人们买东西不是猜谜语和欣赏。就是要简单。研究半天才能看明白的文字，客户早甩你半条街了。下面这幅好看不好看先不说，确实不容易识别。有些失败。四：文字小.乱时加图形来弥补文字太小，很难引起别人的注意力，一定会采用图形的办法，来提高注意力。具体也没有什么太多要求，就是要协调。五：数字夸大一些特殊数字夸大，会让人一眼就看明白你的广告。比如50%等。这才是宣传的目的。六：文字扎堆文字排版就像是买东西，都是扎堆的。读文字也是，找到文字，就要一读到底的。不可能，到处却找。七：颜色样式多变几乎所有的banner的文字颜色和样式都要变化，这样就可以将文字变成图形。看起来更舒服。
3个设计方法帮助设计师变成资深设计师
形成自己的方法论是高级到资深级别很重要的一步。之前一直也没讨论过这个话题，因为我觉得设计方法是因人而异也是不尽相同的，然而形成自己的方法论其实并没有那么简单。欢迎关注作者应骏的微信公众号「shejishiyj」UI设计狮联盟。方法论说白了就是你的设计流程，它是可以不断循环，并且每一个流程的节点都是可以被找到源头的。为什么我们需要形成自己的设计方法论，因为这样才能让你的设计有理有据，在评审的时候不会被牵着鼻子走。目前可能大部分设计师的设计流程依然还是这样：说好的用户体验呢?这五个步骤里有一个和用户有关吗，并没有。有些甚至连2，3都没有。是不是觉这样工作很机械，就像一直在喝没有源头的水，这是死水迟早有一天被喝干或者污染。所以，我们在做设计的时候需要明白是在为谁设计，不是为自己也不是为交互和产品，而是为用户。有两个忌讳的点要注意一下：1.虚拟化的用户，也就是你脑子里所想象的用户。2.别人口中的用户，来自产品，运营等上游提需求者。这两者都不是真正的用户，我称他们为橡皮泥用户。因为这部分用户他们的信息有真实的也有虚假的，他们被刻意营造的环境和参杂了主观意识的人捏造成了不同的形态，可能一部分是他原来的自己，另一部分却被改变了，而他原本的样子你已经不能分辨。所以，上图的流程，我们纯粹是在为那部分橡皮泥用户而设计，而真正的用户需求我们却忽略了。
UI设计师急需掌握的平面设计基础教程
曾看到网上一些帖子讨论UI设计师和平面设计师的差异，总结为思维方式的不同: UI设计师考虑用户习惯和易用体验，平面设计师专注于更具吸引力的信息传达。两者侧重不同但专业上有非常大的交集，信息传达的核心基础技能其实都是相通的。平面设计是如何表达一个事物，而UI设计是如何让用户更好使用一个事物，表达层面令人费解则卡在了使用的第一步。UI论坛有人吐槽:“不要用平面设计思维做UI”，然而许多UI设计师往往缺少平面设计最基本的意识。常见的平面设计基础问题平面设计的基础设计理论包括: 色彩构成、平面构成、字体设计、图案设计、版式设计等。平面设计基础能力可以概括为视觉化处理与传达信息的能力。UI设计在视觉化界面操作的阶段，与平面设计的交集是如何组织和处理每个界面的信息。平面设计中俗称的排版，把文字、表格、图形、图片等进行合理的排列调整，有效传达信息，并达到美观的视觉效果。1. 如何组织信息组织页面信息的首要任务是判断信息优先级，分清重要信息与次要信息，删除无用信息。化繁为简，降低视觉干扰。举个小例子，从一份简历，就可对一名应聘UI设计师的平面设计基础能力略知一二。首先对无用信息的判断(讲真，曾看到简历中还有体重信息)。其次是关键信息的组织排列、清晰表达。个人信息：姓名、年龄、照片、联系方式;基本信息：工作经历、教育背景、职业技能;其他信息:兴趣爱好等。数份简历扎堆时，信息有效快速传达是第一步，再者才是加入一点点自己的小个性。2. 如何对齐日常工作中，经常会遇到有关如何对齐问题的PK，始终争论不休各说各理。首先达成信息优先级主次的共识，可以提升排版的效率。a. 信息分组先从一个酒店预定成功通知消息案例来看，通知信息文字平铺直叙，并未合理分组(左图)。图片部分上方酒店评价、信息地址和电话操作按钮剧中对齐，酒店名成为了一个小标题。做适当调整后(右图)，使得正文通知、价格和时间字段分组明确。电话按钮同酒店信息组对齐，使得图片区域的文字和操作信息更为整体。
33款最值得学习的IOS中的APP图标
苹果公司一直以来对产品细节非常关心，因为细节对于用户的完美体验来说非常重要，对于设计师也是。苹果的所有者们对产品的相关设计要求很高，只要有一丝不如意，就会直接抛弃。对于图标来说，同样如此，设计感至关重要。在App Store中，一个好的标志可以在茫茫软件海中脱颖而出。很多人会发现有些软件下载到手机后可能一个月甚至更久都不会打开，然后某天被默默地拉到卸载框。。。而一个出色的图标，会促使用户打开的渴望，提高软件的使用率，达到软件所有者的目标。那IOS操作系统中有哪些值得设计师们学习的APP图标呢?为了让你更方便地了解这些令人惊艳的图标，我们收集了33个美观、新颖、充满现代感的例子。下一次再做IOS的项目，你就有可以借鉴的啦~01.1Password“0”在这里代表了想象力，很像Obvious的挂锁，但是1Password的图标传达出此APP的服务核心——安全性。你会觉得无论你在其中存储什么，都是可以放心的。02.A Good Snowman Is Hard To Build游戏人物往往因为太复杂而不能用在图标中，但对于A Good Snowman Is Hard To Build英勇的怪物并不是这样。它在你的手机屏幕中的各种软件中脱颖而出，甚至拨动着你内心打开它的冲动。除非你是个怪物，不然你没法抵抗住诱惑~
8种常见的产品版式设计方法汇总
不管你是UI设计，还是工业设计，甚至动画设计，终究离不开对外包装自己产品的版式设计，所以版式设计这块非常考验设计师的基础功力。今天分享的内容是Behance上设计师所汇总的常见排版样式，对于大家做设计还是会有很大帮助的。1. 大且醒目&美观的排版设计版面设计大概是一个优秀的网页设计中最重要的部分了，今年的版面设计会围绕着大且醒目，个性鲜明的标题。2. 颜色渐变渐变绝对是时下最“in”的趋势，在版面设计中也会经常见到。