易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

干货:第一眼很关键!网页设计如何吸引眼球!

来源:网站建设行业资讯网
添加时间:2021-12-08

项目说明

为不同的服务设计着陆页页面。

预处理过程

客户对于着陆页的要求很明确,要求设计独特,能够传达出全新的服务和愿景。希望整个着陆页的设计能够让网站在同类产品中脱颖而出,对于用户而言,有着显著的差别。受此启发,设计师针对用户和市场进行了研究和探索,设计师决定巧用色彩和形状作为设计的突破口,通过寻求不同的组合方式,来完成整个设计。

草稿和线框图

整个工作的起点是 UX线框图。最开始,设计师构建了几个简单的布局,每种布局都有着不同的侧重点和优势。我们将不同的构思和不同的部分构建成为独立的页面,通过分析和研究用户的注意力会集中在哪些信息上。Ludmila 提到,由于整体结构并不包含很多元素,绘制草图也不会太麻烦。将脑中构思借由手绘的方法来呈现,可以帮助设计师更好地琢磨和探索整个设计。

在纸上绘制草稿是一个不断绘制不断思考又不断修改和探索的过程,最终成型的设计方案会使用 Sketch 绘制成 UX线框图。基于任务需求,无论是手绘草稿的探索过程,还是基于不同需求而绘制的线框图,都可以向客户展示。

UI设计

接下来是比较关键的 UI设计的过程了。由于页面的第一部分,也就是首屏,只包含有公司的名称、Slogan 和引导用户向下滚动浏览的箭头,所以我们认为这个部分需要创造出一个色彩明亮、引人瞩目的背景。设计师开始试图将不同的抽象元素排列组合起来,并且做好让这些元素动画化的准备。

第一个变体是基于菱形元素和矩形元素来构建,这些几何图形边缘等距,加入渐变色彩,营造出丰富的层次感。不过,在探索过程中,设计师发现可能柔和的曲线元素会更加友好,一方面是视觉上得以友好度更高,另一方面是它的寓意会更贴合产品。加入动效之后,整个页面会显得更加生动。

色彩的选取一直都是整个设计中最有趣的部分。由于是要创造出生动而又具有视觉吸引力的设计,设计师开始寻找渐变色的配色方案。想要专门强调特定的色彩并不容易,因为渐变色通常是多种色彩共同构成的,在具体的顺序和搭配上有着多种变化,需要持续地尝试和探索。

总体上而言,设计师是通过品牌和需求而确定了基础的四种不同配色方案,再在其中挑选出对比度和协调度都比较高的组合。最终,她所选取出变化比较平稳的渐变配色,将公司的名称和 Slogan 置于渐变色块的中间位置,控制对比度确保可读性。

通过之前的探索,确定使用曲线波纹来构建背景图形。在这样的项目当中,通过色彩来主导设计是一件很有趣的事情,同样也是极具挑战性的任务。至于这个流程,按照 Ludmila 的说法,她是在单独的页面上进行渐变色彩的组合,仔细调整渐变色的过渡。她将注意力集中在色彩本身的选取上,确保整体的配色是干净且富有活力的。

随后,将这些曲线波纹应用到每一屏,尽量确保一致性和完整性。之后,为每一屏添加必须的 UI 元素。其中,CTA按钮的色彩需要契合渐变色的位置和特点,背景图片元素则不用完全展示,借助半透明渐变阴影来营造过渡效果,凸显 CTA按钮。

最后,添加动画效果,让各种元素之间的互动和联系更加自然。这个环节需要团队中其他的设计师加入进来,并且协同合作,完成整个设计。

在背景图形上,设计师尝试了许多不同的色彩搭配方式,在这个阶段,她尝试了调整色彩、渐变的程度以及不透明度。在这个过程中,控制布局中的对比度是至关重要的任务。

在创建背景的曲线的时候,建议尽量少地使用定位点,同时控制好曲线的平滑度。

至于在控制渐变色彩的时候,设计师特别注意到了冷热色调的结合,从最终的结果来看,整体上保持了暖色调,营造出明亮和轻快的氛围,渐变的色彩主要采用了红橙黄、紫红粉和青蓝渐变。此外,在每一块色彩的边缘都需要专门注意,避免过于强烈的对比,保持整体的微妙感。

更多设计技巧

首先,需要培养自己的品味,注意各个领域的设计实例,而不限于移动端UI、网页和企业品牌设计,还要从平面设计、建筑、摄影和艺术等多领域获得灵感。通过广泛的涉猎,会让你知道现如今整个大趋势是怎样的,什么样的设计更加时尚,更加贴合主流。

在工作之余一定要自己多做一些项目,这些小项目可以是创建概念设计,也可以是解决一些当前的问题。

总有一些技能能够提升,有些技能可以打磨,比如排版,比如构图,有意识地在工作中提升和钻研这些技能。

想推荐一本非常不错的配色书《Interaction of Color》,作者是 Josef Albers,书中讲述了许多关于色彩的研究、原理以及创建色彩的技巧。

网站建设计最新案例赏析:


河南赛唯家具网站制作首页设计效果图
河南赛唯家具
深圳信雅文化传播网站制作首页设计效果图
深圳信雅文化传播
乐清乐鸟电气网站制作首页设计效果图
乐清乐鸟电气
东莞鼎力环保科技网站制作首页设计效果图
东莞鼎力环保科技
浙江爱就推门玩具网站制作首页设计效果图
浙江爱就推门玩具
阳光雨露信息技术服务网站制作首页设计效果图
阳光雨露信息技术服务
广州捷伦达实验室设备网站制作首页设计效果图
广州捷伦达实验室设备
华星(深圳)新材料网站制作首页设计效果图
华星(深圳)新材料
山东刚泽金属制品网站制作首页设计效果图
山东刚泽金属制品
深圳四强科技网站制作首页设计效果图
深圳四强科技
 

网站建设行业资讯推荐阅读:


深圳网站建设中常见的网页设计问题有哪些什么是网站优化最忌讳的事深度分销对比白帽黑帽在优化中的利弊未来的企业发展离不开网站建设外贸网站SEO如何选择关键词 建立企业官网,哪些是至关重要的关键地方企业网站建设有哪些方式和规模,自建网站是否合适SEO优化中,如何写好页面标题来看深圳网站建设需要多少钱深圳福田专业网站建设公司,企业网站提升收录到底该怎样做科技讲解通过用户角度设计网站和导航了解网页设计和网站开发的区别说明企业手机网站的6项好处如何设计网站才能更加让人容易理解 效果好的网站设计公司电话 深圳网站设计之网络安全新手启程:技术基础知识十六问答深圳微信营销对企业的好处,微信公众平台对企业有哪些好处网站建设中源码编程是非常重要的制做公司网页要怎样选择企业应从这种层面考虑到深圳中小企业建设网站的时候可以这么做!地方站建站有什么注意事项和建站技巧企业网站制作要点定制网站对企业的好处品牌网站建设与普通网站建设的区别网页设计有难题12款网页设计模板给你灵感!(二)想做好电商网站抓准这10个细则准没错! 网站设计公司电话咨询 浅析在网页设计中如何让按钮激发用户点击欲望深圳网站建设中如何获取高质量外部链接一个好的网站应该具有哪些特点建站文章——要有合理的操作理念才是最重要的网站建设带来的效益有表现在哪里些方面怎么建网站搭建网站中常会碰到哪些难题高端品牌网站应如何建设企业应如何规划高端品牌网站深圳网站建设具体有哪些步骤深圳网站建设运营解析,如何留住客户深圳网站建设:用户体验十大原则 很好的网站设计公司联系方式 关于网站设计的可用性设计本地结果搜索引擎优化营销型企业网站建设如何确定用户群体解析微信营销之“人贩子一律死刑”软件定制开发实力顶强的陕西建设网站公司深圳福田网站建设网络公司,网站关键词优化不上来的原因是什么1低个免费在线工具测试网站速度别网络营销与大数据融合的优势网站优化中如何选择关键词如何在模板建站和定制开发中做出选择呢旅游类网站如何建设更符合用户使用习惯; 设计师要怎么找灵感给企业做网站设计网站建设中有哪些关键性的地方深圳网站建设之外贸企业网站建设经验深圳福田企业网站制作,新人优化企业网站有哪些注意事项易捷网页设计制作公司讲述SEM要和SEO并重高效的设计可视化西安网络公司培训讲师小赵为您解读网站服务器的速度论述网站建设市场如何是否值得做关于网站建设跟网站运营之间的关系
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询