link管理
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
相关文章推荐
|
高大的感冒药 · Unity/docs/UnityAssert ...· 4 月前 · |
|
|
无邪的斑马 · [SOLVED] logrotate ...· 4 月前 · |
|
|
宽容的凉茶 · 自带光驱的笔记本电脑推荐（体验便捷光盘读写的 ...· 5 月前 · |
|
|
玩命的汉堡包 · IF燕云的个人空间-IF燕云个人主页-哔哩哔哩视频· 6 月前 · |
|
|
酒量小的蟠桃 · Velocity官方指南-使用Velocit ...· 8 月前 · |
好了，那我们接下来就开启这段美妙的变强旅程吧！
移动端UI设计的基本认识
已学会 0/3 · 知识点 0/1
移动端UI设计的基本认识
UI (User Interface) 也叫交互界面、图形界面、人机界面，是我们今天无时无刻不在接触不受影响的伟大发明。 理解 UI 是什么，我们只要关注2个重点： 如何有效输入信息 如何有效获取信息 计算机是一个用来输入指令，完成处理，返回结果的设备。比如问计算机 1+1 等于几，你就要考虑你怎么...
UI 界面设计所需的技能解析
UI 设计的主要对象是针对可交互界面的设计，想要实现优秀的界面设计效果，就需要具备以下几种能力： UI软件的使用 系统设计规范认识 主流的控件、组件掌握 界面的布局和排版 配色的逻辑和应用 图标的独立设计能力 项目设计规范定义 在开始学习 UI 的专业知识之前，我们要先对这些能力有初步的认识和判断，...
移动端的基础规范认识
已学会 0/9 · 知识点 0/6
移动端的规范认识
规范的类型认识 很多人都知道学 UI 有规范，苹果的规范，安卓的规范。但是，多数人并不清楚这些规范到底是什么，有哪些，以及它们的作用、意义、内容。 规范一词，可以解释为 —— 某一行业或者行为的要求准则。它不是数学定理，而是人为制定的条件、规则、约束、限制。 在从事 UI 设计师这个职业，掌握规范，...
屏幕和分辨率的规范
屏幕的分辨率 首先，UI 设计师产出的内容，都是在电子屏幕中显示的，是数字化的图形，而不是要打印喷绘出来的三维世界实物。所以，屏幕显示规则决定了图形的显示方式。 电子屏幕成像的基本原理，即一块完整的屏幕由若干像素点组成。屏幕分辨率的参数，如 1920*1080，指的就是这块屏幕 XY 轴包含的像素点...
设计的单位和格式
设计中的图像类型 前面提到过，iOS 和 Android 分别使用了 pt、dp、sp 三种长度单位，但在整个 UI 的领域中，还不止这些单位，包括网页的 em、rem，小程序的 rpx、vw 等。所有长度单位我们都可以分成两种类型，物理单位和逻辑单位。 物理单位是要作用到现实世界的，我们说的厘米、...
UI 中的字体与显示
文字的显示逻辑 字体是 UI 设计中操作频率最高的对象，也是规范中会一直提到的内容，但理解字体的规范首先得知道智能设备中的字体有哪些特性，如何被显示出来的。 文字对于人类来说是有价值有信息的，但对于计算机来说，文字只是一些图形轮廓，没有实质的意义。如果想要让计算机识别和返回文字，就需要将人类的文字转...
UI 文字的属性设置
了解完字体的显示逻辑，下面就要认识字体的 —— 属性。在不同 UI 设计软件中，文字的可编辑属性是基本相同的，虽然可设置属性不多，但都很重要。 只要完整的理解文字的属性，才可以在后续看懂规范中文字的解释和后续的演示案例。文字在 UI 中涉及的属性包含两个部分： 文本属性：字体、字号、字重、字色、样式...
基本色彩模式的认识
配色是一门很复杂的学问，在学习配色的方法之前，首先要理解的是色彩的模式。 色彩模式是一种用来描述、记录色彩的方法，而不同场景，方法就不一样。因为不同的场景中组成色彩的要素不同，如果不做区分，就会造成颜色记录和使用上的误差。 常见的色彩模式包含HSB、RGB、CMYK 三个大类。 色彩模式分类 HSB...
UI 设计中的原子理论
在界面设计中，对包含的元素进行分析就能发现，界面是由最基础的四个元素组成，分别是文字、几何、图标、图片。 但这些元素太底层，不利于对页面作用、内容的解释和构建，所以行业还需要搭建对层级更高的内容的解释。 国外的网页设计师 Brad Frost 受元素周期表的启发，原子结合可以形成分子，分子可以组成细...
iOS 的基本规范认识
iOS 的官方资源 iOS 是苹果的官方系统，iOS 设计规范是规范针对这套系统提出的一套规范解释和设计建议文档。 目前官方设计规范已经添加中文翻译，感兴趣的同学可以去阅读官方原文： 点击查看 需要注意的是，官方规范中集合了虚拟设备 VisionOS、电脑 MacOS、平板 iPadOS、电视 tv...
标准规范下的APP 设计演示
已学会 0/5 · 知识点 0/1
苹果音乐主页的设计
在这个章节中，我们就要通过已经掌握的规范和知识，临摹苹果官方音乐应用的界面。 在这个案例的学习中，要先掌握一款 UI 设计软件的基本使用和操作，可以是即时设计、Figma、Sketch或 XD。 如果你学习软件看的是我们的视频的话，就不会对后面的演示内容感到陌生，我们以图文的方式进行重新的解构可以帮...
资料库页面的设计
基本框架搭建 这里的第一步依旧是先搭建基本的框架，而如果前面做过的页面和当前的相似，就可以复制前一个画布出来并删除不相关的组件，这样可以提升效率，不用重复造轮子。 将顶部标题栏的标题改为“资料库”，并下移给卡片留出位置；在顶部添加一个编辑按钮，下方绘制一个矩形卡片。 然后，再在官方组件库中找到列表组...
专辑页面的设计
基本框架搭建 复制一个「现在就听」页面出来，然后删除不相关的组件内容。 然后从官方组建库中复制一个基础的顶部标题栏，删除不相关的元素。 继续添加封面图和下方的专辑信息文字。 接着绘制中间的两个按钮，虽然官方有提供按钮控件，但这么基础的元素，是没必要从官方复制出来的，直接手动完成即可。 按钮主要根据高...
播放页面的设计
基本框架搭建 播放页面的框架就和前面一般页面不同，所以不用复制前面的画布，直接创建个新的画布，先将背景设置成深色，然后添加状态栏和底部指示器。 上方的那个用于拖拽的小矩形，也是官方组件库中的元素，官方名称为 Resize Indicator 尺寸调整指示器， 可以复制出来并贴着状态栏置入。 然后添加...
移动端的基本控件和组件设计
已学会 0/12 · 知识点 0/3
UI 中的尺寸定义逻辑
UI设计虽然和平面很像，但在实际操作中有自己的操作、设计思路，其中最大的不同点，就是UI界面中的元素尺寸，多数是通过计算并手动输入出来的，而不是使用鼠标拖拽出对应的大小。 比如要应用一些规范的组件，又不从官方组件库中直接拖拽出来，那么就要手动设置这些组件的尺寸。 UI 设计软件中之所以把尺寸设置的输...
按钮的设计逻辑
按钮 Button，是用于触发特定指令和操作的控制器，是 UI 中最基础的交互元素，不仅出现频率极高，且应用的样式和场景也非常的丰富。 在广义的定义中，所有点击后可以触发特定指令和操作的元素都是按钮，可以是文字、图片、图标、几何图形等。在这里，我们指的按钮是由几何图形+文字或图标组成的元素。 按钮根...
输入框的设计逻辑
输入框 Input，是用于向系统输入信息的表单控件。 在一套系统中，同样会包含很多的输入框，而根据场景、权重的不同，也会应用不同的输入框高度大小。通常，输入框只需要分成两个尺寸区间即可。 大输入框：大于等于 44，如账号、密码、搜索等操作 小输入框：大于 28 小于 44，如筛选条件、次级搜索等操作...
列表行的设计逻辑
列表行 row 是应用在单行列表中的行元素，要理解它就要先认识列表。 列表是由多个同类元素按相同规则排列出来的组件，表现形式多种多样，可以是横向多列，也是纵向单列、纵向多列。 纵向单列的列表，就是由若干列表行组成，前面提过 iOS 组件库中就提供了大量的列表行样式，基础的列表行中内容只有一行，而复杂...
图标的尺寸定义
图标是什么无需多做介绍，这里主要讨论的，是制定图标尺寸和布局的逻辑而不是如何设计图标图形。 不管是你自己设计的图标还是引用外部的素材，在置入画布中都要设置它的具体尺寸，需要建立一定的标准，才能确保界面中图标的显示能获得满意的效果。 首先我们要知道图标尺寸指的是图标 “容器” 的尺寸而不是图形尺寸，正...
分页器控件的设计
分页器是在不进行跳转的情况，快速切换不同页面的控件，通常被认为它就是 iOS官方组件中的 Segmented Controls，直接翻译可能叫分段控件合适一点。 虽然交互的方式基本一样，但它们产生的作用却不同。苹果的分段控件更多是用于对下方内容做出筛选，而分页器的作用是切换完全不相关的页面、内容。 ...
轮播广告组件设计
轮播广告就是在可以切换内容的展示模块，在国内的 APP 中应用非常广泛，用于承载多条运营或广告信息。 最基础的轮播广告组件，就是图片加下方的控制器，可以是圆形的，也可以是横向的，有几张广告图就显示几个。 而图片的使用上则相对复杂，需要考虑比例的问题。很多设计的分享会强调黄金比例或一些显示器通用的比例...
快速入口的设计
快速入口 Quick link 是用于快速进入下级页面、分类、功能的链接按钮聚合组件，是APP 中最常见的组件之一。 它早期的别名叫金刚区，是由美团团队内部流出的叫法，原因是美团初期首页上有 8 个大功能图标，叫八大金刚，后来图标增加且开始做小，就改成叫金刚区。这是一个很抽象的叫法，所以简单了解即可...
瓷片区的设计
瓷片区是由多个展示内容要素的区域组合而成的组件，因为它的布局很像瓷砖贴片，所以得名瓷片区。 瓷片区本质上也是用于跳转到下级页面的按钮，所以很多人分不清瓷片区和快速入口之间的区别。除了样式上的差异外，瓷片区更类似商超中的展柜，将具体内容展示给用户，而且会根据运营需要定期更新，有很强的引导性，吸引用户关...
动态卡片的设计
动态卡片是用于展示用户发布的动态、评论的卡片式组件，包含用户的基本信息和发布的图文信息，也是非常常见的组件。 动态卡片的设计的主要要点，是确定内部包含几个模块，以及多少信息。最常见的模块包括用户、动态、操作、评论四个，如下图所示。不同的需求和场景，会有不同的模块组合和顺序，就需要自己去总结了。 确定...
商品卡片的设计
商品卡片，是商品展示列表中表示单一商品的卡片式组件，包含单列和多列两种模式。 多列的商品卡片使用频率较高，且因为手机的展示空间有限，主要使用的是双列的展示，很少会出现 3 列的设计。要设计双列的商品卡片，首先要确定卡片的宽度，是通过减去页面的左右边距，再确定卡片的间距得出，所以确定好页边距和卡片间距...
移动端页面设计的解析
已学会 0/8 · 知识点 0/1
登录页面的设计
掌握了控件、组件的设计方法，就解锁了界面设计中最重要的底层逻辑。但它们并不是独立存在的，需要置入到具体的页面中，而不同页面对组件的应用会有一定的要求，所以本章通过对一些常见页面的认识，来理解如何正确应用控件和组件完成界面的设计。 首先认识的是登录页，用于用户账号的输入和验证，是最基础的界面类型。可以...
综合型主页设计
综合型主页即国内主流 APP 登录后的第一个页面，往往名字也叫发现、探索、推荐页面。 它主要的作用，就是聚合产品相关的功能、服务、信息，让用户可以在这个页面进入想去的页面，或者被推荐的内容吸引并停留、点击。 后者对该页面的设计起到更关键的作用，所以首页的内容往往非常多，聚合了大量的信息和组件。想要完...
动态列表页面设计
动态列表页面是用于展示动态的用户动态的页面类型，通过聚合动态的信息流，让用户可以流畅、沉浸的浏览其它用户发布的动态。 常见的动态列表包含两种，单列和双列模式，单列的展示信息会更多但浏览效率较低，多列的则展示信息较少但浏览效率较高。多数情况下一个应用只用一种动态列表类型，但部分应用会用两种。 动态列表...
商品列表页面设计
商品列表页面就是用于展示商品的信息流页面，同理它也包含了单列和双列两种模式（卡片和列表模式）。但不同于动态卡片的是，主流的电商应用会在同一个页面中支持这两种模式的切换。 电商的列表页面的结构也是以突出商品为主，顶部基本就分页器、操作栏、搜索框等常见元素，用于对列表内容做出筛选和排序。 相对来讲，单列...
电商详情页面设计
商品详情页是用于展示商品具体信息和进行购买的页面，大家都很熟悉无需多做介绍。虽然常见，但商品详情页是个相对复杂的页面，因为页面中包含的组件模块和字段信息很多，且页面长度会很长。 所以设计前要花比较多的时间，确定页面中包含哪些模块，顺序，以及对应的字段信息。 最常用的模块包含顶部展示图、商品信息、规格...
影音详情页设计
影音详情页是电影、剧集介绍的详情页面，是个类型的统称，也包含音乐、书籍等内容的详情页。 详情页内包含的内容也比较复杂，包括基本信息、评分、简介、作者/演员、评论、相关推荐、底部操作栏等等。同样需要在前期分析页面中包含对组件内容排序和对应字段的整理。 在该页面类型中，最难设计的就是顶部的基本信息模块，...
用户设置页面设计
用户设置页面即用户进行个人账户、应用进行设置的页面，常见于应用底部导航中的最后一个选项。 用户设置页和用户个人主页不同，前者是设置型页面，而后者是社交展示型页面，它们经常被混为一谈，往往在设计的样式上也非常接近。主要的区分方法，就是该页面是否能被其它用户访问，能被访问的就是个人主页，不能被访问的才是...
UI 中的视觉风格
已学会 0/2 · 知识点 0/2
夜间模式的设计
苹果在 iOS13 中，正式推出了深色模式 Dark Mode，允许系统进行浅色和深色的模式的切换。 深色模式的应用，不仅仅是控制iOS的官方应用，也建议第三方 APP做出适配，随系统的模式做出改变。所以，APP的设计中往往会增加对深色模式的设计。 虽然深色模式也允许设计师自由发挥，但要尽量在搞明白...
推荐笔记
Hurricane
2024-08-13
最小字号
字号最重要的一环在于 “最小字号” 的认识，低于这个字号就无法被正常阅读，下面是应用数值： 中文最小字号：10-11 英文最小字号：9
上课困难户
2024-06-26
图标尺寸
大图标：大于 32，主要用于重要页面、功能、分类的展示 中图标：大于 20 小于等于 32，主要用于基础的页面、功能、信息的展示 小图标：小于等于 20，主要用于次要功能、信息的展示
上课困难户
2024-06-26
iOS总结
总结： iOS 中最基础的界面设计方法，就是官方组件库中有提供的组件，我们就从组件库中复制再做小修改。 官方组件库中不包含的元素，我们再独立完成。 想要画面视觉效果好，就要在色彩、投影、间距的应用中多下功夫研究和尝试。 但真实的项目界面设计对官方规范和组件的依赖不高，包含更多的自定义设计元素，所以想要正式入门，就要掌握更多的组件设计原则，样式设计逻辑，我们将在后续的章节中做进一步的分享。
上课困难户
2024-06-26
登录页面的元素
推荐文章
|
|
玩命的汉堡包 · IF燕云的个人空间-IF燕云个人主页-哔哩哔哩视频 6 月前 |