阅读更多

2顶
0踩

Web前端
网页设计既是一门独立学科,也是一种艺术形式。网页设计的工作至少一半是基于坚实的代码和设计知识,而另一半则是对于美感的认知,什么好看,什么不好看。每一个网页设计师都有着坚实的基础知识和他的核心竞争力,这些确保他能脱颖而出。

那么一个设计师的基础应该从哪里开始构建呢?当然,既然称之为基础,那么它必然不可能一蹴而就。经验是没有替代品的,所以系统的设计课程(无论是否正式教育)还是很有帮助的。另外很重要一点,是你需要不断挑战自己,逼迫自己走出舒适区的边界,只有这样才能拥有更强大的技能,成为更优秀的自己。只有这样才能留住客户,也会让更多客户找上门。



如果成为优秀的网页设计师是你的目标,那么下面所说的7大技能是你必须具备的,尽管它们都不涉及技术和复杂的计算机技巧。

1、熟悉设计的完整流程

请注意,我们强调要了解的是“完整”流程。怎么算是完整呢?网页设计和平面设计有许多重叠的地方,以至于在许多学校教育中它们并没有明确地区分开。这也是为何不少网页设计师对于设计和设计流程有着颇为深入的了解。一般而言,他们的知识结构应该包括下面的内容:
色彩

色彩是网页设计的核心,因为它是快速有效构建主题和样式的基础。另外,色彩和心理学关系紧密,合理地运用色彩可以提高用户体验,让访客流连忘返。
轨迹

这里所说的轨迹是用户浏览网页时视觉运动的轨迹。要掌控用户的浏览轨迹,你需要懂得正确使用色彩、层次结构、深度、形状和线条的方法,明白透视法,空间和方向的运用。
平衡和比例

这所说的平衡和比例指的是视觉上的稳定性和平衡。比例上,了解对称和非对称的使用技巧。在设计信息流的时候,各个元素的比例控制是重点。
间距

其实间距控制说起来并不复杂,一个元素和另一个元素之间的距离控制。但是要让网站用户体验良好,控制好各个元素的间距并不是一句话说的清楚的。较大的间隙能让布局更大气,富有呼吸感;叫窄的间隙能让内容更加靠近,呈现相关性,拥有更加的阅读体验。衡量你的各个元素之间的关系,明白自己的目的,掌握好间距的差异与平衡。
2、让HTML如臂使指

作为网页设计师,你无需像其他程序那样精通C/C++并能让自家的扫地机器人自动发推,但是你必须熟悉HTML代码。有些设计师认为不懂代码也无所谓,但是更多的设计师开始认识到熟悉HTML代码是成为合格设计师的必备技能。即使不够熟悉,最起码你得了解HTML的基础知识,最起码!

HTML是所有网页的基础框架,网页设计师了解它是应有之义。了解它意味着你能对网页设计有着更精确的掌控,让它拥有更好的可用性,更加易用。你可以拥有属于自己的展示网站,可以更好的出售你的设计和服务,打破设计能力的界限。
3、掌控创意文案的技巧

作为网页设计师,你常常会应客户要求做许多设计之外的工作,有时候甚至会被要求为网站撰写文案,尤其是当网站没有配备专职文案的时候。想想看,如果客户发现他们的网页设计师能写得一手创意爆棚的文案的时候,他们绝对会如获至宝的(当然你也有了涨价的理由了)。不要以为你的文案技能只能在为客户做网站的时候用上,这对于你而言绝对是无与伦比的无形资产,当你做市场营销的时候,设计与文案的结合能让你和其他设计师拉开距离。

好文帮你加技能点:《年度最佳教程!7招教你写出互联网顶尖文案!》
4、坚持不懈学习

作为一个网页设计师而言,“学无止境”并不是一句单纯的口号。你确实需要不停的学习新技能,发掘新创意,它能提高你对设计的热情,打动你的客户。

另外一个让你不得不坚持学习的重要原因来自网页设计行业本身——不断进化的设计趋势和不断涌现的新技术。你刚刚学会了视差滚动和扁平化设计,Material Design 又立刻出现在你眼前。作为一个设计师,学习是需要坚持不断的,只有对新趋势新技术了如指掌才能让你保持住你在设计圈的位置。
5、发掘商业技能

越来越多的设计师开始选择成为自由职业者,而许多还未曾独立的设计师也开始宣传属于自己的设计品牌,这也是为什么在自己身上发掘更多商业技能成为一件必要的事情。你拥有自己的业务,销售的是自己的设计技能,如果没有系统的商业技能,你会挣扎于营销、找客户、维持客户等一系列冗杂的事务中无法脱身。

如果你懂得运营自己的业务,那么你会明白如何通过与客户沟通来做决策,学会在职业生涯中高效处理多任务,保持作为网页设计师的创意思维,灵活多变地的应对多种客户和不同项目,在闲暇的时候发展爱好,锻炼身体。
6、学会倾听的艺术

沟通是一门艺术,而倾听就是其中的关键。和客户构成业务关系,也是起始于你们的沟通,首要的一点,就是听取客户的需求,而这是构成后面一系列沟通与合作的基础。而且,作为一个合格的倾听者,不仅会在客户沟通中起到作用,还会运用到许多其他的地方。作为一名网页设计师,为何你不能具备这一技能呢?

设计师倾听技能包:《告别玻璃心!设计师如何正确听取反馈》

如果你无法正确听取需求,甚至拒绝去听,那么你是无法成为一名合格的网页设计师的。许多客户会在设计过程中,不断提意见或者补充要求,这种情况非常普遍。不称职地忽略这些声音,或者在沮丧中继续修改,伤害客户,还有影响业务。学会倾听,了解要求背后的深层需求和目的,然后提供你的专业意见和建议,实现它,皆大欢喜。
7、向着职业巅峰前进

很多时候我们会用王大锤那句“出任CEO,赢取白富美,走上人生巅峰”来自嘲,但是实际上,每个行业都有它的专业标准和可见的“巅峰”,你需要这样的目标来鞭策自己。也许你无法在一夜之间达到目标,甚至几年之内都无法抵达那里,但是瞄准目标,设定计划,是能够让你保持激情前进。在这个过程中,你会发现更多的方法来加快这一过程。
结语

从本质上来讲,所有的这一切都是为了让你完善自己,走向成熟。当你越努力地奋斗超越单纯的设计,那么你越有可能成为一个名成功的网页设计师。终有一天,你会成为别人眼中仰望的背影。

本文转自优设网
  • 大小: 67.8 KB
来自: 优设网
2
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 小程序中实现搜索功能

    我们本篇利用自定义连接器实现了关键字的模糊匹配功能,总体上还是需要熟悉云开发和微搭低代码的相关知识才可以顺利开发出功能来。涉及到业务逻辑的部分免不了要写前端或者后端的代码,总体上写代码还是更灵活一些,如果用无代码的配置方案就要求官方能力足够好才可以。...

  • JS:正则表达式中的替换 replace(内容包含匹配模式)

    replace()方法可以实现替换字符的操作,用来替换的参数可以是字符串或正则表达式。 语法格式: // 第一个参数:被替换的可以是字符串也可以是正则表达式 // 第二个参数:替换为新的字符串 // 它返回的值是一个替换完的新字符串,需要接收过来 str.replace(reg/str,ele); 字符串替换代码示例: // 字符串中的替换replace var str = "孙悟空和唐僧"; // 把孙悟空替换为了猪八戒 var news

  • js字符串替换

    它也是用于在字符串中替换指定的子串,但是相比于replace()方法,它可以直接替换所有匹配的子串,而不需要使用正则表达式。它接受两个参数:第一个参数是需要替换的子串或用于匹配子串的正则表达式,第二个参数是需要替换成的字符串。如果需要使用正则表达式进行替换,可以使用replace()方法的第一个参数传入一个正则表达式。注意,replace()方法是不会修改原字符串的,它会返回一个新的字符串。上面的代码中,使用了正则表达式/-/g来匹配-字符,并用/字符来替换掉。3.使用replaceAll()方法。

  • 时间戳转换

    function formatTime(number,format) {   var formateArr = ['Y','M','D','h','m','s'];   var returnArr = [];   var date = new Date(number * 1000);   returnArr.push(date.getFullYear());   returnArr.push(fo...

  • 小程序页面移到vue项目中后使用正则匹配替换字符view、wx:for、rpx等;vsCode使用正则表达式替换字符

    最近做得一个需求是,将线上小程序的某部分功能页面,加到APP版本上。幸好APP版本是vue项目,小程序的代码又与h5相似,所以样式结构逻辑直接挪过来再慢慢改也能做。 小程序页面挪到vue项目,那就是: .wxss代码放在 <style scoped></style>标签里 .wxml代码放在 <template></template>标签里,可能需要加层<div></div> .js里的data、onLoad、properties等放

  • 微信小程序使用正则表达式出现xxx.replace报错问题

    js隐藏电话号码的中间几位,xxx.replace报错

  • 微信小程序使用正则表达式替换HTML标签

    小程序中直接使用正则会报错,需要用它自身提供的方法: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/06datatype.html 代码: 其中  f  即传入的富文本内容,font为替换之后的内容 let reg = getRegExp("<[^>]+>", "g")...

  • 小程序基本命令

    onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...

  • 微信小程序-正则表达式

    手机号码验证: if (!(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(你要验证的手机号))) { wx.showToast({ title: '手机号码有误', duration: 2000, icon:'none' }); } 邮箱验证 if (!(/^[a-zA-Z0-9_.-]+@[a...

  • 微信小程序 wxs 使用正则替换字符串

    文章目录什么是 wxs如何使用正则表达式举个例子 什么是 wxs 微信小程序 wxs WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。 https://developers.weixin.qq.com/miniprogram/dev/refere...

  • 微信小程序 字符串替换 js实现

    str.replace(/被替换的字符串/g, "替换的字符串"); // /g全部替换

  • 微信小程序WXML页面上直接进行字符串截取实现方式

    微信小程序开发中,有时候一个字段的内容太多了,这时候就需要做截取让其以省略号的形式展现,网上大多数的方式是通过样式来控制,但是在我开发的过程中,发现这样做会影响之前做好的页面布局.由于后台返回的是个list数组,所以在js里面也不太方便去使用subString做字段截取,这时候就需要在WXML上直接做截取,但直接使用subString在WXML里面做截取是无效的,那怎么办呢,这时候就需要用到微信...

  • 微信小程序实战(二)---实现搜索页面

    第一篇写了一个小程序的登录界面,昨天想要写一个仿淘宝的搜索商品页面,不管什么样的小程序,对于搜索都是会有一些需要的,所以搜索页面还是可以复用的。 因为只是写个搜索页面,所以主页面就没有好好切,见谅。。。主页面就是下面这样: 程序已经托管在github上了:https://github.com/Yangzhedi/myBlog-wxapp,大家可以自行下载,之后可以star一下啦~ 这个页面在

  • js/小程序 正则获取指定字符串后的字符串

    场景:源数据字符串为 http://zhipur.com/item?data=SN120180525FEOCE ,需要把 ?data= 后面的字符串(SN120180525FEOCE)取出来 实现:用 stringobj的match()方法实现 代码: var str = 'http://zhipur.com/item?data=SN120180525FEOCE'; var code1...

  • [微信小程序]搜索功能实现,搜索框样式

    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view cla...

  • 微信小程序之模糊搜索功能(云开发)

    一、简介: 最近一直在通过自学,用云开发做一个二手商城项目,现在做到搜索功能了。在此我对微信云开发模糊搜索进行了研究。搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。目前小程序云开发还未提供模糊查询机制,因此我们只有通过正则表达式来完成云开发的模糊查询。 name: db.RegExp({ regexp: _this.searchContent, options: ‘i’, }...

  • 微信小程序正则表达式

    下面是几个常用验证的正则表达式 用到的请点个赞噢~ var names = /^[\u4E00-\u9FA5A-Za-z]+$/; //姓名 var phonetel = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/; //手机号 var emailnums = /^[a-zA-Z0-9_.-]+@[a-z...

  • 小程序里面正则表达式的报错的,实现字符替换的方法

    js正则表达式竟然在表程序里面报错,换行标签无法生效,可以用br进行替换 <wxs module="util"> var sub = function(val) { return val.split('\n').join('<br/>') } module.exports.sub = sub; </wxs> <view class="detail-box"> <rich-text nodes="{{util

Global site tag (gtag.js) - Google Analytics