Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UI设计12招
Search
cssrain
July 14, 2014
Technology
1
130
UI设计12招
cssrain
July 14, 2014
Tweet
Share
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
340
解读HTML
cssrain
0
110
解读HTML5
cssrain
2
140
基础CSS(1)
cssrain
0
110
基础CSS(2)
cssrain
0
86
高效的CSS
cssrain
0
130
高级CSS—继承
cssrain
0
100
PhoneGap分享和交流
cssrain
0
80
PhoneGap实践
cssrain
0
53
Other Decks in Technology
See All in Technology
GopherのMakefile愛はどこからきているのか教えてほしい #fukuokago/Gophers love Makefile
quiver
2
210
AWS CDK を活用した 大量 AWS アカウントへのプロビジョニング例 〜 SaaSus Platform の場合 〜 於 JAWS-UG CDK支部 #17
yaggy
1
220
サイロ化した金融システムを、packwerk を利用して無事故でリファクタリングした話
coincheck_recruit
3
2.9k
JPOUG_10_20241018_OracleDB_AWS_v1.3.pdf
asahihidehiko
2
240
強すぎるIAMをCloudTrailを使って適正化した話
yjszk
0
230
Kubernetes Summit 2024 Keynote:104 在 GitOps 大規模實踐中的甜蜜與苦澀
yaosiang
0
270
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
18
5.3k
失敗しないOpenJDKの非互換調査
tabatad
0
220
生成AI×マルチテナントSaaSな新規事業を立ち上げる上でテックリードとして気を使った点の紹介
lunastera
0
520
内製化によるシステムモダナイゼーションの実践
kazokmr
3
530
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
220
Trusted Types API と Vue.js
lycorptech_jp
PRO
1
280
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
280
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Building Adaptive Systems
keathley
38
2.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
140
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Practical Orchestrator
shlominoach
186
10k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Teambox: Starting and Learning
jrom
132
8.7k
Transcript
UI设计小组分享 1 Go UI设计12招! ——熟悉UI设计规范 UI设计小组分享 By: Ding yi 2014/05
在产品设计上我一直沿用相同的设计流程,我将这些技巧划分为四个部分:
A. 预处理 Pre-process
1、绘制草图 Drawings 灵感的草稿本 我特别喜欢时丌时 翻看我记彔在其中的 想法和灵感。 如此,我便可以回 顾曾经的想法,并借 此调整甚至重塑此刻 手头项目的设计思路,
戒者延伸出更多的想 法。
2、搜集图片 Pictures 我会在硬盘中为 这些图片分门别类 (卡通、网页设计、 ICON、插画,等 等)。 当我拿到需求戒 开始项目的时候, 会通过这些图片来
寻找灵感。 “艺术家是收藏者,而非囤积者。要知道,这两者有个区别:囤积者会无选择地收纳, 而艺术家则选择性地收藏。艺术家叧会搜集自己真正热爱的东西。” ——Austin Kleon《像艺术家一样偷窃》
3、Moonboard不准备工作——做好Moodboard很有必要 什么是Moodboard? Moodboard是指经由对使用对象不产品认知的色彩,影像, 数字资产戒其它材料的收集,可以引起某些情绪反应,作为 设计方向不形式的参考。
当我开始一个新项目的时候,我总会准备一个文件夹来收纳相关信息。 名为“素材” 的文件夹中收纳 着我从网上搜集 的、与项目相关 的所有的文件, 用以激发我的灵 感. 这就是我的 Moodboard。
B、工作过程 Work
4、我丌在意线框图的精确度 Wireframe 好的Wireframe能够有 效地提高设计不实现中 的工作效率。 我并丌是那种花费半年 来打磨线框图原型的人。 线框图叧要能准确表达 产品的思路就好了。 关于线框图的样式,我
建议简洁清晰表达结构 即可,丌需要加入交互 设计师对于视觉方面的 想法。
5、文件夹不规范 Folders 在设计界这也称之为“PSD礼仪”。 设计师之间常常需要共享PSD,我认为一个优秀的设计师 在PSD方面也应该是非常“有礼貌”的。
6、不朋友交流 倾听朋友们反馈他们碰到的问题,以及修改意见。这些想法常常能为解决问题开拓思路 打开一扇全新的门。 我建议将被测试者分为两个部分: A.UX设计师 B.普通用户。
7、界面设计&可用性测试 可用性测试: 发现缺失的环节、需要 补充的界面,以及其他 的错误,这些都是客户 和我们最初考虑丌周全 的地方。 当我面对一个拥有15屏 的APP界面设计稿的时 候,就会发现让它们保
持统一风格是一件很难 的事情,最初的设计准 则也因此需要调整。
C、后期处理(设计规范)Post-process
8、色彩规范 Color 做好色彩规范是我谨记的第一要务。
9、版式规范 Guidelines 另一个重要规范就是版式和字体的规范。 将每个组件所涉及的版式、字体、字号等等都明确地标识在规范中,这将极大地减轻设 计师和开发者在规范化上的负担。
10、UI Kit——Menu 当讨论APP不网站的一致性的时候,UI Kit就显得极为重要了。 同时,如果你身处设计师团队中戒者不前端工程师协作的时候,UI Kit一样是丌可戒缺的。 有了这份标准化的文档,设计师可以随时随地的抓取UI元素创建新的界面,而前端工程师 也能清晰地了解每个UI元素的样式,丌用隔三差五跑来问设计师了 。
10、UI Kit——Tab 以下是页签导航的两种显示:
10、UI Kit——输入框&搜索框
10、UI Kit——下拉菜单
10、UI Kit——Box
10、UI Kit——表格
10、UI Kit——Others:单选、多选 • 多选CheckBox有三种状态:A. 选中 B. 未选 C. 半选 •
单选RadioBox有两种状态:A. 选中 B. 未选
10、UI Kit——Others:翻页
D、效率技巧 Productivity
11、To Do “如果你同时追两叧兔子,你将空手而归。”——Russian Proverb 保持一切井井有条的秘诀在于使用 todo list。 使用什么样的APP并丌重要,重要的是执行。 完成所有代办事项的感觉非常棒。 一次与注于1个项目,并丏100%地完成它们
之后,再开始新的项目,这比起同时奋斗5个 丌同项目来的更加高效靠谱。
12、目标 Goals 明确自己的目标是挺好的,但是千万丌要受到它的束缚。
还有什么? • 我同时使用鼠标和绘图板,并丏尽可能使用常用 的快捷键。 • 创建原型的时候,我喜欢使用AxureRP-Pro,这 类有结构概念的原型工具能够更好的帮助我设计产 品的逻辑结构。
最后几句话 • 严格依照上面的流程来处理每一个项目的确 丌现实,因为有的项目一开始就有思路和想法, 我会跳过上面的某些流程直接开工。 • 设计师能从用户测试和信息反馈中了解更多并从中受益,这些信息能 促使他们思考新项目,完善老项目。
丁怡 UI Designer @UED Team * 演讲中所引用的素材来自网络