2008.12 19

UI设计是一个不断改进的过程

标签: , ,
资源共享

应该把大道理+广告词摆在前面，"没有最好，只有更好"，应该是一个耐心体验、细心改进的过程。特别是对于我这种懒人，更应该这样做。比如下午修改了评论框，对于已经有过一次评论的用户，隐藏掉输入框，不需要再一次输入资料。这就是一个改进的过程，也是一个体现互动的过程。

大多数情况下，我们按照当时的时间限制和想法来设计。比如在设计中国风这个主题的时候，我认为下面的显示方法是自己喜欢的，并且也能让别人喜欢的：

original.gif

直到别人问我为什么不隐藏回头客的资料，显示欢迎信息，这时，我才把它改过来。不是没有看过相应的技术是怎么实现的，而是，自己很懒，感觉现在还过得去，就凑合着用吧。而事情上，如果想要把产品的UI搞好，容不下我们犯懒。这是一个需要不断改进的过程，就像在前面摆的大道理，"没有最好，只有更好"。比如现在这个，会有更好的体验：

improved.gif

回头客来访可以显示欢迎信息，不用重复输入；并且，如果资料有误，点击"修改资料"，就会变成原来的样式，让用户修改，并发布。这就是互动的体验。或许并不会节省很多用户很多时间，但这样的方式，或许是更友好的，因为互动掺夹在里面，会激发用户进一步参与。UI设计，用户交互设计，设计者要做的就是让用户被激发，参与互动。

简单的文章，不过，我想，让自己在设计的时候更有耐心，更细心，并不是简单的过程。而更好的UI需要这个。所以，如果你在做偷懒，马上醒过来吧，用心去做与偷懒在做，大家会看出区别的；并且，用心去做，不断改进，自己也会感觉踏实。再推荐一下几篇文章，如果你希望改进你的UI，这些会对你有所帮助：

  1. UI设计理论+技术：10个改善UI设计的技术(1) /10个改善UI设计的技术(2)
  2. 简单的隐藏资料：更简单地隐藏访客输入框
  3. 评论框隐藏方法：提高WordPress 访客评论时的用户体验
  4. jQuery隐藏评论：隐藏 WordPress 访客的资料框

图片来自flickr相册: 1 2

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » 资源共享 »

38

  1. 2008.12.19 7:42 pm
    leehow(visit): [回复]

    是吗？

  2. 2008.12.19 7:43 pm
    leehow(visit): [回复]

    你不懒吧，大家都看到了你的用心啊，人气就是证据。

  3. 2008.12.19 7:43 pm
    Shawn不是(visit): [回复]

    是啊！沙发没了！

  4. 2008.12.19 7:49 pm
    ZH CEXO(visit): [回复]

    这样改好多了~

  5. 2008.12.19 8:16 pm
    leehow(visit): [回复]

    好好考，孩子。

  6. 2008.12.19 8:24 pm
    晓镜(visit): [回复]

    对一件事情认真容易 难的是一直对一件事情认真。。

    关于设计和CSS 真的是 看的出来你的精益求精的态度啊。。

  7. 2008.12.19 8:25 pm
    herb(visit): [回复]

    个人觉得这个改动没啥意义….因为没有这种改法既没有节约空间，也没有节约我们的时间。
    还有，大概，我有强迫症吧，我很希望有一个能让我重新看到欢迎辞的按钮。。

  8. 2008.12.19 9:46 pm
    MY-Hou不是(visit): [回复]

    为我等懒人，sofish要努力啊

  9. 2008.12.19 9:48 pm
    Jinwen(visit): [回复]

    是的啊，主题总有改不完的事情

  10. 2008.12.19 9:53 pm
    L(visit): [回复]

    本着“没有最好只有更好”的道理、“鸡蛋里挑骨头”的态度，以及……

    UI设计是不是应该注重逻辑？你的评论，信息是在左边，内容是在右边；而在输入框里却是完全相反。而且，既然是内容输入框在左边是吧，为什么 内容输入框的 tab 顺序又在个人信息之后？

  11. 2008.12.19 10:01 pm
    L(visit): [回复]

    本着“没有最好只有更好”的道理、“鸡蛋里挑骨头”的态度，以及“没有调查就没有发言权”的原则……

    我清空 cookie 之后又来测试了一下。其实可以判断下如果 cookie 不存在的话，tab顺序为现在的情况；存在的话,顺序为:comment<submit<author<email<url

  12. 2008.12.19 10:38 pm
    sofish(visit): [回复]

    @leehow: 嘿嘿，我懒得读书+设计+吃+难做的东西…

    @Shawn不是: 啊? Trackback+Pingback你的力度≈我感谢你的力度。

    @ZH CEXO: 嘿嘿，很多人都改了，我不能落后嘛。

    @晓镜: OH，thanks, 懒人有动静会有人表扬是多幸福的事。

    @MY-Hou不是: 像myhou小朋友一样努力。

    @herb: 我看中激发互动这一点。而关于那个change后有个close，返回欢迎界面，事实上是有的，我自己删了，，因为为了解决背景的问题，comment form在IE需要用到Fix和固定高度，所以，我只能舍弃掉，折衷选择。我没办法啊，真囧, 555…

    @Jinwen: 如果有你这么勤力就好了，你的主题现在很好玩。

    @L: OH? 还至于显示方法，事实上你可以对比一下就知道了。这个并不是用理论可以说明的。这方面我自己作过对比，或许你喜欢写在前面，而对我来说，我更喜欢这样，这个与上面的信息并没有多大冲突，并且，可以肯定的是，这并不会让人反感，换过来并没有这个漂亮，大家都是爱漂亮的人。当然，总会有不同的看法。

    至于tab顺序，得谢谢你的提醒，虽然我一直没有用tab的习惯，不过，还是有挺多人用的，这个非常感谢你提醒，我应该去改一下label id的顺序…

  13. 2008.12.19 10:49 pm
    L吃着(visit): [回复]

    呃

  14. 2008.12.19 10:58 pm
    David Lau(visit): [回复]

    做得真细致啊！

  15. 2008.12.19 11:06 pm
    老所(visit): [回复]

    真正的懒人前来报道！

  16. 2008.12.19 11:12 pm
    老所(visit): [回复]

    不如对于老客户，每次那里随机显示一个美女图片吧，你说呢？

  17. 2008.12.19 11:32 pm
    leehow(visit): [回复]

    @老所:回复越多，美女的衣服越少。

  18. 2008.12.19 11:33 pm
    leehow(visit): [回复]

    @sofish:好吧，你最懒。

  19. 2008.12.19 11:34 pm
    老所(visit): [回复]

    @leehow: 我同意，同时还有一个更好的建议，美女照片都是leehow

  20. 2008.12.19 11:57 pm
    Yacca(visit): [回复]

    我都已经可以想象日后不用再为这种效果去找代码了,哈哈哈哈哈哈哈…你肯定已经考虑进去了 不是么!?^^

  21. 2008.12.20 12:04 am
    火星人(visit): [回复]

    就是一个慢慢改进的过程。

  22. 2008.12.20 7:18 am
    L对着老所(visit): [回复]

    @老所:忒是个淫才了

  23. 2008.12.20 8:28 am
    Poshi(visit): [回复]

    就是说，一个主题是改出来的，哈哈….

  24. 2008.12.20 8:50 am
    辐射鱼(visit): [回复]

    专心考试，还上来水……

  25. 2008.12.20 9:41 am
    醉倚西风(visit): [回复]

    这个评论网址框自动加上http://怎么实现啊

  26. 2008.12.20 9:41 am
    醉倚西风(visit): [回复]

    这个效果真好啊 帮我实现一下吧 好吗

  27. 2008.12.20 10:30 am
    ZhouGe(visit): [回复]

    向sofish学习~

  28. 2008.12.20 12:06 pm
    sofish(visit): [回复]

    @David Lau: 嘿嘿，就像你说，主题全面支持…blabla…

    @老所: 我确实老所昨晚是在梦游。

    @leehow: 提前吓跑，别怕，孩子，老所可以当奶爸，不会当其他角色的。

    @Yacca: 啊? 你太高估我了，要看我折腾的成果。

    @火星人: 是。啊。是。啊。

    @L对着老所: +这个人才。

    @Poshi: 嗯，你Poshi一样有耐心，修改啊修改。

    @辐射鱼: …一言难尽啊，所以，不说最好。

    @醉倚西风: 自动的，WP会自动的。这个方式，孩子，看看后面shawn的教程，很容易的，慢慢折腾，这样比较好，我时间比较少。

    @ZhouGe: 谢谢，哈哈。

  29. 2008.12.20 5:26 pm
    tension(visit): [回复]

    非常友好,让我有回复的冲动!!!

  30. 2008.12.20 5:29 pm
    人类进化(visit): [回复]

    我的天啊~~
    这样也行~~
    介个地方有注册么？？
    给个传送门~~O(∩_∩)O
    不太喜欢随机的头像o(≧ω≦)0

  31. 2008.12.20 5:31 pm
    人类进化(visit): [回复]

    头像………………0(o_o)0

  32. 2008.12.22 3:21 am
    Zoll(visit): [回复]

    这里是真正的中国风啊，气氛太浓烈了 呵呵~
    不知道Sofish能否指导一下Tab顺序的问题，
    我的评论框和这里的摆设差不多，但Tab键控是反过来的，最后才跳到内容框里来。。

  33. 2008.12.22 3:27 am
    sofish(visit): [回复]

    @Zoll: 在input中加个tabindex=”N”，N少则前，N多的排后面。

  34. 2008.12.24 9:21 am
    古侯子(visit): [回复]

    呵呵，学习了，我也想着自己做一个WP的主题呢，发现还是挺难的一件事情~~~

  35. 2008.12.27 5:42 pm
    林网博客(visit): [回复]

    美学，美感！！

  36. 2009.01.19 4:53 pm
    蔬菜(visit): [回复]

    帮我弄弄啊

  37. 2009.02.18 8:11 pm
    eddie(visit): [回复]

    的确不错。但是提个小建议，我觉得这个回复框的颜色，可以有改进的地方

  38. 2009.07.29 10:58 am
    小T(visit): [回复]

    很不错啦，来观看一下

Additional comments powered by BackType