学web前端,你弄懂开发型web前端和设计型web前端的区别了吗?今天给大家梳理一下设计型web前端做什么?都要学习什么?

想必大家也会遇到这种情况,要做一个项目,产品经理说产品原型图已经画好了,让我们去找一下素材,调一下颜色,看一下像素,把这个原型图整体装饰美化一番,然后就把我们叫做美工。

我很不喜欢这种称呼也很反对这种看法,其实像我们这种前端设计师应该成为懂美术和用户体验的产品经理,即时是装饰美化也要注入产品的灵魂和思想在里面。

其实设计师是在改善产品的表征,同时在把更多的产品信息传递给用户,通过不同元素的排列布局把产品的核心价值传递给用户。

设计师应该把自己和产品经理一样当成需求方,而不是执行者。用设计的语言展示产品需求,使老板看起来更直观,让技术不用过多的看产品文档就能明白。只有这样,才能让其他环节对你更加尊重,愿意倾听你对产品的建议。

今天就来说说前端设计的那些事儿:

什么是前端

设计就是呈现的过程,前端设计是通过色彩/构图/等元素赋予页面性格和特点,前端也是展现,通过色彩先抓住自己的目标人群,通过设计表现自己。

当然这仅仅是是web前端设计的一部分而已,这被成为-界面设计。WEB前端设计实际上是网页制作 ,经过web1.0进入web2.0之后网站的前端由此发生了翻天覆地的变化,网页不再只是承载单一的文字和图片,它除了设计还要掌握开发技术,如:HTML、CSS和JavaScript等。

Web前端设计主要分为5个步骤:

1.看需求;

2.画草图;

3.设计界面;

4.前端代码编写;

5.兼容性调试。

当然事情并不绝对,除了必要的步骤之外还有一些细节需要去做,设计前与产品经理,视觉分析师,体验师沟通。设计定稿后,就是和后台程序员,测试工程师沟通,并反复调试。

扁平化VS拟物化

扁平化与拟物化,作为设计师现在必然要知道的两个词,那么他们本身都有什么样的优缺点呢?

1、什么扁平和拟物设计

扁平化设计(Flat design)完全属于二次元,这个概念最核心的地方就是放弃一切装饰效果,诸如阴影,透视,纹理,渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净利落,没有任何羽化,渐变,或者阴影。

而拟物设计(Skeuomorph)正好相反,他需要加入各种元素的效果,通过不同的效果组合达到模拟要呈现物件外观的目的,以使新的外观让人感觉熟悉和亲切。

2、扁平化与拟物化的优缺点

扁平化设计单独设计起来更容易,突出内容主题,减弱各种渐变、阴影、高光等视觉效果对用户视线的干扰,让用户更加专注于内容本身,并且容易统一设计风格,调整设计方案更加方便。而现在手机平板电脑“横行”的今天,扁平化设计更能支持手势交互,而且它占用系统空间相对较少。

拟物化设计更适合初级人员了来做,这并不表示拟物化设计简单,而正是因为它的复杂所以更适合初级人员来做,可以让设计人员短时间内熟悉各种效果的实现,更好掌握色彩搭配等。并且拟物化设计认知和学习成本低,更能直接的表现出想表现的事物。

相对于它们的优点多多,它们的缺点确实一目了然。拟物化设计更倾向于视觉效果,功能实现很少。扁平化所能承载的信息量太少,会提高用户的学习成本。

前端设计如何规范?

前端设计当然应该规范,原因是:

1、为了信息加载更快。

2、有利于后期调适和修改

3、有利项目二次开发。

4、有利于项目交接。

那么前端设计应该如何规范呢?

1、最基本的就是代码规范,整齐、简洁的代码规范更方便后期调试和修改,也方便重用。

2、样式素材归类规范,养成好的素材归类习惯,也是设计规范的一种。

设计师应该从什么角度考虑用户体验

一直以来产品的设计都是在讨好用户,或者说是让用户知道什么是适合他的设计,那么我们要从哪些角度让用户知道这些呢?总体来说大致可以分为两种,一种是视觉上给予用户满足,另一种则是在流程引导上下功夫。

细致说来可以分为以下几点:

1、符合产品特点的视觉呈现,并把自己代入用户场景和角色设计布局(地铁中右手使用手机等)。

2、突出的,利于使用的视觉交互体验。

3、用户对产品功能不清晰的情况下,通过视觉表现合理的引导整个使用的流程。

总结来说就是在视觉上引导和取悦用户,在元素布局上让用户使用方便。

“设计型web前端与开发型web前端”有哪些区别?的更多相关文章

  1. 架构设计:前后端分离之Web前端架构设计

    在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有 ...

  2. 前端文摘:Web 开发模式演变历史和趋势

    今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...

  3. web前端开发和后端开发有什么区别?

    web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...

  4. web设计师和前端设计师的互动—前端工程师应该具备的三种思维

    如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需 ...

  5. Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  6. 想要入行web前端要知道web前端的的基本工作职责

    入一行,要先知一行 ”:我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责 首先,你必须是一个合格的“页面仔”,这个叫法不好听,但很生动: 我们都知道,所有呈现的内容都是基于HTML ...

  7. 葡萄城首席架构师:前端开发与Web表格控件技术解读

    讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...

  8. 在web开发中,为什么前端比后端更得到转行程序员的青睐?必看!

    1.Web开发分类与区别 人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别 看各大招聘网站上,公司对前端开发工程师 ...

  9. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. ROS-4 : ROS节点和主题

    依照<ROS-3 : Catkin工作空间和ROS功能包>,创建catkin工作空间,并在起src下创建功能包ros_demo_pkg,依赖项为roscpp.std_msgs.action ...

  2. texlive 安装

    texlive 可以从下面两个网址下载 https://mirrors.tuna.tsinghua.edu.cn/CTAN/systems/texlive/Images/ https://mirror ...

  3. shell命令、调度工具、后台执行线程和软连接

    一.shell命令 1.后缀.sh 第一行需要加#!/bin/bash 没有的话,需呀sh 命令执行 示例test.sh: #!/bin/bash date ./test.sh 提示没有权限,此时,需 ...

  4. MyEclipse8.5 + jdk 1.6.0_43 + tomcat6 + maven 3.0.4 + win7 32位 ,环境搭建并看到“hello world”

    一.前期准备 1.首先安装jdk,具体略,用java -version在cmd中看到下图所示就说明安装好了 2.安装tomcat6,具体略,在浏览器中输入http://localhost:8080/, ...

  5. Android Studio相关

    1.下载安装 Android Studio 2.打开已有或是新建工程,gradle编译时候会报错(被墙),可以切换阿里的源 修改build.gradle 的配置: buildscript { repo ...

  6. 0203 生成mysql的数据库的数据字典

    原理 项目的数据库字典表是一个很重要的文档.通过此文档可以清晰的了解数据表结构及开发者的设计意图. 通常为了方便我都是直接在数据库中建表,然后通过工具导出数据字典. 在Mysql数据库中有一个info ...

  7. mysql sql语句不同平台上大小写区分

  8. Ubuntu18.04 LTS 搭建Cassandra集群

    环境需求 jdk8 root@node01:~# java -version java version "1.8.0_202" Java(TM) SE Runtime Enviro ...

  9. Ceph 概念理解

    简介 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务. 在虚拟化领域里,比较常用到的是Ceph的块设备存储, ...

  10. Arch系Linux中安装Docker

    Arch系Linux中安装Docker 1. 下载最新版docker $ sudo pacman -Syu docker 2. 免sudo执行docker $ sudo gpasswd -a ${US ...