设计资源

实用!25个小清新定价界面设计

蓝蓝

一个干货推荐啦:25个定价界面网页欣赏!没错!你没有看错,足足25个哦!啊?你问我有木有酬劳,呃!蓝蓝设计说是要给,但我肯定不会要的,虽然很想要,呃,出来混,后来还是木有要。。。)

价格界面是网页中常见的,但容易被忽视的一个部分。想想看,你什么时候见过这些界面呢?本工第一反应就是迅雷、QQ之类的会员充值界面。这种不是经常可以看见,但是又具有明确目的性的界面,如何让它和主题页面匹配、同时又突出重点信息呢?这是个问题!今天就让我们欣赏25个外国网站的定价界面,从中学习经验吧;)

1. Freshdesk

网页设计中背景的创意风格与设计趋势

蓝蓝

正确的背景风格可以为整个网站确定基调。我们搜集了一批使用大幅图像、明亮颜色或出众图案来作为背景的
优秀网站,希望从中探寻当下网站的流行设计风格。

什么样的背景最适合你的网站,这并没有一定之规,但确实有一些共同的要素:
互联网背景的内容应该有目的性。
背景应该与你的品牌风格一致。
背景之上的文字内容应该易于阅读(无论是颜色、反差还是尺寸大小。) 背景的主题在整个网站内应该连贯一致。
背景应该能很快下载并且不会让你的网站变得缓慢甚至卡死。
现在的流行趋势是什么?

就像服装和发型会变,网页设计的风格也在变。对于背景来说,趋势的变化尤其突出。
目前,大量的网站在首屏采用了大图。一些背景是清晰、写实的(如照片和插图),而另一些则可能是抽象隐晦的。大尺寸的、虚化或模糊的图也随处可见。

在Photoshop中创建精细的工具图标

蓝蓝

蓝蓝设计:本教程主要使用Photoshop制作金属质感的工具型App图标,主要通过图层样式来完成,喜欢的朋友一起来学习吧。
1.首先我们来做下背景,这个背景我是先画了个圆做了些效果(投影,内阴影)定义成图案。

e8bea75e8a4e4507a9c39fca2b6b0ef2 用PS创建超写实的工具图标

2.用圆角矩形工具,画部的渐变,在这一步我先画个半径为47的大圆角矩形,在用剪切画个35的小圆角矩形,最后填充投影和渐变叠加。


b53777a3477d45e4812a6be9710f0322 用PS创建超写实的工具图标    

设计沟通的七条经验

蓝蓝

1360228038_79

经常有新入职的同学,搞不清设计师和别的职位如产品经理,在工作内容上有什么区别。回答了几次之后,我总结出两方面的差别,简单概括为:技能和定位。

“技能”指的是设计师掌握了项目中其他角色都不具备的能力——画图。这么概括有点简单粗暴了,事实上设计师的专业能力远比画图两字涵盖的内容要广。但“画图”确实是更容易被所有人理解的说法(向家里长辈解释我干什么的时候,他们如果不理解我就会说是画图的,他们就会貌似恍然大悟地哦一声,终于听到一个他们想要的能听懂的答案了)。伴随着人机界面从命令行到图形可视化,再进化到哪儿哪儿都可以摸的触屏时代,用户对于“美”和“交互”的要求越来越高,设计师的能力和价值也愈发受到重视。

设计师的“定位”,是随着用户体验受重视而发展起来的。互联网产品有一个很重要的特点是免费。聊天是免费的,搜索是免费的,游戏是免费的,杀毒也是免费的。免费对用户来说当然是好事,但免费也意味着用户迁移的成本很低,特别是当产品同质化严重时。一款免费游戏,如果突然宣布收费,市场上又有同类游戏,结果很有可能是大规模的用户流失。和传统行业不同,在免费的商业模式之下,用户黏性、忠诚度对产品来说至关重要;而用户体验就是构成黏性的一个重要因素。于是伴随着互联网行业的蓬勃发展,用户体验设计师,以用户体验卫道者的姿态站了出来。

这么说不代表别的角色不用对用户体验负责。在一个优秀的团队中,从项目经理到开发测试,每个成员都会对最终的体验努力并负责。但设计师之外的其他角色会面临屁股决定脑袋的困境。比如产品经理除了用户体验之外,还要兼顾商业价值和老板需求;开发要考虑实现成本和技术限制;运营要负责营收和转化率等。而设计师的定位更纯粹,自身立场不存在矛盾和冲突:站在用户立场,坚持用户体验的价值,时刻提醒团队用户想要什么;同时负责设计细节的执行。

这样就引出正题了,一个项目团队中设计师和其他角色的矛盾冲突,本质上就是这层定位差异带来的。(开发:这里明明功能都实现好了,设计师你还老是要改来改去的,到底想搞哪样!)基于这种定位冲突,设计师不能简单地把自己定位在执行层面上,还要通过积极主动的沟通,推动用户体验的落地和实现。这就对互联网设计师的沟通提出了很高的要求。

实际工作中,我们每天也花大量时间在开各种会,各种讨论上。沟通的效率和效果都直接影响着最后产出的质量。但在我们看最终的工作结果的时候,沟通作为过程反而不那么直观,很难去评价和衡量。我试着列举设计沟通中容易犯的一些错误,并总结了7条经验,希望对同样在思考这些问题的同学有些帮助。下文主要拿产品经理和设计师之间的矛盾冲突来举例。

1. 避免鸡同鸭讲

双方都在说自己的道理,却不听对方是怎么讲的;或者因为沟通双方无法说出真实的想法,导致沟通停留在表面上无法深入。这两种情况下,沟通效率都很低,而且很难达成共识得到结果。

比如我有一次看到,产品经理在和设计师争执,一个在讲运营的事情,一个在讲设计规范的事情,都在尝试着告诉对方,从自己的专业角度来看,这个事情应该怎么做。讨论几乎无法进行下去,因为谁也不肯让步。这种沟通效率是很低的,双方压根就没有站在同一个层面讲问题,设计师不懂运营,产品经理不懂设计。

 

移动设备上的劝导式设计

蓝蓝

译者序

本文围绕劝导式设计(persuasive design)而展开,介绍了移动终端上banner广告、push信息等典型的劝服失败案例,并从用户与移动设备之间的情感联系出发,探讨了移动劝导策略的几个切入点。所谓劝导式设计,是指通过说服和社会影响,而非通过强制的方式,以达到改变和引导用户态度或行为的技术。这种技术常被应用于销售、外交、政治、宗教、军事训练、公共卫生和管理等领域。近年来,大多数劝导式技术的研究主要集中在计算机交互领域,包括台式电脑、互联网服务、视屏游戏和移动设备。劝导技术可以看成是对用户意图的设计。

作者: Amber Krishan 译者:晓千 秦封
译文

 

【Tips:消费者不会仅仅因为导航很容易而为你的产品买单。】

为移动设备而设计时,设计师要考虑移动设备间的差异,努力提供统一的体验。他们致力于减少点击的次数,使架构更扁平;并根据触摸屏的特点而设计, 在较小屏上规划合理的布局等。这些重点都在通过方便的使用、流畅的导航和简洁的呈现,来确保的最佳的产品可用性。

为确保你的用户“可以做”你想让他们做的事情,较高的可用性是一个很好的开始。但它并不能保证用户“会来做”这些事情。因为,用户不会仅仅因为导航容易使用而来买你的产品。

消费者是否来买你的产品,这和科学的劝导式设计策略相关。通过“人——机” 互动的研究我们了解到,计算机设备本身具备巨大的“劝导”潜力。如果在设备的体验设计中注入激励机制,这些设备将激励我们的用户并驱动他们的想法。

能找到合适的技巧来劝导你的用户是一个巨大的挑战。这涉及到深入理解用户的动机、障碍、信任和感受。上述这些对人的深入理解可以让我们更系统的去了解人们如何使用移动设备,这样,我们就可以找到更有力的方法来劝导用户。

典型的“劝导”失败案例

你的产品能够有效地劝导用户来使用吗?嗯,让我们看一些普通公司通常会使用的典型手段。

banner广告

101个鲜为人知的超实用网站

蓝蓝

101个鲜为人知的超实用网站

今天要分享出来的网站就像水浒传里的108个好汉一样,个个身怀绝技,是滴!我们也做了简单的介绍,因为网站太多,就木有一一截图,大家自行感受一下。(有几个需翻墙)

这里列出了许多鲜为人知的好网站,还有那些大家知道却常常被遗忘的网站。
这些网站中,大部分都在某一个领域非常专业,并且都拥有非常简单的网址,你可以省略搜索的步骤,轻松将他们记在心里。

01. screenr.com —— 将你在电脑上的操作录制成影片并直接传送到YouTube上。

02. bounceapp.com —— 能够将一个网页进行完整的截图。

03. goo.gl —— 将网站地址进行缩写并可以将网址转换成二维码。

04. untiny.me —— 找到缩写网址的原始域名。

05. localti.me —— 能查询不只一个城市的当地时间。

06. copypastecharacter.com —— 复制你键盘上没有的特殊字符。

07. topsy.com —— Twitter专用搜索引擎。

08. fb.me/AppStore —— 无需运行iTunes就可以搜索iOS的手机应用。

09. iconfinder.com ——在这里可以找到图标的所有尺寸。

10. office.com —— 下载办公文件的模板、剪贴画以及图片。

11. woorank.com —— 你想知道的关于一个网站的所有信息都可以在这里找到。

12. virustotal.com —— 对任何可疑的文件或者邮件附件进行病毒扫描。

13. wolframalpha.com —— 不用搜索就可以知道问题的答案 —— 更多信息,请阅读Wolfram提示。

14. printwhatyoulike.com —— 完整的打印网页。

15. joliprint.com —— 将新闻和博客内容重新整合为报纸。

16. isnsfw.com —— 当你想要分享18X网页时为你做警示标记。

17. e.ggtimer.com —— 一个居家常备的简易在线计时器。

18. coralcdn.org —— 如果某网站由于服务器太繁忙而无法访问的话,试试通过CDN来进入网站吧。

19. random.org —— 帮你随机挑选数字,抛硬币~

20. mywot.com —— 测试任意网站的可信任指数。

21. viewer.zoho.com —— 帮你用浏览器来预览PDF文件和PPT。

22. tubemogul.com —— 能同时向多个视频网站上传视频。

23. truveo.com —— 最佳网络视频搜索。

24. scr.im —— 不用担心垃圾邮件困扰,安全无忧地分享你的邮件地址。

25. spypig.com —— 从今往后在你的邮箱里查看收据吧~

26. sizeasy.com —— 将任一产品进行视觉化并进行尺寸比较。

27. whatfontis.com —— 迅速通过图片来确定字体名称。

28. fontsquirrel.com —— 优质的字体大集合 —— 免费自用与商用。

设计师为何做不出产品经理想要的设计

蓝蓝

产品经理设计师之间最常见也是最尖锐的矛盾就是,设计师把花了很多心血做出来的稿子放到产品经理面前,产品看了一下,觉得非常陌生和超出预期,说:“这都是些什么啊”。

(- -#),(- -’),此处无声胜有声。倒不是说这里面谁对谁错,都挺辛苦的其实,但为什么总会落得如此尴尬呢。

世上配合最好的其实就是自己的手配合自己的脑袋。脑袋怎么想,手就怎么画,画出来的丁老头再丑也觉得很亲切,恩恩,是我的好作品(星星眼)。只是等到两个人合作的时候,就有些麻烦了。因为,让“设计师的手”精致地受控于“产品经理的脑袋”,每次画完看一看,觉得对就继续画、错就改的敏捷调控是不现实的。

祸起,在于一些沟通中有很多弊端,唯有解决这些问题,才能让团队和谐地高唱“同一个梦想”。

 

一、产品没有意识到要讲的其实是故事

常见的产品经理提需求的方式往往都是在需求文档里直接写“在Feed上增加一个转载按钮,点击后可以填写转载理由”。这种描述方式其实已经是一个很具象的解决方案了。然后这份包含数十条如此描述需求的文档会被贴到内部需求管理网站上,或者通过邮件发给设计师。

设计师拿到这份文档,通常会觉得很憋屈。哎,忍忍算了,拿人钱财替人消灾。然后拿着这份需求文档在现有界面上去改。但往往会发现产品说这些具体解决方案其实在实现时是有很多细节冲突的。于是,设计师要先逆向YY出这个功能背后的用户需求,然后再尝试在与各种细节不冲突的夹缝中找一个新的解决方案。把这个稿子拿给产品看,产品就会楞一下,说“这是什么…”。(- -#),(- -’)

网页设计中优化图片的6大技巧

蓝蓝

网页设计中优化图片的6大技巧

@南辰_designer  平面设计和网页设计是两个截然不同的领域,这两个领域有不同的设计需求、设计实践和设计方法。

例如,在网页设计中更常使用基于像素或栅格的文件格式,诸如JPG、GIF或PNG。相反,在平面设计领域像logo这样的图形可能会用到不同尺寸,因此使用最多的格式则是EPS和AI这样的矢量格式。然而,用于网页的矢量格式,如SVG或HTML5 Canvas则不能广泛应用,也不会被所有浏览器所支持。

另外,用于web端的图形有基于它们自身的相关处理方式。其中一条便是你要时刻注意文件的大小,因为你需要使你的网页加载越快越好。作为一名网页设计师,你应当尽量减少HTTP对图像的请求次数——无论通过减少图片的使用数量还是将它们整合成CSS sprite——以及确保你选择了正确的图像格式,使其在图像大小和质量间得以平衡。

Photoshop是平面设计师和网页设计师使用的行业标准工具。以下是你在创建web端使用图像时的一些简单的小技巧。

1. 将图片保存成Web所用格式

在网页设计中,你必须确保你的图像大小越小越好。当然,当你想要图片完好显示时可以抛弃这条原则。
在Photoshop中创建图像的完美方法便是平衡质量与文件大小。
网页设计师经常犯的一个错误便是使用“另存为”命令,而不是使用“存储为Web所用格式”。

2702d5d227fdbb0be2cd35ac6a37f76f 网页设计师必须知道的6个小技巧

“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式,包括图像质量、图像分辨率、浏览器兼容性和文件大小。

这一命令会有一个对话框,你可以用来微调你的图像。当你调整图像的设置时,它会显示出文件的大小和图像的质量。

不容错过!20套新鲜出炉的Web+Mobile PSD素材下载

蓝蓝

在这篇文章中,我们展示的是一组免费漂亮的UI设计素材套件。这些线框图和 UI设计工具包让设计师在设计用户界面原型的时候能够非常便利,希望这个集合会帮助到你的 UI 设计项目。

优设11月超赞资源:
50套万里挑一的设计师专属精华资源包
超实用的PHOTOSHOP亮度调节脚本

UI Kit

 

iPhone UI

一组启迪设计灵感的复古风格网页作品

蓝蓝

有时候一个纹理,一个文字,一张背景图,一个颜色体系,甚至一个小图标,都能让页面有复古的感觉。在这篇文章中,我们收集了许多这种风格的页面。如果你的下一个项目是需要设计出复古的感觉的话,那这篇文章可以启发你很多的设计灵感。

相关阅读:

复古背景下载 →漂亮的复古纹理背景素材下载
复古字体下载 → 25套复古怀旧字体打包下载
复古网页欣赏 → 44个绝赞的复古风格网页设计

Cyclemon

Ready to Inspire

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档