UI控件 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

UI控件话题

9图掌握UI设计中常见的控件按钮尺寸

9图 1/9

9图掌握UI设计中常见的控件按钮尺寸

UI组件和UI控件有什么区别？帮大家总结了36个UI控件汇总与释义

9图 1/9

UI组件和UI控件有什么区别？帮大家总结了36个UI控件汇总与释义

UI设计中9个常用的控件规范，这篇都梳理好了！

UI

UI设计中9个常用的控件规范，这篇都梳理好了！

UI设计中常见的控件设计都有哪些规范？本文总结了按钮、多选、单选、切换、文本输入框、下拉选择、列表框、下拉按钮、滑块9个控件的设计规范。

2022/09/27

快记下来！5个连大厂设计师都容易搞混的控件与规范

UI

快记下来！5个连大厂设计师都容易搞混的控件与规范

有哪些大厂设计师都会容易搞混的控件和规范？我给大家详解5个常被搞混的控件与大家盲区中的设计规范。

2020/12/28

UI 界面下拉菜单完全设计指南

UI

UI 界面下拉菜单完全设计指南

编者按：这篇文章来自资深设计师 Jeremiah Lam，他所撰写的这篇文章将UI中的下拉菜单的一些常见的注意事项都梳理总结了出来，做 UI 设计的同学可以收藏一下 ~当用户需要在UI界面中选择不同功能、选项、条目的时候，需要依赖诸如复选框、开关、按钮、下拉菜单等 UI 控件。这些 UI 控件有着不同的优缺点，需要根据使用场景和用户需求来灵活使用，同时，这些控件的设计也有很多注意事项。今天这篇文章着重聊聊下拉菜单的设计注意事项，文章会加入大量的用例和最佳实践来为你进行说明。

2020/07/17

资深 UI 设计师搞定按钮和选框的14个秘诀

UI

资深 UI 设计师搞定按钮和选框的14个秘诀

UI 界面当中，各种开关、按钮、选框控件是非常常见的组件，它们看起来不复杂，但是在实际使用的时候讲究非常之多，它们不仅关乎体验，而且涉及到一些界面逻辑问题。

2020/07/08

iOS 人机界面指南精简版笔记之界面元素：Controls（上）

UI

iOS 人机界面指南精简版笔记之界面元素：Controls（上）

前面跟大家分享了 iOS 基本界面元素三大类中的 Bars（栏）、Views（视图），今天继续分享Controls（控件）。

2020/05/25

用一篇文章，帮你掌握弹框的设计规范和进阶使用方法

UI

用一篇文章，帮你掌握弹框的设计规范和进阶使用方法

我将分两期来总结一下弹框的规范和进阶使用方法，这一期我们先梳理一下平台规范下的弹框究竟有哪些。

2020/04/23

用三期干货，全方位解析「标签栏」控件设计

UI

用三期干货，全方位解析「标签栏」控件设计

本系列将分三期全方位解析如何做好标签栏设计，第一期先从 iOS 人机交互规范和 Google Material Design 平台规范切入，来系统梳理一下「标签栏」。

2020/03/26

写给新手的控件设计指南（二）：控制器

UI

写给新手的控件设计指南（二）：控制器

想成为真正的 UI 设计师，光会视觉设计可不行。这份控件设计指南，帮你快速巩固基础，今天继续为大家讲解控件指南第二部分 —— 控制器。

2019/12/10

写给新手的控件设计指南（一）：UI栏

UI

写给新手的控件设计指南（一）：UI栏

想成为真正的 UI 设计师，光会视觉设计可不行。这份控件设计指南，可以帮你快速巩固基础。本文包括三个部分，今天讲第一部分：UI 栏。

2019/12/02

这4个最常见的 UI 组件，给你总结了这份使用指南

UI

这4个最常见的 UI 组件，给你总结了这份使用指南

小溜Epik：我们在看 App 时，有没有思考过这样的问题，同样都是提示弹窗为什么出现那么多不同的样式，亦或者同样都是让界面进行切换的导航为什么有的可以通过侧滑切换，有的却只能点击切换呢？最近在玩 App 时发现了几组这样的控件，下面就来和大家分享下我对他们的理解和选用。目录：警告框与操作表标签栏与操作栏Tabs与分段控件Toast与Snackbar一、警告框与操作表1. 定义警告框：是一种操作上的确认，只有当用户点击按钮后才算真的完成，才可以有其他操作，主要作用是警告或提示用户的。

2018/10/12

高手私藏的 UI 细节设计，这篇全都给你整理好了！

UI

高手私藏的 UI 细节设计，这篇全都给你整理好了！

@孔雅轩LineVision ：这篇文章渗透进页面中的每一个 Kit控件，深入的分析每一个控件所能带给用户的视觉以及心理感受。欢迎关注作者的微信公众号：「线点研究所」「让界面更耐看的细节你注意到了吗」《让设计细节更高级的10个实用小技巧》《界面不精致，往往是你忽略了这些设计细节》《网易资深视觉设计师：24个容易忽略的App设计细节》

2018/10/11

基础科普！超全面的 UI 元素尺寸设置指南（上）

UI

基础科普！超全面的 UI 元素尺寸设置指南（上）

在开始着手设计手机界面时，困扰着新人的除了不知道应该在界面中放什么以外，最突出的就是不知道元素应该使用的长宽数值，也是学生问得最多的问题，所以着手整理2篇文章做扫盲，一次性搞明白，在手机的界面中如何设置元素的尺寸。下篇：《基础科普！超全面的 UI 元素尺寸设置指南（下）》一、基础规则1. 官方规范对于刚开始思考 UI 元素尺寸的新人，通常第一反应都是去看官方规范，新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置，只要看完了就能懂得如何设计 iOS 或 Android 应用。

2018/09/13

产品

超全面！底部动作栏设计总结

王M争：前段时间 B站对视频缓存功能做了一次调整，之前用户想要缓存当前视频只需点击「缓存」图标就行了，新版本中用户必须点击右上角的「更多」图标调出底部动作栏，然后再进行缓存操作。但是 B站官方上传的视频缓存入口依然保留在之前的位置，个人推测因为普通 up主所发布的视频长短不一，良莠不齐，更多的场景是用户阅完即走，缓存的需求不是很大，所以将缓存功能收起。而官方上传的资源一般质量有保障，且时间大都较长，用户更愿意去缓存。

2018/07/03

如何做好提示设计？我从3个角度完成了这篇超全面的总结！

交互

如何做好提示设计？我从3个角度完成了这篇超全面的总结！

Z Yuhan：稍微复杂一点的产品都少不了提示功能，这种全局模块既需要整体解决方案，也需要具体运用规则。以手机 App 为例，提示种类很多（操作成功、操作失败、收藏点赞、二次确认......），展示形式也很多。我最近对这一方面有所思考，结合外网资料整理了一套提示设计的方法和建议。

2018/04/29

「这个控件叫什么」系列之Notice Bar/通告栏

交互

「这个控件叫什么」系列之Notice Bar/通告栏

@龙爪槐守望者：经常能看到在很多 App 的 Navigation Bar（iOS 叫导航栏，安卓叫 App Bar /应用栏）下方、列表上方或者页面底部悬浮着一个横幅。这些横幅通过某个事件触发而出现，能常驻显示直到事件结束，并且通常可以操作。翻遍 iOS Human Interface Guidelines 和 Material Design 都找不到这个控件，这个控件可能叫 Notice Bar（通告栏）。

2018/04/23

交互

超全面的分享功能设计总结

王M争：最近发现一款看片神器——埋堆堆。这是 TVB 推出的官方 APP，里面有 TVB 历年制作的经典剧集，而且更重要的是不需要充会员，没有片头广告。整体界面设计的也很简洁，但是我发现剧集播放界面竟然没有分享按钮，用户想分享的话必须进入全屏状态。

2018/03/22

「这个控件叫什么」系列之输入框/文本框/Text fields

教程

「这个控件叫什么」系列之输入框/文本框/Text fields

@龙爪槐守望者：Text fields（输入框/文本框）是一个历史悠久而经典的控件，当光标位于输入框时，用户可以在其中输入或复制粘贴文本、数字等内容。输入框虽然看上去简单，但需要考虑的细节也不少，本文将向你介绍输入框的相关组成部分和注意事项。△ Text fields的相关组成部分标题 / 输入框标签（Label）Label是一个控件或一组相关控件的名称或标题，与Text field成对出现时表示输入框的标题或者内容，对于常见的主题有时也用图标代替Label。

2017/12/19

轻松看懂规范！详解组件控件结构体系之单元控件类

教程

轻松看懂规范！详解组件控件结构体系之单元控件类

Echo ：本文本篇文章讲解设计规范中的单元控件类，也是设计规范系列的最后一篇，继这个系列之后我会写一些超有意思的文章，敬请期待哦！系列文章：《轻松看懂规范！详解组件控件结构体系之提示类》《轻松看懂规范！

2017/10/24

从设计指南说起，详解iOS系统组件分类体系

教程

从设计指南说起，详解iOS系统组件分类体系

Echo ：由于iOS 和 Material Design的组件体系有些不一样，所以关于组件的分类体系我会分iOS篇和Android篇来讲解，本篇文章为iOS 篇。对于大部分入门设计师及中级设计师来说，脑海里没有一套属于自己的组件分类体系。一说组件，脑子里面只会蹦出弹窗、toast、操作列表等。

2017/09/20

超实用！Apple 官方的图层命名方法之控制器篇

教程

超实用！Apple 官方的图层命名方法之控制器篇

@爆裂的墨水瓶：在产品视觉设计中，用英文命名图层是良好的习惯：对开发友好，而且方便配合一些设计工具（如Framer、Principle）。在ios设计中，苹果官方的图层命名较为完整，虽然不是唯一答案，但很有参考价值。本文是系列第2篇，整理补充了一下思路，谢谢大家对我第1篇的的支持~上期回顾：《图层英文怎么写？

2017/09/15

高手帮你学规范！iOS版和安卓的规范解析之底部标签导航

教程

高手帮你学规范！iOS版和安卓的规范解析之底部标签导航

底部tab导航是现在应用里非常常见的一种组件。关于这种最常用到的组件，你了解的全面吗？下面我们来分别看一下Material Design设计规范以及iOS设计规范里是怎么规定的。

2017/09/05

「这个控件叫什么」系列之动作菜单/动作面板

教程

「这个控件叫什么」系列之动作菜单/动作面板

@龙爪槐守望者：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。往期回顾：《「这个控件叫什么」系列之小红点+索引导航+分段控件》《「这个控件叫什么」系列之加载占位图+页面指示器》《「这个控件叫什么」系列之步进器+SWITCH》《「这个控件叫什么」系列之TOAST》《「这个控件叫什么」系列之虚拟键盘/软键盘/SOFT KEYBOARD》Action Sheet（动作菜...

2017/08/14

超实用！3分钟带你掌握11个最常用的交互控件

教程

超实用！3分钟带你掌握11个最常用的交互控件

之前的一系列文章，为大家介绍了iOS和Android规范中，各种弹出物的用法，罗列如下：警告框（Alerts），弹出框（Popovers，iOS独有），简易菜单（Simple Menus，MD独有），模态视图（Modal Views，iOS独有），确认弹框（Confirmation Dialogs，MD独有），全屏弹框（Full-screen Dialogs，MD独有），上拉菜单（Action Sheets，iOS独有），简易弹框（Simple Dialogs，iOS独有），活动视图（Activit...

2017/05/31

「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard

教程

「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard

@龙爪槐守望者：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。Soft Keyboard（Virtual Keyboard/软键盘/虚拟键盘）并不是真实的物理键盘（Physical Keyboard），而是在屏幕内拥有键盘样式和功能的控件，它比真正的键盘尺寸更小，而且没有手感很难盲操作。在触屏当道的移动端Soft Keyboard也可以简称为Keyboard。

2017/05/11

「这个控件叫什么」系列之Toast（吐司提示）的曾经、现在与未来

UI

「这个控件叫什么」系列之Toast（吐司提示）的曾经、现在与未来

@龙爪槐守望者：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。往期回顾：《「这个控件叫什么」系列之小红点+索引导航+分段控件》《「这个控件叫什么」系列之加载占位图+页面指示器》《「这个控件叫什么」系列之步进器+SWITCH》Toast概念的由来除了Android规范，Windows的规范中也有Toast，但定义不一样。Toast在Android中的定义就是大家所熟...

2017/04/19

「这个控件叫什么」系列之步进器+Switch

UI

「这个控件叫什么」系列之步进器+Switch

@龙爪槐守望者：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。往期回顾：《「这个控件叫什么」系列之小红点+索引导航+分段控件》《「这个控件叫什么」系列之加载占位图+页面指示器》这个控件叫：Stepper/步进器Stepper（步进器）由一个增加按钮、一个减少按钮和一个由按钮控制的数值组成。每次点击增加按钮（或减少按钮）数字增长（或减少）的数量是恒定的。

2017/04/10

「这个控件叫什么」系列之小红点+索引导航+分段控件

UI

「这个控件叫什么」系列之小红点+索引导航+分段控件

@龙爪槐守望者：鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。Badge/徽标/小红点「小红点」是这个控件在国内最通俗的称呼，正式的名称为「Badge」（徽标），Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。△ 形态各异的Badge（徽标）如何使用无数字和有数字Badge使用场景Badge可以分为无数字和有数字两类...

2017/03/23

没有更多文章了

大家都在看

海报设计

文章 320

PS教程

文章 782

视觉设计

文章 190

优秀网页设计

文章 585

字体下载

文章 136

ICON

文章 204

职场规划

文章 412

优设大课堂

文章 138

psd下载

文章 134

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：uisdc411

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营