HMI设计知识积累（框架）
其他/UI设计师/1年前/83浏览
版权
HMI设计知识积累（框架）
在HMI（人机界面）设计领域，设计师的角色远不止于灵感的挥洒与创意的展现，其核心价值更在于于在严谨而富有弹性的框架内，精心雕琢每一个交互细节。当职场新人从学术的象牙塔步入职业实践的广阔天地时，设计一款界面便成为了一项综合考量艺术美感、技术可行性与用户体验的复杂工程。
在此过程中，我们需深刻理解，美观仅是吸引用户目光的初步要素，而真正决定界面成功与否的，在于其能否在开发实践中顺利落地，以及能否为用户提供流畅、高效且愉悦的操作体验。
因此，在着手设计之前，框架师或设计师本人需依据交互设计师提供的原型或详尽的需求文档，构建一套科学合理的框架规范。
· 布局与栅格
一. 模块构成
在制作界面框架前，我们需要了解界面中的内容区块大致有哪些：
- 顶部 Header：状态栏 Status Bar
2. 内容 Content：
应用标题栏、内容区（一级菜单、二级菜单等内容）
3. 侧边（隐藏）：
卡片区 Widgets、拖动抓手
4. 底部 Footer：
导航栏 Dock Bar
二. 12栏栅格
为保证界面的规整合理性，布局期间可以使用12栏的栅格来进行初步搭建我们的内容区域，因为12栏使用场景满足较为复杂的系统结构
两侧边距参考尺寸为40px，间距为32px（根据4的倍数进行调整），保证内容区的元素可以对齐到8像素或4像素的网格上。
三. 变量
提前设定好界面大致要用到的变量数据，可以为后续的的界面布局设计，原型设计，乃至后续的UI视觉工作提供便利，这项工作不是一蹴而就的，需要设计师和框架师不断查漏补缺，根据后续需求调整和添加新的变量，以满足设计需求。
—— 待更新 ——
· 文字样式
· 颜色样式
· 控件说明（组件库规范）
1
Report
声明
1
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
You may like
相关收藏夹
Log in
1Log in and synchronize recommended records
1Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share