
UI设计
Tiny_G
If we desire, we can create the whole world
展开
-
UI——day20.lpad和watch设计规范以及适配
ipad的尺寸规范现如今存在的ipad机型有哪些?那主流的设计尺寸有哪些呢?3.字体规范Apple Watch尺寸规范首屏图标80px (38mm)88px (42mm)长看图标80px (38mm)88px (42mm)短看图标172px (38mm)196px (42mm)文字规范标题36px正文标题32px正文30px备注、脚注、辅助文字24px、26pxwatch设计主题思想轻量:Apple Wa..原创 2020-12-12 14:02:03 · 1110 阅读 · 0 评论 -
UI——day19.Axure和 Adobe XD介绍
Axure基础一.Axure是什么?AXURE RP是一个专业的快速原型图设计工具。二.原型图目的是什么?为了沟通最初的产品设想原型图展示的是功能内容及粗线条的布局,而不是视觉设计三.不同的人用来做什么?(人物设定)产品经理、交互设计师︰原型图一般是产品经理、交互设计师来绘制U设计师:需要具备快速准确阅读原型图的能力开发人员:了解用户如何与产品进行交互e.g:四.界面①菜单栏②工具栏重要功能:选择模式连接模式预览和发布③页面导航④元件库库..原创 2020-12-12 13:54:08 · 3243 阅读 · 0 评论 -
UI——day18.用户体验
1.定义用户体验User Experience,简称UE/UX)是用户在使用产品过程中建立起来的一种纯主观感受。2.产品设计的原则样式取决于功能,功能取决于需求,需求来源于生活。为用户解决核心需求,是我们产品存在的核心价值。核心需求的解决可以刺激边缘需求的产生,同时边缘需求的解决可以更好的提升用户体验。在不断解决用户需求的过程中,逐渐促使用户形成新的使用习惯,形成新的流量入口。3.体验角度需求体验解决用户需求,提高用户体验一个产品存在的意义就在于能否满足用户的需求,只有真正解决了用户需原创 2020-12-02 13:23:04 · 329 阅读 · 0 评论 -
UI——day17.交互设计(二)
加载机制加载原理页面加载机制单页面整体加载单页面分块加载跨页面加载预加载操作加载机制加载层控件自身加载状态后台加载加载分类下拉刷新加载页面上拉加载切换新页面数据加载页面局部加载占位符的设计:加载不出来的时候,需要用来占空间启动页加载为什么要加缓存?减少等待查看结果节省流量缓存的限制:时间限制(超过清理)/容量限制动效设计流程1.开发方式:调取系统自带样式设计师直接提供gif动图前端自己将动画..原创 2020-11-29 21:30:56 · 154 阅读 · 0 评论 -
UI——day16.交互设计(一)
什么是交互设计IXD Interaction design交互设计交互指人和机器互动的过程交互设计是学习和研究人们如何与产品、系统、服务产生交互。它是关于塑造人们使用数字产品的体验。产品设计的工作流五、战略层次**所谓的战略层次,就是通过了解企业以及用户双方对于产品的期望以及目标,去制定确立用户体验各方面的战略。**需要根据对用户的定位,去解决用户的需求,然后才会有一个明确的战略。简单来说,五个层次的实现,是需要各个部门人员的合作的。并且各个层次并非是完全独立开来,而是相互影响相..原创 2020-11-29 17:22:30 · 368 阅读 · 0 评论 -
UI——day15.H5和小程序的设计
认识微信小程序微信小程序(英文Mini Program)是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开使用小程序的优缺点优点:对用户来说,无需下载卸载,即用即走,不占手机存储空间打开速度比h5要快,堪比app可以调用比H5更多的手机系统功能来进行开发运行速度跟APP差不多,但相对来说开发成本比APP要低缺点:微信小程序只有1M的大小,这样导致无法开发大型的小程序。不能跳转外链网址,所以间接影响了小程序的开放性。不能直接分享..原创 2020-11-29 17:21:14 · 643 阅读 · 0 评论 -
UI——day14.标注切图
适配原则适配原则∶文字流式、控件弹性、图片等比缩放文字流式:文字根据屏幕宽度自动换行控件弹性左右对齐图片等比缩放标注内容文字:字体、大小、粗细、颜色、不透明度布局控件属性:控件的宽高、背景色、透明度、描边和圆角大小间距:图标文字列表等的间距、控件之间的距离和左右边距列表︰列表的高度、颜色、内容上下间距等段落:行距全局属性︰如导航栏文字大小、颜色,页面左右边距,默认间距页面切图1.什么时候需要切图Tip:只要是没有办法通过代码来实现的就需要切图..原创 2020-11-29 17:18:12 · 274 阅读 · 0 评论 -
UI——day13.个人中心
Tips:按钮+文字:按钮高度为文字大小的一点五倍,列如“关注”按钮引导用户的按钮:上色显示单行文字时:至少保留1.5倍的距离1.认识个人中心 —般位于标签栏的末尾位置,是承载跟用户自身密切相关的功能的集合,也可以理解为一种快速的帮助中心2.设计形式列表式可以根据业务分类进行列表分组方便用户浏览查看图标规范:风格统一,和文字视觉等大小文字规范:28-32px图标设计原则:要注释、功能大于美观、图文一致列表高度:100-120px左右案列:注意功能板块的区分宫格式原创 2020-11-27 22:35:35 · 425 阅读 · 0 评论 -
UI——day12.次级页面(二)
APP的导航形式经典标签:底部标签栏、浮动按钮、舵式导航优点:方便用户快速跳转,减少层级的跳转缺点:占定一部分区域,误操作抽屉导航优点:收纳不常用又不得不有的标签,让主页干净缺点:抽屉里不易被发现,用户单手操作也费劲Tab导航/Tab选项卡ios:分段选择控件android:固定标签导航宫格导航优点:排版规整缺点:太多对用户不友好列表导航优点:简单、高效缺点:没有主次,太单调轮播导航优点:方便页面切换缺点:当页面太多的时候,滑动较麻烦..原创 2020-11-26 16:44:22 · 399 阅读 · 0 评论 -
UI——day11.次级页面(一)
认识次级界面、标签栏点开的页面都是主页面/一级页面,其他都是次级页面/内页和返回图标并存的页面主要元素返回按钮:设计特点:靠左,夹角90度全局式按钮:工具栏(tool bar)、悬浮式按钮弹出式菜单:下拉菜单,注意间距,分割线;上滑式弹窗返回顶部:长页面返回顶部、注意第几屏出现次级页面流程图展示首页→搜索→关键词→商品列表→商品详情首页→分类列表→某分类→商品列表→商品详情栏、内容试图、临时视图栏:三栏内容视图:主内容区设计临时视图:..原创 2020-11-26 16:37:04 · 2368 阅读 · 1 评论 -
UI——day10.首页(二)
首页元素的设计导航栏规范:导航栏88px,状态栏40px颜色:黑、白、主色、主色带渐变、透明、纯色、图片(简洁)功能权重不同,设计样式才有区分搜索栏规则:搜索框高58px左右浅色导航栏背景加略暗的搜索栏深色导航栏背景加略亮的搜索栏搜索样式:1只有搜索框;2只显示历史搜索记录;3只显示推荐搜索项;4历史搜索记录+推荐搜索项。标签栏规范:98px背景:灰白色系or灰黑色系图标:线-线面-面线-面线-线面标签栏-舵式标签栏banner推荐∶状态原创 2020-11-25 12:13:10 · 289 阅读 · 0 评论 -
UI——day9.首页(一)
首页设计方案a.入口导流型:点击路径较长b.瀑布流:直接,与用户交互更好(多栏布局)c.对话列表型:社交类、电商类d.卡片式设计e.楼层设计f.地图导航型:地图不需要设计,设计其他总结:样式取决于功能,功能取决于需求,需求取决去产品定位/用户群体...原创 2020-11-25 12:09:29 · 186 阅读 · 0 评论 -
UI——day8登录注册页(二)
注意事项你需要关注的第一点:默默付出的提示语:信息框中的提示语信息层级是需要被弱化的,一般情况下会跟APP中最弱的信息层级颜色相同,比如时间。而且在输入信息后,提示语消失。还有一种提示语是输入后的反馈提示,如用户名不正确、密码不正确等,可以用弹出框进行提示,也可以在界面上直接显示。你需要关注的第二点︰获取验证码的方式三种形式各有利弊,,我们大部分APP用的是第一种现在很多APP本机状态下可以自动获取验证码填写到页面当中,为操作带来更多的方便。你需要关注的第三点:按钮的反..原创 2020-11-23 21:54:01 · 322 阅读 · 0 评论 -
UI——day7.登录注册页面(一)
认识登录注册页面登陆注册页面出现在哪里?先体验再注册先注册后体验定义:许多的APP都建立了用户系统,有用户系统就有注册登录。简单的就是APP获取用户的个人信息的过程,之后用户就成了APP的留存用户而不是游客。登录注册的意义:用户角度:①用户需要在产品中获得一个独立的ID,以体现其个性化的存在。②用户需要产品为其记录使用进度、状态、收藏的内容。③用户希望获得其它用户的真实信息或更详尽的信息。④用户希望产品通过对自己更详尽的了解提供更好的服务。功能角度:①便于跨设备同步数据,也便原创 2020-11-23 21:49:18 · 1790 阅读 · 1 评论 -
UI——day6.引导页的设计
认识引导页定义:出现在加载完启动画面之后、进入界面首页之前用户所见到的一系列画面。往往是第一次打开应用时出现的画面且仅出现一次。**作用:**在用户使用产品之前提前告知其主要功能与特点看一下引导页中有什么元素?图形、图片、文案、分页点、*跳过/关闭按钮(最后一页由进入代替分页点或添加进入按钮)数量要合理,一般在4页左右包含元素及展现形式文字与界面组合优点:能较为直接地传达产品的主要功能缺点:过于模式化,显得千篇一律文字与插图组合优点:活泼生动吸引眼球缺点:设计耗时长,费..原创 2020-11-17 22:08:55 · 640 阅读 · 0 评论 -
UI——day5.什么是启动页
1.什么是启动页(又称为闪屏)︰当应用程序被用户打开时,在程序启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。2.了解下启动的场景1.冷启动:第一次安装加载2.热启动:安装后使用过一段时间或使用过后被挂起3.启动页存在的意义1.提高用户体验,减少用户焦虑2.传递品牌效应或产品的人文情怀3.商业需求4.启动页的分类1.快速启动类2.品牌类3.情感共鸣类4.节日类5.广告类5.启动页设计的思路1.竞品分析2.确定启动页种类3.了解产品的特点4.特点具象化5原创 2020-11-15 16:52:30 · 1165 阅读 · 0 评论 -
UI——day4.APP类型分析
一.APP的类型分析类型特点社交类注重隐私、功能便捷、使用场景电商类线上交易、小而精(垂直细分领域)工具类系统自带(使用少)/第三方商家开发(加入其它功能:社交、电商等)内容类文章类、新闻类、视频类(中长视频)、音乐类(注重:版权)游戏类单独划分:游戏UI二.最实用的绘制原型流程1.明确需求2.人物画像:细化、丰富、使用场景3.寻找竞品4.竞品功能分析5.功能汇总6.原型框架的绘制三.Xmind常用快捷键快捷键功能原创 2020-11-15 16:51:37 · 160 阅读 · 0 评论 -
UI——day3.IOS设计规范
一.IOS尺寸规范PPI(Pixels Per Inch)︰像素密度,所表示的是每英寸所拥有的像素数量PPI数值越高,即代表显示屏能够以越高的密度显示图像。从而得出,显示的密度越高,显示器显示的就越真实、越清晰1)界面规范不同屏幕规格:背景:#f5f5f5 #eeeeee #efeff4分隔线:1px#000000不透明度10% #dddddd、#cccccc分隔条:20px列表高:100-120px2)图标规范1)启动图标要求的设计尺寸:1024*1024 圆角180p原创 2020-11-13 15:03:07 · 3482 阅读 · 0 评论 -
UI——day2.android设计规范
一.移动UI载体怕屏幕视网膜屏幕(Retina screen): 分辨率超过人眼识别极限的高分辨率屏幕1.DPI和PPI的区别DPI (Dots Per Inch) :点数密度,所表示的是每英寸所拥有的点数量。(安卓) DPI数值越高,即代表显示屏能以越高的密度显示图像。PPI (Pixels Per Inch):像素密度,所表示的是每英寸所拥有的像素数量。(ios)PPI数值越高,即代表显示屏能够以越高的密度显示图像。注意: PS中所说的分辨率跟屏幕的分辨率不是同一个东西!!!原创 2020-11-13 11:56:21 · 426 阅读 · 0 评论 -
UI基础之插画分类
一、UI插画分类1.扁平插画优点∶快速上手,同时画风简洁明了,突出重点,能够快速的让用户了解内容 缺点:过于简洁,运用的也比较普遍,视觉上难以让用户记住2.肌理插画特点:在扁平插画的基础上,增加了颗粒感,将光影关系表现出来,比扁平插画更有质感。一般是运用各种材质笔刷处理或者是滤镜。优点:比扁平化插画更生动形象,画面轻快,腉理的画法给人很朴实的感受,比较轻松随意;肌理中的颗粒感增加了画面细节,也更耐看缺点:对页面的精致感要求比较高,光感要是把握不好,画面难出彩3.描边插画特点:描边插画除原创 2020-11-12 14:58:50 · 940 阅读 · 0 评论 -
UI基础之图标设计
一.扁平化图标的分类1.纯平面特点:纯色、剪影优点:简洁,清新,舒服,视觉识别度较好,色彩明朗,设计感强烈,图形表现高度概括2.轻折叠特点:纯色、折痕、轻投影优点:比纯平面丰富,有轻微视觉空间感,色彩明朗,轻投影,营造出轻盈的感觉,视觉统一性好3.轻质感特点:轻渐变、层次简单、轻投影优点:简洁、干净、明朗,有一定的精致感,有简单的层次,轻投影创造轻度立体感而又轻盈清新,内容相对丰富4.折纸风特点:折叠、投影、结构优点:层次丰富、结构明显,易于创造空间立体感,几何感明显,复杂和简洁结合原创 2020-11-12 14:57:36 · 863 阅读 · 0 评论 -
UI基础之字体设计
字体设计方法替换法共用法叠加法分解重构法尖角法断肢法减细法错落摆放法iPhone678:状态栏40px 导航88px 底部98px 左右20-30px原创 2020-11-12 14:56:41 · 183 阅读 · 0 评论 -
UI——day1.APP输出的流程
常见的工作岗位:产品经理PM交互设计师IXD视觉设计师GUI用户研究工程师UE/UX程序员RD运营OPAPP输出的流程一.需求调研1)发现需求发现需求之神奇的方法:角色(用户画像)/场景2)市场调研 a.文献收集推荐网站:36氪,虎嗅网,创业邦 b.竞品调研 功能点 优缺点 页面风格 交互设计 … c.用户调研 1)定量分析:问卷调查(推荐网站:问卷星,问卷网) 2)定性分析:二.交互设计1)产品功能分析 思维导图,流程图原创 2020-11-12 14:54:40 · 247 阅读 · 0 评论