行业关键字
UI设计UI理论和资料 → 正文
互联网表单设计 第五章 输入框(5)
作者: yummy 译 来源: 视觉同盟 时间: 2009年6月16日

视角:Micah Alpern
Social Search主管,Yahoo!
表单结构设计

出色设计源自重新运用简单模式。提供视觉设计师的格子能够成为出色设计的核心元素。比如,各种水平、垂直线组成的格子帮助设计师在页面上放置新元素,使它们看起来是一个整体。类似的,交互设计师开始使用一致交互方式简化设计决定,提供连贯性 。那么,表单背后隐藏着何种结构?

输入是表单核心
输入框是UI原子组成部分,表单设计目的是为了收集用户反馈。

以下介绍形式不同、但结构相同的输入框。

 


http://www.flickr.com/photos/rosenfeldmedia/2406455722

输入框有多种形状,但基本模式一样:名称,数据和动作。这种基本模式反复出现在表单多种输入和多种级别(比如输入,选项,对话框或者页面)。

 


http://www.flickr.com/photos/rosenfeldmedia/2405624141

这种结构有助于通过风格(字体、大小、颜色和图标)和布局(对齐方式,页边留白和填充)表达视觉设计。

输入组
输入组指两个或两个以上的有关联的输入框。有3种最常见输入组类型:复合输入框,关联输入框和父子输入框。输入框类型很重要,适应不同类型问题,以不同方式处理出错或者相关问题。

以下是三种不同类型输入组:


http://www.flickr.com/photos/rosenfeldmedia/2405624141

结构设计
案例表单取自重新设计eBay销售过程开发得到的模式语言。通过思考结构设计,我们强迫自己对每个新UI元素考虑以下问题:

这是什么?
如何处理其他同类型东西?
和其他元素有什么关系?
合并相同类型元素,或扩展该元素和其他元素的关系,能否简化设计?

通过持续反复询问这些问题,我们创造的连贯设计隐藏在结构模式中,界面简单明了。

(责任编辑: echo

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2026 视觉同盟 visionUnion.com)
Copyright © 2004-2026 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版