UI实战课

作者: 藏于心Z | 来源:发表于2020-06-06 13:59 被阅读0次

    颜色的网址:colorhunt(百度搜,里面有非常好看的配色)
    站酷(很牛逼,中国权威的网站),花瓣,阿里巴巴矢量图库(iconfont)
    觅元素(免费下载网址),摄图网,千库网,千图网
    dribbble(插画的网站)
    90设计(电商的) 包图
    500px大片网站国外

    产品的软件:axure(RP),xmind,墨刀(不常用)
    设计软件:ps,ai,sketch(只能在苹果系统上使用)。
    只要是渐变和透明相关的就要把填充关为0。

    第一节:UI和IXD和UE/UX的区别:IXD是交互设计;UE和UX都是用户体验设计师

    按照图标的属性分类:功能图标和启动图标;
    按照表现形式分类:3D图标,2.5D图标,2D图标
    按照设计风格分类:像素图标,拟物图标,扁平图标,手绘图标

    第三节:app的大门登陆注册页面
    登陆注册页面出现在哪里:
    1:刚下载的时候,点击图标会提示用户登陆注册。
    2:在个人中心页里面。
    构成:
    登陆页面:输入文本框,忘记密码,登录,注册, 第三方登录,logo;
    注册页面:输入文本框,验证码,设置密码,同意注册协议,注册,第三方登录,已有账号登录,logo。
    特例:无第三方登录按钮,头像登录(一般是第二次往后的登录);
    按钮式,选项卡式
    注册的方式:邮箱,第三方,混合式登录,手机号注册
    登录分类:1.无需登录(手机自带的天气等等 柴扉app)2.无需强制登录(网易云音乐, 微博,抖音等等)3.强制登录(QQ,支付宝,微信)
    注册登录4种方式:邮箱登录,第三方登录,混合式登录,手机号注册。
    状态栏的高度是40像素。

    第四节:ai的字体设计
    字体形式:有无衬线(宋体是有衬线字体,黑体是无衬线字体)
    书法字体:叶根友

    设计字体:替换法 1070215E-50B0-4015-BEAB-B5683F2E9829.png
    ,公用法 E073C439-D45D-420E-844D-3F85B9858680.png
    ,叠加法 AD6F8177-3F58-4358-A546-C3356A7A8B75.png
    ,分解重构法 86048803-FAEE-45AD-B257-3895A8E88557.png
    , 尖角法 68937A98-CCE3-4DBD-B881-790702E037E4.png
    ,断肢法 CD496A1A-D6B2-4B2A-A361-CA9509099B7A.png
    ,减细法(直接是钢笔造字) 30156B1E-04A0-42FB-92D9-48FBCACB266E.png
    ,错落摆放法 F23B63B0-3548-4DCC-87B1-AD5F031F895E.png 117B7EBE-0FFF-4D0D-B0D8-10494C9DAD7D.png

    设计原则:直观性,生动行;个性化,象征性;说服性,感染性
    推荐:微博,id名为字体设计; 微信公众号:刘兵克

    第五节:banner
    常见的banner尺寸:16:9、4:3、3:2、1:1和1:0.618(黄金比例)

    排版:图文排版;表格排版;图片排版 57DBEBF6-56A3-4BFA-BBE8-E02463D48749.png

    banner里都有:文字,图片,图形
    文字层级:文字大小;文字颜色;文字粗细;
    文字排版:居中(高端,贵气,霸气,文字比较短的,);左对齐(方便阅读);右对齐(少,海报,banner设计);全部对齐,左右对齐(详情的文案里)
    图形:1.图形做背景2.使用图形丰富画面
    图片:图片做背景,也可以用作装饰,
    地产宣传海报一般用局中对齐的方式; app里的段落文字一般是左对齐
    banner构图:文案;商品/模特;背景;点缀元素;logo

    banner的风格:1.中国风banner 2EE2177E-44E2-4848-8B7F-FFAD6EF31E00.png 2.软萌风banner 5346C6C9-E606-44A5-894A-E0D771424ED2.png 3.科技风 513CC83B-B29E-4CCC-937B-2244F28192B6.png 4.文艺类: 93A44FC2-78FF-4470-9A47-955CEF6B2AFA.png 5.品牌感: 7CE14BCA-A5D7-445E-8AD9-D47DF70B71AD.png 3CE419C6-2AED-4BE3-ADB2-8F8E52A2A8A9.png 6.高端大气banenr 7490E892-1494-4B62-8DE1-7F3376EA1242.png
    banner展示风格: 年轻化banner(颜色鲜活),波点banner(孟菲斯风格 );文艺类banner;品牌版banner ;高端大气类banner(颜色深色)
    banner背景处理技巧: 渐变(多适用于电商类的) 6643A2C2-02AE-4A64-867B-680456C19535.png
    ;纹理(质感,高端商务类的及金融类的) FEABEC33-12A5-41DA-B8F2-B8356DDF0E42.png
    ;临近对比(低饱和) AA8DD7F7-F21B-44BF-B1E0-E975DDA52884.png
    ;层次 C75FCCEF-764D-44A3-8C91-51F9C573B1A3.png

    banner布局方式:左图右文字 785065EF-9443-492D-B7F9-AB2FB8E303E1.png
    ;右图左文字 3DE98D3F-6CEC-4D40-A29B-DC4F349D5F75.png
    ;中央布局 D5647467-C76A-4CBD-87C0-BBF2233E54AF.png

    背景小圆点的制作方法:先画一个小圆圈,复制一个共复制4个,上下各两个,保持距离是一样的,然后这四个图层转换成智能对象,双击进去,然后调整画布大小,现有的px加上距离,然后在编辑里面定义图案。
    汉宜超粗体

    总结: CFF080D6-F266-4C43-9625-B77C86022947.png

    第六节:拟物化图标:



    拟物化的优点: A2366157-3939-4592-8375-423C30FFDE45.png
    拟物化的缺点: 9C7F8D3A-6E0E-4CB9-AEEC-0928E6E447D4.png

    拟物化的设计方式:1.设计拟物:2.交互上的拟物(翻书的效果)

    总结: 0B33F032-1973-4762-94C8-ECF4918E0901.png

    第七节:拟物化图标:光影关系:


    D47A5E8C-BFD3-4BBF-9897-CAA3FB8DF685.png

    第七节:扁平化图标:
    三种绘制技法: 通过显示物品绘制;通过拟物化图标绘制;通过剪影图标绘制;
    转成智能对象

    第八节:功能图标之分类大法:
    功能图标:在图标中具有功能意义的图形;每个页面中的返回功能图标;
    功能图标的设计原则:1.要注释 2.图文一致3。功能>美观
    按照属性栏分类:栏图标(标签栏图标,属性栏图标),小图标。
    按照表现形式分类: 线性图标,面性图标,线面结合;
    按下态是线面组合,非按下态是线性

    第九节:功能图标的设计技法:
    线性图标(单色,拼色,渐变,断一个点,断两个点,加拟人元素 )
    面性图标(单色,拼色,渐变,加背板,加光影(投影),降低不透明度 ,加元素 ,加高光 )
    可以看看笔记里的截图
    注意事项:1.定义准确形象2.造型完整简明3.符合用户行为习惯4.统一性

    第10节:启动页加引导页加动效:
    有启动页的意义:1.提高用户体验,减少用户焦虑2.传递品牌效应或产品的人文情怀。3 .商业需求

    启动页的种类:1.快速启动页(手机自带的一些,国外比较流行)
    2.品牌类(宣传产品自身的形象如:京东,饿了么,钉钉 ),有宣传标语,logo
    3.情感共鸣类(如微信,网易云音乐)
    4.节日类。
    5.广告类 (给别人打广告 )

    启动页的设计流程:1.产品分析 2.确定启动页种类3.了解产品的特点4.特点具像化5.排版整合

    引导页定义:加载完启动页画面之后进入界面首页之前用户所见到的一系列画面。往往是第一次打开应用时出现的画面且仅出现一次,一般滑动好几次。
    引导页出现在两个地方1.首次下载app。2.重大更新完成之后才会打开。

    引导页的作用:在用户使用产品之前提前告知其主要功能与特点。(亮点功能 )

    引导页中的元素: 图形,图片,文案,关闭或跳过按钮,分页点(最后一=一页由进入按钮代替分页点)数量要合理,一般在3到4页左右

    引导页的展示形式:文字与界面的组合;文字与插图的组合(吸引眼球但设计时间长);动态效果与视频

    做动画的时候一定要转换成智能对象

    第11节:axure和xmind
    xmind(绘制功能导图):双击就会出现一个自由主题;
    按tab键就会分支主题;分支主题2要出现的话直接在分支主题1那里按住enter回车键。
    (按住tab键就是横着出现(同等级),按enter键就是竖竖的初出现(儿子 ))
    tab添加选中主题的子主题,enter减加选中主题的兄弟主题;(必须在英文输入法的状态下 )/收缩所有主题;*展开所有主题。
    加超链接:右击插入选择超链接。
    外框就类似于打一个组。

    axure(绘制原型图):
    按住command+回车键添加子页面 (右击添加页面之后 )
    按住f5可以看预览,
    第二个是载入苹果 元件
    添加跳转:在右边属性栏鼠标单击时。
    做手机轮播图的话:有一个动态面板,画好之后双击进去,选图片,双击交互载入时,找到设置面板状态

    相关文章

      网友评论

        本文标题:UI实战课

        本文链接:https://www.haomeiwen.com/subject/xypfrqtx.html