photoshop新手自学UI设计经验心得

给各位photoshop软件的新手的使用者们来分享一下自学UI设计的经验心得。

分享一览:

 


什么是UI设计

UI的本意是用户界面,是英文User和 Interface的缩写。从字面上看是用户与界面2个部分组成,但实际上还包括用户与界面之间的交互关系。

个人认为UI设计不仅仅是丰富原型稿和产品经理交接,一定程度上囊括了交互和视觉的部分责任。

日常任务和可交付成果

日常任务分为几个阶段,包括需求阶段、原型阶段、视觉阶段、前端及开发阶段、优化阶段。在整个项目流程中,UI设计师处于承上启下的关键位置。

一. 需求阶段

参与讨论,了解并挖掘需求。进行用户需求分析任务,协助产品经理细化需求,从商业需求文档到产品需求文档。

二.原型阶段

同步商业需求文档进程,交互设计师输出各阶段所需的产品原型,也即线框图。并组织评审和讨论会(UI设计师也参加,可以深入的了解线框图的逻辑),在评审和讨论后,交互设计师输出一个确认版的线框图以及交互说明文档。

 


三.视觉阶段

视觉阶段包括界面设计阶段,界面输出阶段。

1.界面设计阶段

根据原型设计阶段的界面原型,对界面原型进行视觉效果的处理,该阶段确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现。

界面设计完成后也要组织评审会,评审要面对rd或fe的质疑。

 


2.界面输出阶段(一般初学者自学时对这部分会比较迷茫,我将会在下篇文章单独讲下这部分)

界面输出也就是切图以及标注,并输出整体界面的视觉规范。

四.前端以及开发阶段

配合好开发人员完成相关的界面结合,验收视觉以及前端、开发成果。根据他们的反馈,改进交互设计,并与产品经理协调。

五. 优化阶段

观测核心数据变化,进行可用性测试和用户调研,以便优化下个版本

当下的UI界面设计趋势

一.单一主色调

用简单的色阶,配套灰阶来展现信息层次

优点:起到了很好的信息传达效果,减少多余信息的干扰,使用户专注于主要信息获取。

典型例子:

 


二.数据可视化

用直观的饼图,扇形图,折线型,柱状图等丰富的表现方式

优点:可以在更小的屏幕空间内更立体的展示内容

典型例子:天气通

 


三.卡片式

使用卡片样式

优点:保证了卡片和卡片之间的独立性,又保证了服务和服务的统一化设计。

百度外卖这两个页面用的是卡片式

 


四. 内容为王

真正有价值的app,一定是内容取胜。

新浪利用字体排版,尽可能的内容前置,弱化图标和操作让用户集中注意力于内容阅读上。

优点:让用户聚集于内容上

典型例子:滴滴试驾里面的车品电商页面

 


五. 大视野背景图

用通栏的图片作为背景

优点:提升视觉表现力度,又丰富了App情感化元素,这种设计方法,对字体和排版设计要求更高,难度也多,但极容易渲染气氛。

典型例子:airbnb

 


工具:ps、sketch、Illustrator等等

推荐书籍

 


好了,以上的信息就是小编给各位photoshop的这一款软件的新手的使用者们带来的详细的自学UI设计的经验心得分享的全部内容了,各位看到这里的新手使用者们,小编相信你们现在是非常的清楚了心得了吧,那么现在就快去按照小编分享的自己去尝试着试下吧。

时间: 2024-10-07 09:03:58

photoshop新手自学UI设计经验心得的相关文章

零基础如何自学UI设计?

  酸梅干超人:下面是我这几年经验的总结和思考,虽然我并不算是最出类拔萃的UI设计师,但也希望对新人有益. 第一点:学习准备--启蒙 学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知.在开始正式学习前,你需要花足够的经历去了解和查阅它的起源.发展.应用.未来.UI作为平面设计的一部分,再往上又从属与美术学这一大类.因此,首先要先去了解整个美术史的发展.从人类起源各个阶段中,美术经历了什么样的变化,在各自的时代发挥了什么作用,近代美术史又经历了哪些波折,平

先掌握科学有效的UI设计自学姿势

  这可能是有史以来最值得阅读转发的一篇UI设计自学指南.作者是个全栈设计师,在临摹了大量教程,掌握了PS.AI等软件后才发现自己对于真正的设计一无所知,因此写了这篇文章,希望能帮大家用正确的方式学习UI设计,不要本末倒置,在错误的路上浪费时间. 写给UI设计初学者们 几乎每隔几天我便能在简书或其他各类设计网站看到关于自学UI设计的分享文章.这些文章有一个共同的特点,就是描述作者如何从一个零基础的设计小白,通过种种途径,成长为一个熟练掌握PS或AI的设计达人的,亦或是分享了一堆有参考价值的设计类

Photoshop制作淘宝钻展banner设计经验心得

给各位Photoshop软件的使用者们来详细的说说制作淘宝钻展banner设计经验心得. 分享一览: 一.钻展图的作用和意义 1.什么是钻展图 钻展图的全称为钻石展位图,是淘宝网图片类广告位竞价投放平台,是为淘宝卖家提供的一种营销工具.钻石展位依靠图片创意吸引买家点击,获取巨大流量.钻石展位是按照流量竞价售卖的广告位.计费单位为CPM(每千次浏览单价),按照出价从高到低进行展现.卖家可以根据群体(地域和人群).访客.兴趣点三个维度设置定向展现. 2.钻展投放的目的和策略 目的: 策略: ①.单品

26岁的平面新手,是否还有转UI设计的可能?

  乐天+方法派 @烧炖 :做UI有时候确实看天赋,认识不少非设计专业出来的设计师,自学半年后入行工作,不到一年时间就做的很赞了.但努力是能弥补这些天赋上的差距的,毕竟UI不完全是靠艺术天赋的,某些角度来也算个理性活儿. @李总李总脑壳有点肿 :实用指南: 报个UI设计班最效率 读完后,投小公司,记得,强调做过外包但没上线,别说自己培训学校出来的,有丰富的电商工作经验,意味着,你既可以做UI还能把专题页做了,小公司喜欢. 进了公司就没啥可怕了,需求一来逼都逼得你成长. 别怕,你学校学的基础知识基

UI设计提速秘笈:Photoshop CC使用技巧

作为工作繁忙的设计师,我们一直追求高效.敏捷地完成设计任务,那究竟要如何提升UI设计效率呢?本文将从软件.习惯.技巧等三个方面来阐述笔者的一些心得总结. 软件篇 工欲善其事,必先利其器.UI设计要更有效率,捷径就是从最常使用的Photoshop(下文简称PS)软件出发. PS软件更新很快,但出于对版本稳定性的追求,笔者并没有新版本出来就马上更新的习惯.而PS CC版本的出现,却改变了笔者的看法.用好PS CC,会在设计效率方面带来很大提升. 1.Photoshop CC精彩新功能 多重形状和路径

Photoshop CC UI设计提速技巧

作为工作繁忙的设计师,我们一直追求高效.敏捷地完成设计任务,那究竟要如何提升UI设计效率呢?本文将从软件.习惯.技巧等三个方面来阐述笔者的一些心得总结. 软件篇 工欲善其事,必先利其器.UI设计要更有效率,捷径就是从最常使用的Photoshop(下文简称PS)软件出发. PS软件更新很快,但出于对版本稳定性的追求,笔者并没有新版本出来就马上更新的习惯.而PS CC版本的出现,却改变了笔者的看法.用好PS CC,会在设计效率方面带来很大提升. 1.Photoshop CC精彩新功能 多重形状和路径

UI设计提速秘笈:Photoshop CC使用技巧

作为工作繁忙的设计师,我们一直追求高效.敏捷地完成设计任务,那究竟要如何提升UI设计效率呢?本文将从软件.习惯.技巧等三个方面来阐述笔者的一些心得总结. 软件篇 工欲善其事,必先利其器.UI设计要更有效率,捷径就是从最常使用的Photoshop(下文简称PS)软件出发. PS软件更新很快,但出于对版本稳定性的追求,笔者并没有新版本出来就马上更新的习惯.而PS CC版本的出现,却改变了笔者的看法.用好PS CC,会在设计效率方面带来很大提升. 1.Photoshop CC 精彩新功能 多重形状和路

photoshop掌握UI设计的配色教程心得

给各位photoshop软件的使用者们来详细的说说掌握UI设计的配色的教程心得. 心得分享:   我们从小都能熟练地区分颜色,但为什么当我们需要运用色彩进行UI设计的时侯,却往往发现很难恰到好处地运用色彩,作出那些和谐得体.令人赏心悦目的设计来呢?--我觉得原因是我们对色彩的认识和实践不足,以及当我们做设计时,很容易会过度地使用色彩.作为设计初学者,你需要掌握基本的色彩理论,通过实践不断加深对色彩的认识,并最终能够熟练地运用各种色彩,搭配出平衡且使人愉悦的设计来. 在运用色彩的开始阶段,你可能会

为APPLE TV进行UI设计需要了解哪些基本规则?

  仔细想想,你会发现我们正处于大屏UI设计的一个有趣的阶段.2015年推出的Apple TV 已经是第四代产品了,但是其他的同类型产品尚且处于第一代或者说早期阶段.发布会上吹出的牛逼最终还是要经过市场验证,而实际状况比起大家预期的结果,更加复杂.到底要如何给Apple TV设计APP呢?今天的文章,我将为大家分享一下我们为丹麦最大的内容供应商设计APP的经验和相关的资源,也许能帮大家一窥究竟. 基本情况 诸如Netflix.Youtube.HBO.Hulu和Plex 等主要的媒体平台,在tvO