2018年最全的网站设计6大技巧「附案例」
网站设计简单又困难,一个成功的网站不仅仅需要引人注目的设计,还需要优秀的内容。它能成为一种独有的风格,可以让用户享受良好的用户体验设计,并且一眼就能了解网站的主要信息内容。本文整理了2018最佳的网站设计技巧,这些技巧能够帮助新手设计师“少走弯路”,设计出一个属于自己的优质网站。
一,网站设计的6大技巧
1. 视觉放首位
相比复杂的文字内容,一张简单的图片可以向用户传递更多有价值的信息。我们往往能够敏锐感知视觉传达的信息,其中大脑所接收的信息中90%都是可视的。图片拥有跨越语言障碍的魅力,用户对视觉图片的感知往往比文字深。
技巧:
图片与产品目标一致在首页显示主图片使用没有失真的高质量图片使产品图片足够突出改善产品的视觉界面设计将图片融入到设计中
不要单纯为网页设计找一些好看却无用的图片,用户往往会忽略。相反,选择那些能表明产品用途的图片。用亮眼的视觉设计来抓住用户的心。
2. 手机端友好—自适应设计
2018年3月26号Google正式宣布,经过大量测试后,符合mobile-first index最佳实践(best practice)的网站开始向mobile-first index转移。未来PC端和移动端搜索都将以移动页面为基础了。
我们现在的生活完全离不开手机,当用户在手机上浏览你的网站时,希望看到的是和网页端是一致的,并且需要用户体验更好的设计。对于每一个网站来说,自适应设计是必须且必要的。
3. 丰富的交互功能
优秀的交互设计网站能给用户带来愉悦感,提高用户体验。Mockplus能够帮助你快速创建交互原型页面,让你的网站设计更加吸引用户。
技巧:
要有对比度。
保持一致性动效使用适当
避免弹窗设计优秀的表单设计
4. 导航栏清晰
最前沿的中国产品人和设计师
摹客专访
每个网站最重要的部分是其导航菜单。这是的访问者浏览你的网站的主要方式,因此确保它的易用性至关重要,它必须是简单并且直观的。
技巧:
使用友好的文案
我们既希望文案简单易懂,也希望它富有个性。但重要的是不要忘记向用户解释你的网站的用途和工作是什么。
不超过7个菜单项
拥有大量菜单项只会给访问者造成混淆,他们需要花费更多时间阅读所有可供他们点击的选项。
永远不要超过三层
可用性设计的最基本规则之一是在距离主页三次点击之后获得所有信息。
你的品牌标志应始终导航至主页
你的品牌标志不仅仅是为了美观摆放的,用户更希望能通过点击你的品牌回到首页。
避免下拉菜单
为什么要避免下拉菜单:
搜索引擎在抓取下拉菜单可能有困难。用户移动眼睛的速度比移动鼠标的速度快很多,当用户将鼠标移动到菜单栏决定点击时。你们给的选项太多,会造成用户反感和困惑。用户可能因此错过重要页面。
5. 突出主要网站信息内容
用户达到你的网站可能是通过某个和你产品相关的关键词,所以在用户浏览你网站时要给到用户你网站的主要信息内容,突出展示你网站的产品。确保用户一眼就能了解你网站卖点。
技巧:
产品信息文字加粗显示以图片信息的形式能够更好的吸引用户
6. 一定要“留白”
“留白”能够更平衡的布局,更清晰的呈现元素效果,更能吸引用户注意。
如果你在浏览网站,当布局太糟糕时,你会很费力的才能确定信息内容;太紧密的字间距、段间距;没有足够的留白空间,那么这个网站的用户体验肯定是很差的。
留白区域能够很好的指引用户,如果元素过多,那么用户的注意力会分散。留白能够让用户尽快的寻找到所需要的信息,提高用户体验。
二、2018年优秀网站设计案列
Minimalissimo 2
2. E-commerce theme
3.Personal Portfolio Site
4.Ben Hardman
5.ThoughtSpot
6.Wingnut & Co.
网站设计想要做到吸引人,只要做到这四步
企业做网站最终的目标都是吸引用户,一个好的网站是能够吸引很多用户的访问。现客源天下为你解答网站设计想要做到吸引人,只要做到以下这四步:
一、网页打开的速度。网站排版要美观,内容要突出,如果网站虽然内容丰富,但没有重点,等于内容都是无效,这样用户访问时只时看看,没有意义。
二、简单舒适的设计。网站的设计风格要做到简单一致,既可以突出企业的品牌,也可以传递品牌的信息,提升用户的好感度和信任度,而好的页面设计也同样可以避免页面信息复杂,提高用户使用效率。页面的设计要大方得体、布局要合理,尽量满足不同用户的需求和舒适度。网站色彩搭配要合理,要有冲击力,优秀的色彩搭配可以提升网站的吸引力,也可以更好地表达出网站的核心思想。其次,用户为了使用方便,通常都会选择移动终端来浏览页面,所以,一个有吸引力的网站,不仅要做好电脑终端的网建设计,还要重视移动端的用户体验度。
三、导航的栏目结构要简化,设计要合理。很多用户都习惯通过手机浏览网站,所以,网站导航的设计要精简。因为手机的屏幕比较小,对栏目的设置要掌握好,要整理出最主要的信息,将重要的信息传达给用户。
四、网站内容的建设。在网站建设中比较重要的是一个有吸引力的网站是需要优质的内容支撑起来的,但是网站建设内容却是非常艰巨的。只有高质量的内容才能吸引用户,留住用户。用户对新鲜的有价值的内容最感兴趣。
网页设计:高雅白打造极致的官方网站
一般使用白色作为主色调的网站设计都是非常简洁、干净和优雅的,而且白色大部分人都喜欢使用,包括现在实生活中的建筑设计。白色是全部可见光均匀混合而成的,称为全色光,是光明的象征色。白色明亮、干净、畅快、朴素、雅致与贞洁。但它没有强烈的个性,不能引起味觉的联想,但引起食欲的色中不应没有白色,因为它表示清洁可口,只是单一的白色不会引起食欲而已。
白色在网页设计中的重要性
很多人以为使用白色是很枯燥、没有创意或者是很老土,但是很多设计师使用白色创造出很多优秀的设计作品。
而使用白色不一定是”极简的”,极简主义并不依赖于任何特定的颜色。同样,”空白”也并不一定非要是在元素周围使用白色。你——设计师必须做出选择。
白色有着很好的拓展空间,适当白色可以非常棒的点亮一个设计,可以让暗色的色调,比如红色、绿色、蓝色和紫色看起来更醒目。
白色的背景文化
白色的颜色,象征着和平和谐的社会。白色是非常广泛的应用在基督教,有着纯净,真实的,高贵的象征。
在西方,特别是欧美,白色是结婚礼眼的色彩,表示爱情的纯洁与坚贞。但在东方,却把白色作为丧色。
网页设计中使用白色的好处
我想很多人都同意,说白了就是一个干净,纯洁的形象。但大多数网页设计不就是为了这个目标吗?网站简洁干净,而且有效的组织内容和元素,这就是我们常说的简洁的网页设计。
接下来我们看看一些优秀的白色的网页设计例子,看看设计师们是如何利用白色空间、如何排版和配色的。
2018年网站设计趋势,值得一看!
如今网站已经变得十分普及,你的同行一般都有网站。那么究竟怎样才能让使你的网站脱颖而出呢?首先你需要一个自助建站平台来制作你的网站,如:又快又好智能建站。其次你需要了解2018年网站设计的趋势,这样才能确保你制作的网站能跟上时代。小智最近浏览了一些有设计亮点的国外网站,也看了一些文章,以下五点供大家参考。
一、添加装饰性细节
极简、留白、清新的设计风格已经流行了很长一段时间,但是在2018年要重视装饰性设计细节。特别是几何形状和图标。它们可以为网站上重点区域增加视觉聚焦点,同时让网站显得更加好看。
装饰性细节小智提醒:“一切东西都需要适当”。我们要确保这些装饰性细节的加入是为了增加我们的视觉聚焦点,而不是分散我们用户的注意力。
二、打破网站(布局)规则
新潮的网站正在逐渐改变用户的浏览习惯。就拿导航来说,传统的导航都是在网站顶部横向排列,这样虽然也很不错,但我们不妨也尝试个性化导航。这样能使你制作的网站让用户“耳目一新”。
打破网站布局规则所以自2018年起,越来越多的网站会打破布局规则,变得更加时尚和个性化(大家可以想象一下杂志的设计思路)。
比如:
1、不同尺寸大小,自由搭配页面
2、不对称的布局方式
3、各种内容(文字、视频、图片)都同时存在于一个界面
小智提醒:打破固有的布局规则确实能使我们的网站显得更加个性,但是千万不能设计得让用户半天都找不到想要点击的内容。如果要非要在个性与用户体验度间做个选择的话,我劝你还是选择后者。
三、多元化的动画效果
网站动画的交互性使网站变得更加吸引人,同时提升访问者的浏览时间。而网站动画在前几年就有了,但传统的动画效果过于单一,未来多元化的网站动画或将成为未来趋势。
多元化的动画效果比如:
1、视差滚动效果
2、页面之间的转换效果
3、元素或者模块间的动画效果
4、鼠标悬停动画效果
5、自定义动画(又快又好自助建站里模块自带的动画)
小智提醒:在网站中不要过度的加入动画效果,这样会增加负荷,延长网站打开时间。
四、视频和3D效果
将视频或者3D效果融入到网站中。比如,你的产品的每一个角度都能展示给用户,这样会有多吸引人。
小智提醒:尽管视频或3D效果会使我们的网站看上去很高端,但是视频内容、位置摆放和视频大小同样关键。
五、颜色上的突破
2017年从柔和的小清新色到充满活力的暖色,再到渐变色和极简色,网站流行的色调一直在变。当然黑白相间的风格永远不会过时。而在2018年,一种特殊的颜色:紫罗兰色,正在逐渐的流行起来!
总结:2018年的网站设计趋势,基本上都是打破常规、提倡原创,这样使得网站变得更加个性化。
2017最新的网站设计趋势
有时候我们可以通过去看一些新网站,去了解网站的设计师的想法,你能感受到网站的氛围,现在的网站设计趋势,很多设计师大胆的使用色彩,传统的头部导航的做法现在开始慢慢被抛弃,取而代之是一些动画图案,充满着神秘感。你会怎么想呢,是使用更纤细的字体或是使用更详细的细节表现,或是使用图标风格的logo。看看下面的一些比较新的网站设计,或许会有些新想法的!
1:彩虹色
当你听到彩虹色的时候,首先想到的可能不是好的设计。因为以前有太多的例子因为使用彩虹色的配色,最终结果坦率的说,是非常灾难的设计。然而今天,彩虹色的配色却不再是灾难,他们优雅,简单,并且只在复杂中恰到好处的使用彩虹色。彩虹配色不仅适合小网站,一些大品牌同样适用。如github的会议中心,Southwest 西南航空公司,London Grammar’s都使用有趣的彩虹配色方案。更有趣的是,每个设计使用不同的方式表现但是使用同样的颜色概念。黑色背景上搭配彩虹渐变字体元素:Github使用一个简洁的黑暗美学背景搭配渐变的文字信息,用户界面元素从关键的信息去吸引用户的眼球(如日期)以及最关键的购票按钮。彩虹渐变简单而微妙,同时传递充满机遇与乐观的情绪,这似乎是鼓励用户购票时正确的选择。Southwest 西南航空公司背景采用的彩虹背景元素,同样字体也使用时渐变填充,渐变符号为网站提供了一个视觉焦点,内容相对来说可能比较枯燥乏味,颜色则赋予文字一定的生命力,帮助用户去点击。London Grammar 背景使用一个巨大的彩虹渐变球体,并且伴随着音乐而像水滴一样不停的移动与变化,从视觉上吸引用户告诉他们与Spotify合作。元素的变化非常有趣,但是颜色却是第一个吸引用户的。
2.传统网站首屏的没落使用大的照片或者是轮播在头部这种设计方式在网站首屏设计中好多年,但是现在很多设计师开始使用更紧凑的滚动结构,更多的元素,更少的构成。结果就是,一个白色或者是深色的标题字体,然后夹杂一些漂浮的元素,大家对于这种趋势贬褒不一。有些视觉效果很有趣,单总体来说,会少了一些协调感。
传统首屏的没落好处就是看起来很好,非常不同,问题是,是否有足够长的信息去传递他们的兴趣,或者用户会对一个不太直观的网站体验做出积极的回应。这是一个值得注意的趋势,因为他很可能是在进化的早期阶段,设计师准备做一些不同,这是可以理解的。通过尝试是迈向新事物的第一步,到目前为止,在这些概念设计中,设计师可能在一些组合上面做的还不是很好,不够对于这种趋势是值得期待的。
3.深色的图案动画
这可能是网站设计中最有趣的设计趋势:深色的动画效果通过不同层次的表现,在视觉上面很有趣神秘,另一方面,动画的图案的组合变化,也可以让用户参与到设计中来。另外,他们可以通过不同的方式来运行,不需要去设置尺寸或者是动画的参数。下面的例子都以不同的方式使用深色动画效果。从某种意义上来说,设计者希望用户更多的互动,移动鼠标得到意想不到的效果与惊喜。虽然这些设计看起来很酷,但是他们也会有一些挑战,并不是所有的用户都这种这种暗黑色系的审美。而且在某些环境下面,它可能不太好。但是,设计师想做一些不同的东西来表达时尚或者是一种情绪。这些暗色调的组合,可能没有太多的颜色吸引你,这样的好处就是一些有颜色的东西突出重点,而且黑色图像的层次对比度也是不一样的。
网站建设不再难 - 2018年最好用的网站设计工具集锦
由于代码技术的限制,普通大众往往在网站建设方面总是一站难求。但是,想要拥有一个自己的网站,真的必须由程序员通过代码实现?哼,在当今满满科技感的新时代,这个问题不存在的~ 小编为大家整理了个人认为最好用的免费网站设计工具。新的一年,拥有一个自己设计的网站不是问题!
根据经验来讲,糟糕的软件,也一定会导致糟糕的工作效率和成果。如果你不是专业人员,光是前期工具的选择就足够让人头痛了。正确的网页设计工具可以简化工作流程,高效快速的完成工作。那什么是好用的网站设计工具?不用说,一定是高效,省时,省事,低成本的产品。
"The best design tool is a long eraser with a pencil at one end." -- Marty Neumeier
针对不同的人群,适合的工具不同,“最好用“的定义自然也是有所区别的。以下,我将我认为的“最好用的免费网站设计工具”分类整理给大家:
- 针对初学者的网页设计软件
- 基本的网页设计软件
- 好用的网页设计助手
言归正传,让我把这些个人认为最好用的网站设计工具分享给大家吧~
"Good art inspires; Good design motivates." -- Otl Aicher
针对初学者的网页设计软件
1. Wix
价格:基础版免费
付费模式4.5美元/月 起
适合人群:非技术性人员
简介:可以自由拖拽编辑的网站建设平台。Wix 提供完整的一站式网站创建服务,包含注册网址、网站设计、网站管理和修改,让用户只需要操作GUI界面,就可以创建网站,不需要了解DNS对应、网页编程语言、服务器创建/租赁等事务,一切都由 Wix 自动化处理,让用户能专心在网页视觉与内容呈现上。
个人体会:Wix的最大优点是可以自由的拖拽组件。你可以按任意大小任意布置按钮、图片,或文本框在网站上的任何一个地方。但缺点是,如果改了模板,很多内容和格式就不使用了,几乎得重新做网站,而且它的手机模式,需要对内容重新进行编辑。因此,如果网站经常更新的话,每次更新后都得用手机编辑器再改改手机版本。因此 Wix 比较适合不经常更新,但设计别致的小型网站。
2.Squarespace
价格:免费注册建站
适合人群:最适合非技术型人员(不需代码、设计功底)
简介:Squarespace这款自助建站服务始于2004年,十年的岁月使其发展成了使用最广泛的建站程序之一。不需要设计或是编程基础,便可通过Squarespace快速搭建一个精致的响应式网站。它本身提供了三种定价模式,第一种是可免费注册与建站。但若要发布网站,则有根据网站类型每月12至40美元的两种方案可供选择。
个人体会:Squarespace最大的特点是注重细节。从创始人Anthony Casalena的一些公开信息中知道,squarespace这款智能建站产品非常适合个人网站,因为它很多模板的表现模式和后台插件体验都偏向小站长,立足于把自己的小站打造为细节丰富的网站。
"Creating something out of thin air is easy. It’s finding the air that’s hard. " -- Asher Trotter
基本的网站设计软件
1. 原型设计工具 - Mockplus
价格:基础版-免费
专业版 - 199元/年
网站设计的第一步是准备网站原型。而原型设计的任务就是根据用户的需求描绘出页面的草图。应用市场上不乏一些优秀的原型设计工具,例如Mockplus。作为一款面向国际市场的原型工具,Mockplus不仅仅在手机App制作上有出色表现,网页设计也非常给力。
作为一款优秀的原型设计工具,Mockplus是怎样实现网站设计的呢?请参考Mockplus例子项目:StyleXstyle - 时尚类网站原型。
第一步:下载Mockplus并登陆账号;若没有Mockplus账号,可免费注册。
第二步:打开Mockplus,选择网页项目类型,设置网页宽高。网页最大高度为6000像素。
第二步:从软件左侧组件库中拖拽添加需要的页面元素:按钮、图标、文本框、图片等;右侧面板支持调整页面背景、字体、字号。
第三步:为特定组件添加交互:页面跳转链接、组件跳转链接等;右侧属性面板中支持多种属性、交互、页面设置。内容非常丰富。
第四步:通过F5本地预览或发布HTML在线预览。PS:Mockplus提供8种预览方式。
StyleXstyle在线预览地址: http://run.mockplus/yYoEMZcBxFGdhfYW/index.html
2. 多才多艺的设计工具 - Photoshop
价格:9.9美元/月
虽然它不是免费的,但它作为最佳网页设计软件市场领导者,它的地位不容忽视。那么关于Photoshop本身:一句话,它是一个非常多才多艺的工具,可以用于任何类型的设计项目,而不仅仅是网页设计。它的主要目的是帮助你使用光栅图形。
除了调整图像或图形的颜色,饱和度,模糊,清晰度等,Photoshop还可以从头创建完全自定义的图形(例如网站布局和可视化)。例如,你可以将多个图像合并为一个项目的一部分,并确保通过使用各种过滤器或执行某些转换将它们全部组合在一起。
Photoshop本身是一个非常手动的工具。如果你想要明确的借助它来达到网站设计的目的,那么你应该具备一些设计技能和知识才能真正能够充分利用它。
Photoshop网站设计教程:How to design Website in Photoshop
3. 网站UI界面设计工具 - Figma
价格 - 个人免费
- 团体每人12美元/月
简介:Figma是第一个实时协作的界面设计工具。它有三个难能可贵的功能:实时协作,矢量网络和版本控制。Figma就像是基于浏览器并具有实时协作功能的Sketch。
个人体会:我起初对Figma的用户体验是持怀疑态度,因为它是一个基于浏览器的界面设计工具。但后来发现用起来还是很灵敏的。而且,浏览器的工具的优点在于接收方不需要安装任何东西,只需要在电脑上打开浏览器便可参与项目。Figma文件可以在Mac、Windows、Linux和移动设备(仅限查看)上使用。
"There is only one type of designer — the type that cares about type." -- Rohan Nanavati
好用的网站设计助手
1. Canva(免费)
非常适合设计定制设计卡片,博客图片和各种社交媒体图片(对于Twitter,Facebook等)。 非常好用。
2.Zeplin (免费)
Zeplin 是面向设计师和前端工程师的标注、Style Guide、备注文档与简单的团队协作工具。
结语
以上,是我个人总结的最好用的网站设计工具。虽然并不是都免费,但以经验之谈,这些工具都是你创建属于自己的网站的好伙伴。希望对您的网站设计有帮助,也期待您在2018年设计出自己独特的网站。
推荐一个牛掰的设计网站,让你的工作效率提高80%
为了让你们能在领导面前秀一波操作,我决定给你们推荐一个非常Very超级无敌牛X的网站——See seed,因为这个网站涵盖了国内外所有优秀的、与设计搭得上边的网站,为你找素材、找图片、找创意节省很多时间。
网址:https://seeseed/
接下来,我会根据该网站的分类,从必看、灵感、资讯、UI-UX、图标、图库、配色、字体、工具、社区中挑出3个最受欢迎的网站,推荐给大家。
灵感
1.Lapa:https://lapa.ninja/
Lapa——国外优质产品官网。它提供各类落地页设计欣赏,旨在激发设计师的灵感、提高设计师的技能。该网站上的很多案例,都可以应用到PPT设计中。
2.Abduzeedo:https://abduzeedo/
Abduzeedo——每日分享高品质设计创意灵感。对于灵感匮乏的设计师来说,这个网站无疑可以解决你的燃眉之急。
Abduzeedo 上有很多PS、AI的教程,当然还有 Conteplated 、Pixelmator 、Fireworks 等网页设计教程。该网站吸引了超过10万设计爱好者,几乎每天的访问量达300万。
PS:这个网站的导航条其实是横着的,我等了1个小时也没加载出来,你们将就看看...
3.Bestwebsite:
https://bestwebsite.gallery/
Bestwebsite——设计感超棒的网站。你可以为 Bestwebsite 上所有的案例打分,满分10分,还可以点击链接体验该网站的设计,寻找灵感必备啦。
资讯
1.Heydesigner:https://heydesigner/
Heydesigner——设计师与前端一起充电的网站。顾名思义,该网站更适合设计师和前端工程师浏览,网站的Logo也跟充电的图标差不多。设计在很多方面都是相通的,我们也可以从这个网站上得到很多有创意的灵感。
2.Panda:http://usepanda/app/#/
Panda——全而美的设计文摘订阅平台。Panda 跟 Seedseed 相似,都是各类设计网站的合集,该网站上的文章具有时效性,你可以看到全球的设计师写的文章,不过你得翻译一下。
3.Lizhi:http://lizhi.fm/1852153/
Lizhi——字体排印主题,中文博客节目。Lizhi是一个类似于抖音、一直播的直播平台,网站设计很简单,不用登陆就可以听节目。在这里,你或许可以听到很多字体设计的知识点,应该比看书有趣。
UI-UX
1.Uigarage:https://uigarage/
Uigarage——高级美,UI设计灵感炸裂之地。该网站大概有40种设计类别,涵盖:IOS、Andriod、Web等,简直是UI设计师的灵感宝地啊。
2.Hoverstat:https://hoverstat.es/
Hoverstat——Web交互动画设计欣赏。如果你是做网站设计的,建议你经常浏览一下 Hoverstat 。跟 Bestwebsite 一样,可以在线体验网站的设计。
如果你将鼠标置于图片上方,停顿一秒以后,会自动播放网站的效果,可以说很方便了。
3.Land-Book:https://land-book/
Land-Book——只收录全球最佳设计网站。该网站上的设计网站值得所有设计师参考,它支持用户创建账号收藏自己喜欢的作品,作为灵感库。
图标
1.Iconfont:http://iconfont/plus
Iconfont 又称为“阿里巴巴矢量图标库”——支持多种格式(SVG/AI/PNG)图标下载,图标可转字体。这个网站大家都熟透了,我就不一一介绍了。
2.IconJar:https://geticonjar
IconJar——成套优质简洁 Icon 素材免费下载。海量简约图标任你下载,不过,下载了很多图标,找起来很麻烦?Iconjar 可以帮你解决这个问题。下载 IconJar 工具,打开之后如下图(该软件只能用MAC系统打开):
操作步骤:打开 IconJar → 点击【 “+” Add Icons】新建目录 → 将你的图标全部导入新建的文件夹,命名。在你需要找 icon 的时候打开 IconJar ,直接把你想要的 icon 拖进这个界面,就可以快速找到你想要的 icon 了。是不是炒鸡方便呢?这个时候需要去买个苹果电脑了...
3.Icon Store:https://iconstore.co/
Icon Store——一流设计师出品的精美 icon。28种常用的图标类型,用来做PPT足矣。有的图标还可以拿来做表情包~
PS:无需登录即可下载
图库
1.Pexels:https://pexels/
Pexels ——4万+免费商用美图。Pexels 是一个致力于为用户提供海量共享高清图片素材的网站,每周都会定量更新。它所有的图片都会显示详细的信息,例如:拍摄的相机型号、光圈、焦距、ISO、图片大分辨率等,高清大图质量很不错的。
2.摄图网:https://magdeleine.co/browse/
摄图网——正版高清摄影图免费下载。摄图网是一家专注正版摄影高清图免费下载的图库,有摄影师5000+入驻,一百万以上的图片量,一百万以上的设计师,在这里你可以找到满意的图片素材和设计灵感。
PS:非会员每天只能下载一张高清图片
3.500px:https://500px/
500px——全球著名摄影师图片展示和售卖平台。500px 是一个致力于摄影分享、发现、售卖的专业平台。找素材的同时还能学摄影,一举两得啊。
PS:该网站上的图片商用请购买版权,它还有Android客户端哦~
配色
1.Adobe Color:
https://color.adobe/zh/create/color-wheel/
Adobe Color——Adobe 官方在线配色工具。拉动上图中的色环,可以自动生成配色方案,【探索】里也有很多配色方案供你参考。
2.Colorhunt:http://colorhunt.co/
Colorhunt——每天一组新鲜配色灵感。该网站配色方案的排列方式(除 New 中的配色方案)都取决于用户的浏览次数,所以你打开网站之后,一眼就可以看到别人喜欢的配色方案是什么样的啦。
3.Webdesignrankings:
webdesignrankings/resources/lolcolors/
Webdesignrankings——好看得哭出来的配色方案。65种配色方案,任你挑选。鼠标靠近“小水滴”的时候,会自动出现色值。
相关阅读:7种配色方案
字体
1.Myfonts:http://myfonts/
Myfonts——字体设计灵感。这个网站适合手动党(想自己设计字体的人)寻找灵感,不过都是英文字体,我们可以学习它呈现出来的效果,将其设计理念运用到中文字体中。
2.Urbanfonts:
https://urbanfonts/
Urbanfonts——免费英文字体搜索下载。这个网站适合“懒癌患者”,可搜索你喜欢的英文字体,点击下载即可。
3.Hellofont:
http://hellofont/index.php
Hellofont,又名“字由”——超好用的字体管理工具。Hellofont 里有很多文章,可以帮你解决字体运用的诸多问题。不过,下载字体需安装字由的客户端。
PS:每个案例下方都有字体的使用方法;该网站上的字体仅限PS、AI使用
相关阅读:用对了字体,你的PPT逼格就上去了
工具
1.LogoJoy:https://logojoy/
LogoJoy——根据喜好在线生成个性Logo。Logojoy 是一款利用人工智能帮你完成所有Logo设计的工具,其生成的创意可以提供给真实的设计公司。如果你喜欢该网站的Logo设计,可以点击“现在购买”,价格大约在65美元。
2.Tinypng:https://tinypng/
Tinypng——在线压缩PNG/JPG。Tinypng 的压缩质量非常不错,在保持alpha 通道的情况下对PNG的压缩可以达到70%,而且用肉眼是看不出与原图有什么区别的。
3.Ant Motion:https://motion.ant.design/
Ant Motion——动效设计解决方案。喜欢动效设计的设计师们看过来,Ant Motion 是一款以 React 组件来实现动画效果的工具,用 Ant Design 实现页面后,可以很轻松地增加页面里的动画效果。该网站上的动效很牛X,先定个小目标:1年后做出这样的效果。
社区
1.Zcool:http://zcool/
站酷——国内设计师学习和交流的平台。深耕设计领域十年,站酷上聚集了470万优秀设计师、摄影师、插画师、艺术家、创意人,设计创意群体中具有较高的影响力与号召力。反正有事没事儿都去站酷上溜达溜达,每次都有新收获。
2.UI中国:http://ui/
UI中国——国内UI设计垂直社UI区。UI中国的会员均为职业 UI 设计师,覆盖全国互联网公司。有创意可以去比一比,没创意可以去找一找。
3.Gracg:https://gracg/
Gracg,又名“涂鸦王国”——国内原创绘画社交网站。涂鸦王国是国内精英插画师社交网站,以原创插画为主要核心内容,作品风格多样,涉及使用行业广泛。喜欢插画的小伙伴可以去吸一波图了!
必看
1.Dribbble:https://dribbble/
Dribbble——全球优秀设计师最佳交流展示平台。该网站上的设计偏 UI ,其画风也是最流行的,我特别喜欢这个网站。你可以在 Dribbble 上找到非常多有意思的创意。
2.Behance:https://behance/
Behance——Adobe 旗下设计师交流平台。Behance 上的创意设计人士可以展示自己的作品,发现别人分享的创意作品(上面有许多质量上乘的设计作品),相互还可以进行互动(评论、关注、站内短信等)。
Dribbble 和 Behance 上的图片质量超级高,导致网页打开非常极度异常缓慢,除此之外我都很满意!
3.花瓣:http://huaban/
花瓣——优美图集,点亮灵感。花瓣可以说是图片素材领导者,帮你采集、发现网络上你喜欢的事物,不得不说激发了老夫的少女心。
看完这篇文章,你只需要记住 See seed 就够了,赶紧给自己的收藏夹瘦个身吧。不过,你可能会问我:这些跟PPT有什么关系?其实,学设计不仅要学习生硬的知识,还需要拓宽自己的视野,这样你的灵感才不会枯竭。
以上网站都不需要翻墙,如果你打不开网页,请检查你的网络。
惊艳!著名网站重新设计的10个经典案例
当你重新设计网站的时候,功能实现与用户体验是你需要考虑的首要因素。以下的十个重设案例中,包括了著名的社交网站Facebook,搜索巨头Google,视频巨擘Youtube,以及权威的影视评分网站IMDB。
NO.10Amazon这一设计稿出自设计师James Cipriano之手,并且发布在Dribbble上。James强化了Amazon的标识色黄色,并应用到侧边栏上。而主体部分的产品图则比目前的Amazon地设定更清晰规整。右上角的个人信息用圆形的头像替代了,而这正是目前最流行的表现形式。James Cipriano对Amazon的重新设计
NO.9IMDB设计师Vladimir Kudinov在自己的Behance页面中发布了这一设计作品。原始的IMDB首页设计来的更传统,而Vladimir的设计则采用了图片拼贴的方式来呈现,大小错落的照片围绕着纯色底的文字选框,充满了视觉冲击力。Vladimir Kudinov对IMDB的重新设计
NO.8Google这一重设作品同样发布在Behance上面,作者是Ayman Shaltoni。Ayman的设计非常有特色,Google的Logo字体从衬线体替换成了更现代的非衬线体,原本清新的糖果色被更加复古的色调所替代。可能是受到了古老的Mac OS 8.5的启发,原本置于顶端的导航栏被移动到下方,并且可以像抽屉一样打开,这可能是这一重设最为亮眼的地方。Ayman Shaltoni对Google的重新设计
NO.7BBCMicheal Coyle也认为图片是最抓人眼球的。他重新设计BBC的首页的时候同样选择了将图片作为呈现的主体,去除大量的文字堆砌,更加直观。左侧的侧边栏替代原本BBC网站上各个区块的标题,整合度更高。Michael Coyle对BBC的重新设计
NO.6TwitterZsolt所设计的Twitter网站采用了独特的分栏设计。有研究表明正常人阅读的时候,一眼只能看到几个字,这也是为什么报纸的排版中每一栏的宽度都不大。而Zsolt的设计与此不谋而合。另外,Zsolt的twitter页面的信息维度也更加的扁平,页面可以向左滑动,看到更多的栏目,也可以向下滚动,阅读更多的回复。Zsolt Hutvagner对Twitter的重新设计
NO.5Wikipedia维基百科也许是截至目前最好的百科全书。目前的维基百科页面极其素雅,文字远多于图片,因此,排版就显得尤为重要了。George基于现有页面和栏目重新设计了维基百科的首页。左侧以图片为日期索引,颇具匠心,而右侧则使用图文混排的形式,以相同尺寸的矩形区块来划分不同的栏目。值得一提的是,George在此也引入了时间线,拓展了信息呈现的维度。George Kvasnikov对Wikipedia的重新设计
NO.4SoundcloudSoundcloud号称是音频分享界的Youtube,无出其右者。Anton保留了Soundcloud原始的配色方案,增加了banner图,强化了主体部分的排版,为右侧的个人信息栏增加了浅灰色的底色,区分出了区块。比起原本的Soundcloud页面,Anton的设计显得更加清晰,又不失其简约风格的神韵。Anton Skugarov 对Soundcloud的重新设计
NO.3Youtube被封为视频领域传奇的Youtube就无需深入介绍了吧?同以上的几个案例一样,Alexandr对于Youtube的改造方向也选择了扁平化。这套重新设计的页面保留了Google的配色体系,左侧的个人信息栏使用了经典的红黑配色,在浅色的底色上显得非常显眼,也让整个版面不那么单调了。视频的排布方式也遵循一贯的排布方式,中间是主要的视频内容,右侧为相关推荐。Alexandr Brinza对Youtube的重新设计
NO.2Netflix不知道Netflix?那你应该知道连奥巴马都喜欢看的美剧《纸牌屋》吧?这就是Netflix出品的。作为美国最著名的在线影片租赁提供商,Netflix沿用着充满复古范儿的Logo,以及相对古板的页面排布方案。Vivek对Netflix的重新设计还是比较彻底的,重新设计的logo,扁平的页面。三栏式的页面设计,方便用户筛选他们喜欢的影片,而影片的图文混排比也比之前的版式更加清晰出众。Vivek Venkatraman对Netflix的重新设计
NO.1Facebook传奇的社交网站Facebook已经不是第一次被人重新设计了。但是这一次的设计方案还是令人印象非常深刻的。Fred采用了微软的Metro设计风格,蓝色与白色的色块来承载文字信息,与图片错落混排,效果极为养眼。深色的侧边栏与顶部的蓝色导航栏,也同样形成色彩对比,清晰明了。Fred Nerby对Facebook的重新设计
看完这些重新设计的方案,你有没有受到启发呢?来源:优设网 陈子木 http://uisdc/redesign-examples-of-websites
如何让网站设计称霸,看完七点你就知道
俗话说的好,优秀的网站有着一样的美法,而失败的网站却有着各自不同的丑法。今天,中科天基不跟众位网站设计师谈论关于那些失败网站各自不同的丑法,我们来聊一聊优秀网站相同的7点网站设计美法。
取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦,那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素,才是一切的关键。中科天基下面总结的几项秘诀,会让你的网页脱颖而出的。
首先,你的网站需要有一项定制服务,定制化是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验,无论是玩页游还是购物。
每一个微小的自定义设计,都能让用户感觉这些用户体验设计是为他们而做的。同时,这种设计也会给用户一种参与感和沟通的体验,从而加深用户的忠诚度。如此一来,用户会更好地融入整个网站的用户群或者社区。
另外一个大热的流行趋势,就是动效设计。它不仅能为用户带来惊喜,而且具备强大的引导性。
动效设计的精髓在于简单。令人头晕或者不知所措的动效,应该不是你要的东西吧?动效应该是有目的性的,和其他所有的设计元素一样,有针对性,达成目标是它存在的意义。
创造今天动画的12个原则:挤压和拉伸、预期、登台、连续动作和姿态对应、缓进缓出、弧形运动、次要动作、时序、夸张、立体刻画、吸引力。
对于常见的问题,设计模式就是可靠且可复用的解决方案。简而言之,最常见的信息和交互方式被整合到一个界面当中,比如点击按钮,滚动页面,滑动解锁,它们都是设计师模式。
设计师要熟悉这些常见的设计模式,并且在设计界面和交互的时候将它们用进去。这符合用户在体验上的诉求,也是易用性的最基本构成。
同时也要在自己的设计中创造设计模式,在不同的页面中使用相同、相似或者规则化的设计,让用户习惯。比如,不同页面中的CTA按钮的色彩保持一致,卡片式的元素使用相同的样式等等。
另外,没人会喜欢单调无聊的设计。网站应当同你的品牌保持一致的性格,拥有独特的气息。
要做到这一点,通常需要用到微妙走心的文案和亲切自然的语调如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(请注意他们的文本和图片是如何无缝地连接到一起的)
同时,设计师应该思考一个屏幕可以承载多少信息,从屏幕的角度考虑问题,可能会让你的计划更加庞大复杂,但是这种考量是有价值的,这种基于屏幕或者基于设备的考虑能让用户感觉更加便捷贴心。
中科天基认为,做到前几步之后,开发者与设计师还应该考虑一体化的内容和交互,视频、游戏、测试都争取让用户能与之进行互动,这种互动的目的在于驱动用户参与到设计中来。用户与界面交互的越多,用户所获得的体验就越好。
最后,设计师应该尽量让自己的设计保持干净、整洁和有序。简约的视觉设计更容易交互。没有复杂信息并且被精心设计的界面能更好地运作,赋予更好的体验。
只要能够坚持做到上面这些设计原则,就能让自己的网站与那些优秀的网站一样美,告别用户的“丑拒”。
2018年最全的网站设计6大技巧「附案例」
网站设计简单又困难,一个成功的网站不仅仅需要引人注目的设计,还需要优秀的内容。它能成为一种独有的风格,可以让用户享受良好的用户体验设计,并且一眼就能了解网站的主要信息内容。本文整理了2018最佳的网站设计技巧,这些技巧能够帮助新手设计师“少走弯路”,设计出一个属于自己的优质网站。
一,网站设计的6大技巧
1. 视觉放首位
相比复杂的文字内容,一张简单的图片可以向用户传递更多有价值的信息。我们往往能够敏锐感知视觉传达的信息,其中大脑所接收的信息中90%都是可视的。图片拥有跨越语言障碍的魅力,用户对视觉图片的感知往往比文字深。
技巧:
图片与产品目标一致在首页显示主图片使用没有失真的高质量图片使产品图片足够突出改善产品的视觉界面设计将图片融入到设计中
不要单纯为网页设计找一些好看却无用的图片,用户往往会忽略。相反,选择那些能表明产品用途的图片。用亮眼的视觉设计来抓住用户的心。
2. 手机端友好—自适应设计
2018年3月26号Google正式宣布,经过大量测试后,符合mobile-first index最佳实践(best practice)的网站开始向mobile-first index转移。未来PC端和移动端搜索都将以移动页面为基础了。
我们现在的生活完全离不开手机,当用户在手机上浏览你的网站时,希望看到的是和网页端是一致的,并且需要用户体验更好的设计。对于每一个网站来说,自适应设计是必须且必要的。
3. 丰富的交互功能
优秀的交互设计网站能给用户带来愉悦感,提高用户体验。Mockplus能够帮助你快速创建交互原型页面,让你的网站设计更加吸引用户。
技巧:
要有对比度。
保持一致性动效使用适当
避免弹窗设计优秀的表单设计
4. 导航栏清晰
最前沿的中国产品人和设计师
摹客专访
每个网站最重要的部分是其导航菜单。这是的访问者浏览你的网站的主要方式,因此确保它的易用性至关重要,它必须是简单并且直观的。
技巧:
使用友好的文案
我们既希望文案简单易懂,也希望它富有个性。但重要的是不要忘记向用户解释你的网站的用途和工作是什么。
不超过7个菜单项
拥有大量菜单项只会给访问者造成混淆,他们需要花费更多时间阅读所有可供他们点击的选项。
永远不要超过三层
可用性设计的最基本规则之一是在距离主页三次点击之后获得所有信息。
你的品牌标志应始终导航至主页
你的品牌标志不仅仅是为了美观摆放的,用户更希望能通过点击你的品牌回到首页。
避免下拉菜单
为什么要避免下拉菜单:
搜索引擎在抓取下拉菜单可能有困难。用户移动眼睛的速度比移动鼠标的速度快很多,当用户将鼠标移动到菜单栏决定点击时。你们给的选项太多,会造成用户反感和困惑。用户可能因此错过重要页面。
5. 突出主要网站信息内容
用户达到你的网站可能是通过某个和你产品相关的关键词,所以在用户浏览你网站时要给到用户你网站的主要信息内容,突出展示你网站的产品。确保用户一眼就能了解你网站卖点。
技巧:
产品信息文字加粗显示以图片信息的形式能够更好的吸引用户
6. 一定要“留白”
“留白”能够更平衡的布局,更清晰的呈现元素效果,更能吸引用户注意。
如果你在浏览网站,当布局太糟糕时,你会很费力的才能确定信息内容;太紧密的字间距、段间距;没有足够的留白空间,那么这个网站的用户体验肯定是很差的。
留白区域能够很好的指引用户,如果元素过多,那么用户的注意力会分散。留白能够让用户尽快的寻找到所需要的信息,提高用户体验。
二、2018年优秀网站设计案列
Minimalissimo 2
2. E-commerce theme
3.Personal Portfolio Site
4.Ben Hardman
5.ThoughtSpot
6.Wingnut & Co.
本页内容为企业、个人自主上传或来源网络,所有资料仅供用户参考;我单位不对其版权负责、不保证亦不表示本网的资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。