UX百科_link管理

添加链接

注册登录

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

仗义的单车 · 移动端Web页面适配 - 女王控的博客· 3 小时前 ·

发呆的抽屉 · FVS页面接口- ...· 5 天前 ·

英俊的针织衫 · 全局接口-FR- ...· 5 天前 ·

酒量小的薯片 · CSS使子兄弟在100%宽度的父级中具有相同 ...· 1 周前 ·

飘逸的汽水 · Kindle在线推书网站 ...· 2 周前 ·

无邪的创口贴 · 白上吹雪~小狐狸的bgm歌单（白上フブキ） ...· 1 周前 ·

英姿勃勃的日记本 · 绍兴市委市政府印发《绍兴市推进长三角区域一体 ...· 3 周前 ·

任性的蚂蚁 · 天降少女～从2楼掉下了天才麻将少女最强的女子 ...· 1 月前 ·

俊秀的滑板 · typeScript 中的数组类型定义 - ...· 2 月前 ·

小胡子的松鼠 · 2018年政府工作报告_政府工作报告_云南省 ...· 2 月前 ·

好了，那我们接下来就开启这段美妙的变强旅程吧！

移动端UI设计的基本认识

已学会 0/3 · 知识点 0/1

移动端UI设计的基本认识

UI (User Interface) 也叫交互界面、图形界面、人机界面，是我们今天无时无刻不在接触不受影响的伟大发明。理解 UI 是什么，我们只要关注2个重点：如何有效输入信息如何有效获取信息计算机是一个用来输入指令，完成处理，返回结果的设备。比如问计算机 1+1 等于几，你就要考虑你怎么...

UI 界面设计所需的技能解析

UI 设计的主要对象是针对可交互界面的设计，想要实现优秀的界面设计效果，就需要具备以下几种能力： UI软件的使用系统设计规范认识主流的控件、组件掌握界面的布局和排版配色的逻辑和应用图标的独立设计能力项目设计规范定义在开始学习 UI 的专业知识之前，我们要先对这些能力有初步的认识和判断，...

UI 设计的软件介绍

UI 设计类软件，就是开发出来专门用于 UI 界面设计的软件工具，是近 10 年来新兴起的设计软件类型。目前市面上已经存在非常多的 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...

iOS 的控件和组件认识

上一节我们认识了官方规范中最重要的五个组件，但官方提供的组件库中还有非常多的控件和组件无法被忽视，所以除了你们自己去查看源文件熟悉以外，我们也要对它们做个简单的总结，加快大家的认识。常用控件按钮控件 Button 按钮是所有控件中最基础、出现频率最高的控件，在一个系统中必然包含多种形态和尺寸的按...

标准规范下的APP 设计演示

已学会 0/5 · 知识点 0/1

苹果音乐主页的设计

在这个章节中，我们就要通过已经掌握的规范和知识，临摹苹果官方音乐应用的界面。在这个案例的学习中，要先掌握一款 UI 设计软件的基本使用和操作，可以是即时设计、Figma、Sketch或 XD。如果你学习软件看的是我们的视频的话，就不会对后面的演示内容感到陌生，我们以图文的方式进行重新的解构可以帮...

资料库页面的设计

基本框架搭建这里的第一步依旧是先搭建基本的框架，而如果前面做过的页面和当前的相似，就可以复制前一个画布出来并删除不相关的组件，这样可以提升效率，不用重复造轮子。将顶部标题栏的标题改为“资料库”，并下移给卡片留出位置；在顶部添加一个编辑按钮，下方绘制一个矩形卡片。然后，再在官方组件库中找到列表组...

专辑页面的设计

基本框架搭建复制一个「现在就听」页面出来，然后删除不相关的组件内容。然后从官方组建库中复制一个基础的顶部标题栏，删除不相关的元素。继续添加封面图和下方的专辑信息文字。接着绘制中间的两个按钮，虽然官方有提供按钮控件，但这么基础的元素，是没必要从官方复制出来的，直接手动完成即可。按钮主要根据高...

播放页面的设计

基本框架搭建播放页面的框架就和前面一般页面不同，所以不用复制前面的画布，直接创建个新的画布，先将背景设置成深色，然后添加状态栏和底部指示器。上方的那个用于拖拽的小矩形，也是官方组件库中的元素，官方名称为 Resize Indicator 尺寸调整指示器，可以复制出来并贴着状态栏置入。然后添加...

界面的合并和输出

完成所有页面的设计以后，下一步我们就要想怎么将这些界面导出供其他人预览。虽然即时、Figma 等线上设计工具都有在线分享画布功能，但这适合在设计团队内部使用，如果是要让外部人员观看，就最好导出成对应的图片格式。网上常见的 UI 设计案例，会将多个页面整合进一个画板中，比如下面的案例：要实现这样...

移动端的基本控件和组件设计

已学会 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的设计中往往会增加对深色模式的设计。虽然深色模式也允许设计师自由发挥，但要尽量在搞明白...

UI 中的投影应用

掌握好投影的使用，是必备的 UI 视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，很设计师始终没办法很好的应用投影来提升自己的设计质感。投影的基本认识有了光，才有影。光影是美术和摄影最核心的基础。在光学原理中，不透明体遮挡光源，会产生的影子有两部分，本影和半影。本影是...

推荐笔记

UX小学生

2024-08-26

Ui设计是辅助用户使用硬件，程序的工具。

移动端UI设计的基本认识

UX小学生

2024-08-26

Ui设计是辅助用户使用硬件，程序的工具。

移动端UI设计的基本认识

Hurricane

2024-08-13

最小字号

字号最重要的一环在于 “最小字号” 的认识，低于这个字号就无法被正常阅读，下面是应用数值：中文最小字号：10-11 英文最小字号：9

UI 文字的属性设置

Hurricane

2024-08-13

照片、广告图等

而复杂的不规则图像，或者包含渐变、投影元素，都没法用矢量来完成，如照片、广告图等，还是必须使用位图来记录才能正常显示。

设计的单位和格式

Annis

2024-07-28

ok

段间距的设置最好小于行高最佳，不会让段落之间过于离散。

UI 文字的属性设置

Min

2024-06-28

+101

移动端的规范认识

Min

2024-06-28

ps 算是本地的吗？

本地是指设计文件保存在你的电脑本地硬盘中

UI 设计的软件介绍

上课困难户

2024-06-26

图标尺寸

大图标：大于 32，主要用于重要页面、功能、分类的展示中图标：大于 20 小于等于 32，主要用于基础的页面、功能、信息的展示小图标：小于等于 20，主要用于次要功能、信息的展示

图标的尺寸定义

上课困难户

2024-06-26

iOS总结

总结： iOS 中最基础的界面设计方法，就是官方组件库中有提供的组件，我们就从组件库中复制再做小修改。官方组件库中不包含的元素，我们再独立完成。想要画面视觉效果好，就要在色彩、投影、间距的应用中多下功夫研究和尝试。但真实的项目界面设计对官方规范和组件的依赖不高，包含更多的自定义设计元素，所以想要正式入门，就要掌握更多的组件设计原则，样式设计逻辑，我们将在后续的章节中做进一步的分享。

界面的合并和输出

上课困难户

2024-06-26

登录页设计

登录页设计中最大的难题就是背景、品牌元素如何呈现。最简单高效的设计方式有三种，浅色背景、主色背景和图片背景

登录页面的设计

上课困难户

2024-06-26

登录页设计

登录页设计中最大的难题就是背景、品牌元素如何呈现。最简单高效的设计方式有三种，浅色背景、主色背景和图片背景

登录页面的设计

上课困难户

2024-06-26

登录页面的元素

推荐文章

仗义的单车 · 移动端Web页面适配 - 女王控的博客

3 小时前

发呆的抽屉 · FVS页面接口- FineReport帮助文档 - 全面的报表使用教程和学习资料

5 天前

英俊的针织衫 · 全局接口-FR- FineReport帮助文档 - 全面的报表使用教程和学习资料

5 天前

酒量小的薯片 · CSS使子兄弟在100%宽度的父级中具有相同的宽度和高度(正方形)_使锚点填充100%的父级宽度和高度_在px中具有相同高度和宽度的元素呈现为非正方形 - 腾讯云开发者社区 - 腾讯云

1 周前

飘逸的汽水 · Kindle在线推书网站强烈推荐_kindle推送网站-CSDN博客

2 周前

无邪的创口贴 · 白上吹雪~小狐狸的bgm歌单（白上フブキ） - 歌单 - 网易云音乐

1 周前

英姿勃勃的日记本 · 绍兴市委市政府印发《绍兴市推进长三角区域一体化发展行动计划》

3 周前

任性的蚂蚁 · 天降少女～从2楼掉下了天才麻将少女最强的女子高中生是谁?(允许使用所有能力) - ... - 大妈之家

1 月前

俊秀的滑板 · typeScript 中的数组类型定义 - 傲慢或香橙

2 月前

小胡子的松鼠 · 2018年政府工作报告_政府工作报告_云南省人民政府门户网站

2 月前

Link管理 · 51好读 · Sov5搜索 · 小百科

link管理 - 链接快照平台