[笔记] UI 设计入门:画出有程式逻辑的设计稿 – 8 – Input 输入格

章节连结

近期于前端开发时常会被 PM 要求先提个 Mockup 来看看呈现效果之类的。有鉴于公司目前的人力配置一直没有规划到 UI / UX 这个领域,那就自己下来碰碰看吧。这篇笔记的是六角学院的 UI 设计入门:画出有程式逻辑的设计稿 中关于“Input”输入格。
layout design


课程相关资讯

[连结]:https://courses.hexschool.com/courses/enrolled/724307

本篇范围:Chapter 4 ( 从原子设计学习接口的常见元件 ) ,一共有 13 篇

请注意:本系列文章为个人对应课程的消化吸收后,所整理出来的内容。换言之,并不一定会包含全部的课程内容,也有可能会添加其他资源来说明。


笔记

1. Input 输入格分为 3 类样式:填满、外框和底线
2. 没有特别的使用比重,尽量指使用其中一种即可,以免混淆
3. 标签 ( Label )和输入格 ( Input ) 是搭配使用的,另外可以加上提示文字 ( placeholder )
4. 输入格的状态:可用、停用、聚焦(当使用者输入时)、启用(输入完成)


系列文章

  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 9 – 单选按钮和复选框
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 7 – 物件状态
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 6 – 按钮
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 5
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 4
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 33 – 切图命名与格式
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 32 – 设计规范
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 31 – 深色模式
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 30 – 页面
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 3
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 29 – 改变页面状态来提升使用者体验
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 28 – 响应式排版
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 27 – 高转换的登陆页
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 26 – 模板
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 25 – 运用常见的接口版型排出好设计
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 24 – 页尾
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 23 – 页首
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 22 – C.R.A.P. 四个帮助你优化接口的设计准则
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 21 – Form 表单
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 20 – DataTable 资料表
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 2
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 19 – Alert 警告讯息
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 18 – Modal 互动视窗
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 17 – Card 卡片
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 16 – Tooltip 提示工具
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 15 – 折叠面板
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 14 – 导览元件
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 13 – 通用设计
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 12 – 色彩
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 11 – 文字
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 10 – 连结和图示
  • [笔记] UI 设计入门:画出有程式逻辑的设计稿 – 1
  • 按赞加入粉丝团

    延伸阅读