开发辅助 | 前端开发工程师对 UI设计、交互设计的认知


1、UI 用户界面

  UI:User Interfase 用户界面

  UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计;

2、一个合格的 UI 设计师,至少应该具备什么?

(1)审美:

一个好的设计师,应具备基本的艺术审美,识别不同的艺术表现形式,区分作品的好坏,感受下:

  图1:   图2:  

(2)想象力、脑洞  

  比如:克里斯托弗·诺兰导演的电影《盗梦空间》、 宫崎骏的《千与千寻》

  

(3)基本的工具使用:

  常用且基本的工具:PS

  拓展:

    图标:Sketch / macOS电脑;

    矢量设计软件:Ai

    原型图绘制:Axure、磨刀

    视频剪辑-后期处理: Ae

      

(4)进阶阶段:

  美术基础理论修炼,关于:造型、透视技巧、颜色等;

  

(5)兴趣:手绘

  如果业余对手绘有兴趣,可以拓展一下,很加分,优秀的手绘更需要时间积累,不断得思考;

(6)热爱:

  任何一条路,能走多远,从来不因出发早晚能决定的,而是对事物本身的热爱;

  设计是个磨人的工作,工作过程中,需要发挥自己的创意,开动脑筋,甚至要苦思冥想才能完成一个比较好的设计作品;是一个痛苦又快乐的过程;如果没有一个对美的执着追求,很容易半途而废;相反,如果你非常喜爱它,每一次作品的完成都是一个非常愉快快的体验;而且每一次都能感受到自己的升华。


3、工欲善其事,必先利其器

(1)工具安装:

  下载途径:搜索关键字 —— XXX + 百度云

  下载版本: 要下载 cc 2015 以上的版本

    PS、Sketch/mac、矢量设计Ai 、axure原型图 、Ae视频剪辑-后期处理

    (我这里有:PS cc 2017 破译版,macOS的,需要的评论区留下您的邮箱,我的网络出墙了,其他软件也可以帮你找)

(2)大神修炼必看网站:

  zcool.com.cn/站酷 -  国外的 behance.net

  ui.cn / UI中国  - 国外的 dribbble.com

  uisdc.com - 优设 素材下载,这里是设计师伸手党的天堂

  huaban.com - 花瓣

  

(3)“盗亦有道” —— 推荐书籍:

  《术与道》

  《在你身边,为你设计》腾讯 UI事业部出品

  《动静之美》关于sketch ios图标设计

  《简约至上》交互设计,心理学

  《一个app的诞生》从UI设计的角度,告诉你互联网这一行是怎么玩儿的

  《世界无界》《界与面》-- 人生观价值观,职场常识,给满满地正能量

  


4、图标  --  方寸之间,尽显功力

  什么是图标?

  广义: 具有明确指代含义的图形;高度浓缩、快捷传达信息、便于记忆等特性;

  (1)传统社会的图标:

  

  

  (2)智能时代的图标:在此致敬其鼻祖 -- Steve Jobs

  

  (3)图标的大致分类:

    logo图标 - app的图标

    

    功能性图标 - iconfont 让界面更加饱满、体验更愉悦

       VS   

      左边:只有文字的界面、单调枯燥

      右边: 加入图标、界面饱满内容更加丰富、浏览体验生动活泼;  

    观赏性图标:1、女儿红中国风

    

    

5、APP设计的工作流程:

  项目需求、策划方案、调研 => 草稿、原型图   => UI界面设计  设计稿交付 =>  上线后调整、迭代

  (这个部分,我抽时间详细总结一篇)


6、关于交互设计:

  交互设计是一种目标导向设计。所有的工作内容都围绕用户行为进行设计,是的行为流程更加合理化,易用化。让用户更加方便、高效的完成产品业务目标,并获得愉快的用户体验。

  思维导图、原型图、交互文档、交互规范、用户行为研究、设计目标导向、体验评估;

    => 

  问路案例:

  “不知道,高冷范儿”  --> "左拐右拐 再拐"  --> “我带你去吧”

  

  交互设计:让app 更易用,感性做设计的同时,更加理性的思考;UI设计让app更好看;测试让app稳定上线;

  风格案例:

    需要了解行业 - 支付宝,美图秀秀,行业不同,需要凸显的重点不一样;

    大小凸显,颜色演示,层次感明细,线条明朗;


7、文末,感受下来自 锤子科技 的 UI 设计

  坚果 R1

  坚果 pro

  

    来自未来,改变一切的 TNT

原文地址:https://www.cnblogs.com/wuhaoquan/p/9157199.html

时间: 2024-07-31 15:32:32

开发辅助 | 前端开发工程师对 UI设计、交互设计的认知的相关文章

开发辅助 | 前端开发工程师必懂的 UI 知识

       移动 UI 设计的世界 ... 1.屏幕尺寸 屏幕大小,指屏幕对角线的长度,而不是屏幕的宽度或高度: 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸:三星 S6 屏幕尺寸为 5.1 英寸: 2.屏幕像素密度 --- ppi 指每英寸屏幕搜拥有的像素数:由屏幕尺寸和屏幕里所包含的像素数量 计算出来的单位: ppi 指每英寸所拥有的像素数 ,即每英寸像素. 像素密度越高,代表屏幕图像显示越清晰. 同样5英寸的屏幕,像素数多,屏幕像素密度大,屏幕更清晰: 屏幕尺寸 和 像素数

前端开发手册

做前端有一段时间了,但是总觉得前端就是写写界面就行了,其实不然.一个合格的前端责任是很重大的.本文介绍重点介绍了前端人员需要掌握的一些技能.供大家参考.如果有一些对前端开发还有疑惑的童鞋,可以来看看. 本文来源:http://wiki.jikexueyuan.com/project/fedHandlebook/,建议阅读在线版本:https://dwqs.gitbooks.io/frontenddevhandbook/ 什么是前端开发者? 一个前端开发者, 要会使用Web技术(如:HTML,CS

谈谈XAML前端开发

GUI的发展 在图形用户界面的操作系统(Windows,MAC)出现之前,计算机软件是命令行界面的程序,用户和程序的交互是通过输入命令,查看命令运行结果进行的.当然很不友好.后来出现了文本图形界面的程序,即用制表符等特殊文本拼接出图形界面的效果,来使程序以图形界面的方式和用户交互.出现了菜单项,状态栏等概念,当时在DOS下流行的QBASIC,TurboC等IDE就是典型的文本图形界面程序. 随着Windows操作系统的普及,GUI(图形界面)程序的交互方式成为了用户和计算机交互的标准方式.Win

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

Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 - 转 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS

web前端开发浅析

原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里,在web2.0时代,扮演着极其重要的角色,它是RIA时代的幕后推手,同时,也是数字媒体技术的应用之一.   关键词:数字媒体技术:web开发:前端开发,网页重构 什么是前端技术  前端技术包括JavaScript.ActionScript.CSS.xHTML等"传统"技术与Adobe R

什么是HTML5前端开发?HTML5前端要学哪些技术?

什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程序开发.维护的专业人员,其中程序员可以分为设计和编码两个部分. HTML5前端的发展前景可观,可以从事的工作也很多,比如:web前端开发工程师.HTML5开发工程师.web APP开发工程师.Java开发工程师等. 那么想要学好HTML5前端开发,那么需要掌握的专业技术有哪些? 第1阶段:前端页面重构:PC端网站布局.HTML5+CSS3基础项目.Web

在做APP前端开发时应注意的一些问题

在做APP前端开发时应注意的一些问题 在整个app开发流程中,app前端开发是一个必不可少的环节,也是一个在app开发过程中重量级的角色.说到这,那么在app应用的前端开发中,又要注意什么问题呢?一.什么是app软件前端开发 App前端开发是移动前端开发中的一个方面,主要是指用户能够看到和接触到的app层面,比如app客户端界面,包括ios客户端和安卓客户端界面. App前端开发使用的技术是html+css+js,同时移动软件前端开发还需要基于PhoneGap等开发平台调用手机核心功能接口(包括

旨在脱离后端环境的前端开发套件 - IDT Server篇

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇. 为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么

旨在脱离后端环境的前端开发套件 - IDT之Server篇

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇. 为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么