-
让品牌有温度、有情感
专注品牌策划15年
UI设计笔记（ui设计笔记本电脑排名）
发布时间：2023-04-28 03:08:07
稿源：
创意岭 阅读：
51
大家好！今天让创意岭的小编来大家介绍下关于UI设计笔记的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008
本文目录:
一、移动应用UI设计——导航设计
年正如精良的设计一样，优秀的导航也大象无形。不管是浏览好友信息，还是租赁汽车，完美的导航设计能让用户根据直觉使用应用程序，也能让用户非常容易地完成所有任务。
导航的设计是 App 设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽量留给主体内容，为了在手机屏幕给定的范围内展示出更多内容，优秀的导航栏设计将起到关键性作用，对于不同的操作也当因地制宜地选则不同的设计方案。
如网站设计中，我们会把导航分为一级导航、二级导航等等，其实移动应用和网站设计一样，也具有自己的信息架构。这里我们主要依据市场上面已有的产品对移动应用导航大体分为以下两类：主要导航模式与次级导航模式。
图1-2 次级导航模式
首先看看以下7种主要导航模式：
主要导航模式—— 第一种：跳板式
跳板式导航对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为“快速启动板”（Launchpad）。跳板式导航的特征是，登录界面中的菜单选项就是进入各个应用的起点。在国内市场上跳板式设计应用很用，如下图的第一个“百度手机卫士”（图1-3）它主要通过功能来展示菜单选项，这种网格布局清晰的把各个功能区域进行划分，能让用户快速找到入口并点击操作。(图1-4)的云图TV，它是一个免流量的手机电视，他的模块相对百度手机卫士来说较简单，主要通过电视台来区分模块名称。比如：中央电视台CCTV、卫士、体育甚至海外频道等等。而美图秀秀（图1-5），更是我们比较熟知的一种，它的主界面用2X3的网格布局把常用的功能入口都直观的表现在上面。
什么是2X3的网格布局了？
2X3网格布局是一种布局形式，常见的布局形式有：3X3、2X3、2X2、1X2（图1-6）。但不一定非拘泥于网格布局，根据需求的功能来定义，可以成比例放大某些选项，以彰显其重要性。
XiiaLive，一款功能无比强大的网络电台，兼具简洁而清新的 UI 设计。这款应用具有不容忽视的导航，设计师用3X3的网格布局把菜单的6个菜单项目布局在屏幕中间，使每个格子都扮演着功能性的作用（图1-7）。
Tripper是一款日本的本地导游应用，他用扁平的设计图标把应用的功能用2X3的网格布局罗列在整个界面中，使得用户能够相当轻松顺手地浏览这款APP（图1-8）.
跳板式菜单也可以说是网格式菜单，它类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高操作效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。
ASM采用的是不规则网格的跳板式导航，以突出内容的优先级（图1-9）。
最近经典的游戏：“别踩白块儿”（图1-10）也是跳板式模块的经典体现。
它把各种游戏模式用网格区分开，仅用黑白两色就能清晰的让用户理解并操作。正如前面所说，在网格布局的设计中，不一定必须遵循几乘几的网格形式，甚至可以成比例的放大或者缩小某些选项，用以彰显他的功能特色，举一反三，设计师还可以合并他的多种网格形式，使得功能之间的逻辑流程更准确。比如别踩白块儿中的每个游戏选项，点击的二级菜单也用跳板式或者列表式展现了更多的功能选择。
个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能，允许用户改变跳板导航的布局，如优酷界面。
通过以上的案列分析，我们可以整理如下几点：
1.为同等重要的内容项使用网格布局。
2.为相比之下更为重要的内容项使用不规则布局。
3.视情况使用个性化设置和自定义选项。
主要导航模式——第二种：列表菜单式
列表菜单式导航与跳板式导航其实是有共同点的，他们的共同点在于，每个菜单项都是进入应用各项功能的入口点。
但是不同点在于列表菜单式导航有很多种变化形式，包括个性化列表菜单，体现分组列表和增强列表等。
案列分析：
个性化列表的方式：在photo sticker中首页就采用了个性化列表菜单的方式。而IOS系统设计则采用了分组列表菜单式。
印象笔记的IOS版本它把列表式导航与跳板式导航设计相结合。下厨房即是增强列表导航，何为增强列表导航呢？即就是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。
其实列表菜单式导航，这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。
通过例举的四个案列，以及列表菜单式导航与跳板式导航的对比，列表菜单，更适合用来显示较长或拥有次级文字内容的标题。
主要导航模式——第三种：选项卡式
选项卡式导航，在不同的操作系统有不同的表现和规则。所以在设计时需要为不同的操作系统专门定义选项卡的位置。
Ios、webOS和Blackberry（黑莓）系列都把选项卡放在了屏幕底端，这样用户就可以用拇指进行操作。
选项卡的导航设计方式，一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。受制于屏幕宽度的限制，其栏目的个数是有限的，不能超过5个。过多的话明显不利于用户的切换。从界面布局来看，也降低体验友好度。
目前也有部分APP在选项卡的基础上，衍生出了一种交互比较好的弹出导航菜单。突出选项卡上展示的那些核心功能的按钮，方便用户快捷操作。
选项卡至于低端的应用市场上面有很多，这里列举几个比较常见的APP：
屏幕底部水平滚动的选项卡是个非常不错的设计，如的Waterlogue应用，它是一款水彩风格照片处理工具，下面的水平翻动选项卡可以让用户选择多种水彩风格
Android（安卓）、Symbian(塞班）和Windows系统都把选项卡定位在屏幕顶端，它模仿了网址导航模式。
Horner包含了可隐藏菜单，不过它能很妙地从顶部出现，由于明亮的颜色和有关联性的巨大图标，它与整个界面内容形成了鲜明对比。Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。
顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循从上至下的阅读习惯，但也有缺点，即不适用与单手操作。
单手操作用户是所示的这两种姿势（左手用户相反）。绿色代表容易点击区域，黄色为拇指伸展可到点击区域，红色区域超出单手可点击范围。
所以不管是在导航设计中，还是在移动应用的其它设计中，我们应该尽可能的考虑用户的手势操作习惯，给用户更好更便捷的体验。
单手操作手指滑动区域图片
网易新闻则采用了顶部可滑动的导航形式，屏幕顶端可滚动的选项卡:用户移动选项卡后能看到更多的菜单选项。
爱奇艺应用同样也采用了顶部滑动导航的模式。但是这里更值得一提的是，为已选择的菜单项设置使用易于识别或带有标签的图标等不同的视觉效果，用户就能清晰的知道自己选择了哪一项。
主要导航模式——第四种：陈列馆式
陈列馆式的设计通常在平面上显示各个内容项来实现导航。 主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或幻灯片演示。
陈列馆式导航能够很好地应用与用户需要经常浏览，频繁更新的内容，如下图的超级相册和便签本。
相册是我们在日常生活中时常运用到的一个功能，使用频率高，图片数量多，所以采用陈列馆的形式是再合适不过了。
而便签本也不陌生，下图中的便签本可以上下左右拉伸不断创建新的收纳空间，一个个方方正正的分类视图，颜色各异却能达到一种养眼的和谐美。没有花哨的功能，主界面上只简洁地显示收纳盒名称与其中的项目数量。
最美应用:是一款通过互联网平台，每天为用户发送一款赏心悦目的移动互联网应用。它通过类似幻灯片的形式来导航，用户通过查看每个应用来划屏切换屏幕内容，而它下面的进度条也会互动性的跟随着用户的切换而进行图标的动态变化。
主要导航模式——第5种 仪表式
仪表式导航提供了一种度量关键绩效指标是否达到要求的方法。
过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。
Timi时光记账—精美独特的时间轴记账:Timi 时光记账采用了时下非常流行的时光轴的形式，帮你整理账目，简洁明了，界面精美，在方便好用的同时，还满足了视觉享受的需求~。
乐动力：通过数据来查看自己每天活动状态。下滑还有很多功能，都可以点击查看。
主要导航模式——第6种 隐喻式
隐喻式导航的特点是用页面模仿应用的隐喻对象。
这种导航主要用于游戏，但在帮助人们组织事物（如日记、书籍、红酒等），并对其进行分类的应用中也能看到。
途书笔记，用牌照记录数据的笔记。它把导航界面菜单做成了一本一本的书，有一本书的形式，隐喻的表达了书的概念。自定义标题，分类进行查阅。
找你妹的游戏中，导航就用闯关的进度来显示，直观且具有趣味性。
主要导航模式——第7种：超级菜单式
移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。
这种导航模式在现在的app设计中使用的比较少，而且一般会用做分类检索de 次级导航使用。在手机网站的导航设计中比较常见。
美团中就采用了超级菜单式导航做为次级导航使用。
以上均是主要导航模式：那么接下来针对次级导航模式进行案列赏析。
次要导航模式：
这里我们值得注意的是在导航的设计中，所有的主要导航模式都可以用作次级导航。我们经常能够看到选项卡下再用选项卡导航、导航卡下用列表导航、选项卡下采用仪表式导航、跳板式导航下采用陈列馆式导航灯情况。
而次级导航模式是否可以用作主导航，答案不是确定的，因为事物都是贯穿融合的，主要你运用得当，一切均有可能。现在我把这三种归纳为次级导航是针对现有市场产品进行分析得出，并不一定是绝对。
次级导航模式——第8种： 页面轮盘式。
通过这种导航模式，操作者可利用“滑动”操作快速浏览一系列离散的页面。
疯狂来找钱就采用页面轮盘式，页面指示器（iOS中的术语，指用来表示页面数量的小点）可以显示出导航中的页面数量；执行“滑动”操作可以显示下一页。
次级导航模式——第9种：图片轮盘式
图片轮盘式导航类似于一个二维轮盘，图片轮盘式导航更多的应用于播放器和需要多图片展示应用中。
香蕉相机，作为一个相机应用，该有的功能相对还是挺齐全的。拍照、添加相册图片、添加文字等等，都木有问题，还有很文艺的滤镜和相框~
图片轮盘式导航可以查看更多的香蕉图标，相加几个来几个~~~~
次级导航模式——第10种：扩展列表式
扩展列表式导航通过左/右/上/下拉屏幕或者点击按键显示更多的信息。
在网易新闻，TIMI记账和畅读等应用设计当中，通过点击屏幕左上角的按钮唤出切换项，有些也可以通过向右或者向左，滑动手指来完成。所以当我们觉得菜单比较占用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显眼的位置。
一个简单的滑动动画，就像拉出一个抽屉，「抽屉式导航」这个名称应该就是来源于此。抽屉式导航突破了数量的限制，更大程度上释放了主体空间，也因此提高了操作成本。
此处就个人意见，如果能将主要功能项组织在 4 到 5 项，选项卡导航的设计方式可能会更好，否则，就应该优先考虑抽屉式导航了。抽屉式导航通过纵向排列切换项解决了具有过多的切换项这一问题。不过这也意味着导航不能和主体内容同时出现在屏幕上
二、学习ui设计需要什么基础
1.无经验也可以学的。无经验学习UI设计的话首先就要从最基础的学起。首先可以先读一些最基础的书籍，这边给大家推荐一些零基础必看的一些书籍。比如《设计师要懂心理学》、《写给大家看的设计书》、《配色设计原理》、《板式设计原理》等。这些都是很适合零基础去学的。在搭配着视频看，做做笔记，把基础知识扎牢。再有理论知识的基础上再去多多实践效果可佳的。
2.UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。主要的工作内容是设计、图标制作、APP品牌制作、界面设计、切图标注、推广运营的活动页面、banner制作等等。UI前景广阔，需求巨大，就业范围广，可以进入互联网公司、设计公司、互动广告公司展览展示公司，也可以进入互联网公司、电商公司等从事相关工作。比如UI设计相关岗位有用户界面设计师、软件图形设计师、交互设计师、用户研究工程师、软件产品设计、移动APP设计等等.综合来讲，UI技能是一个系统专业的能力，就业范围和岗位选择也是多面的。当然，薪资也是高于其他行业的。
3.所以想学UI设计的话，要珍惜时机，只要你肯付出行动用心去学习UI设计，学会以后相信一定会比你现在的工作薪资要高，能让你更有价值。学UI设计不是随便自学就能学会的，要想真正掌握全面专业的UI设计技能，还是要通过系统的学。如果想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，建议实地考察对比一下。祝你学有所成，望采纳。
三、零基础可以学UI设计吗
学习UI设计能做什么呢？零基础学ui写给年轻人。
1、图形设计/界面设计
软件产品的产品“外形”设计，需要具备的能力：懂产品，懂UE，懂用户体验，能看懂数据，基本上给个需求就能实现所有设计稿给到开发。
2、交互设计
主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。
3、用户测试/研究
此“测试”，其目标恰在于测试交互设计是否合理，图形设计是否美观，方式是目标用户问卷调查，通过用户调查结果，分析UI设计以及产品的前景。用户测试是很重要的，因为仅仅设计师或者项目主管的想法和方式，是非常主观的，是非常片面的，不利于设计的整体发展！
4、偏运营类的UI设计师需要具备的能力：创意，策划，手绘，文案，英文，提案表述等。
零基础想要学好ui设计，前期的流程细节自己需要去详细了解，才能更好地学习它：
1、开发流程
UI设计是整个开发流程中的其中一个环节，主要是负责了表现层的工作，肩负着与用户接触的最后一道工序，好的设计需要贴近用户的思维，很多设计师的构思想法用户很难理解，所以UI设计也需要有产品意识，这方面的能力越强，设计的境界往往也会越高。
2、设计目的
UI设计的核心目的就是把产品的商业价值最大化。这一点并不难理解，但有时候却不容易做到。在实际的设计当中，我们很容易就跑了偏路。为什么这么说呢？因为UI设计师的职业特征就是要追求美，有时候会因为过于追求完美的效果，往往会忽略了它最初的目的。所以，只有适合产品的设计才是好设计。
3、技术属性
UI设计是科学与艺术结合的综合技能。比如一个界面中的播放按钮，要考虑它的美观性还要考虑操作效率，通常一个看似简单的按钮背后，还隐藏着更多科学的考究。想要更好地做出来，需要了解的交互设计知识，要更多更全面。
四、零基础学UI设计需要学多久
新手学UI设计要学多久，主要看你想学到什么程度，想通过什么方式去学习，学习能力怎么样。如果你只是因为有兴趣想学着玩，只需要学习UI设计软件的基础操作，基础操作的话一般时间会是在1-2个月左右。但是你会软件的基础操作，并不代表你已经学会了UI设计，最起码你得要有就业能力才能说学会，那要学多久才能真的算是学会，并且可以参加工作呢。
一般时间为4个月左右，120天时间。这里说的4个月时间，并不是所有人都是4个月可以学会的，和学习方法，学习用心程度，学习时间都有关。
如果用错误的学习方法，学4个月是不可能学会的，而正确的方法就是是，要知道学什么，如何去学。
用心程度这块，也很重要，非常用心的人学一个小时比不用心的人学一天效果还好，学的时候有没有一心一意的学，有没有做学习笔记，有没有去思考学习内容。
学习时间，建议每天的学习时间保持在2-5小时是最佳的，并不用全天学，学的多不一定能吸收。
兴趣是最好的导师，，你既然喜欢，那就成功了一半了。怎么入门呢
很简单，你喜欢的是哪一类的UI设计风格，把你觉得喜欢的产品找出来，喜欢的那些界面收集起来，这样做的目的是为了临摹。
想做的界面设计都找好了，现在就是选择工具了，工具这块,建议先去学习PS。ps功能十分强大，图标界面都可以制作。后面想做一些小动效，可以学习Ae。
临摹的目的是学习，学习别人的布局、排版、配色等，在临摹中除了观察各个细节，例如颜色的搭配，字体的大小处理等，我们还需要一个更重要的东西，那就是“分析”，分析有什么用呢。分析可以在临摹之后把别人的东西变成自己的。
在临摹的过程中，我们需要不断思考，多问自己一些为什么。临摹的时候前面建议可以选择同类产品或同类界面，同类的临摹可以让我们更加深刻的了解产品之间的不同，当然这里如果你有自己的想法那就不错了哦，动手把想法做出来，你会有更大的收获。
这里我们前面对于工具的学习很初级，后面随着对软件的熟悉，就可以慢慢增加对于软件的了解，这样有助于想法的表达。但请记住，思维和想法才是最重要的，软件都只是工具。
文章内容来源于UI设计说，版权归原作者所有，如有侵权，请联系我们删除。
以上就是关于UI设计笔记相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
