用时三个月制作的新个人网站，希望大家喜欢
2009-05-31 19:29:01 来自: iamlin(穷追猛赶)
请访问www.iamlin.cn
谢谢大家支持，意见和问题请联系我：）
Iamlin.cn Drag Me Version is designed to showcase my portfolio and explore drag interactions in website.
Iamlin.cn Drag Me Version is an experimental interaction website that uses natural drag movement to activate operatio. Actually you won’t find any buttons or clickable text here, instead you get access to the contents by dragging bars. Now Let’s start our journey!
www.iamlin.cn
Iamlin.cn Drag Me Version的台前幕后
前沿：设计中的Key Gesture
我们有门课Tangible Interaction，Subject leader是Philips Asia的设计总监Paul。他的一个重要观点是，在设计时抓住用户最简单直接的key gesture和key image，可以帮助我们迅速找到产品核心。比如，ATM机的key gesture是插卡，输密码和取钱，key image是人站在柜台前与ATM交互，而通过分析理解key gesture和key image能让设计师有效解决核心问题，设计理性易用的产品。在上完这堂课后，我对key gesture这个概念印象深刻。
想法形成：基于电脑操作研究Drag Gesture
一次，我浏览网页时，发现很多交互都需要鼠标拖拉（drag）进行浏览或操作。突然间，我对这一个单独的drag gesture发生了浓厚的兴趣。我想，在产品交互设计中，是否可以有一种使用体验，能够完全把这种简单的drag movement 作为key gesture，从而让产品更加简单地表现和使用。于是，我反向思维，思考拖拉动作都可以应用在什么操作里。基于这种探索性的设计思想，Iamlin.cn Drag Me Version的概念就逐渐形成了。
设计实践：将理念付诸于行动，从而更加深刻认知理念
起初计划的时候，设计Iamlin.cn Drag Me Version是更像去追寻一种“形式主义”，一切内容都在试图去追寻一种形式。简而言之，就是想探索drag gesture在人机交互中到底能做多少事。那几天，我就一直在思考这个问题，如何去掌握简单易用的用户体验和有趣特别的交互方式的那个“度”。当我和工程师xiao kun讨论这个问题后，干脆就决定以drag gesture为key gesture，更直接地做一个实验性的有启迪性的交互概念网站。
整个网站设计和开发过程历经3个月，我则在磕磕绊绊地探索drag在交互设计中的各种应用，其中有一些概念在矛盾的思考过程中被舍弃了。比如，我起初想阅读文字内容不自动换行，也就是一篇1000字的文章要拉到至少10000像素的宽度才能容下，用户需要drag bar到很右侧才能看完。其实这个问题可以让我们更好地去思考多少像素的宽度是符合用户的最佳习惯。但是考虑到网站的整体布局，这个概念还是被暂时放弃了，但是我想接下来若有机会我会以更好的方式实现这个想法。
而又有一些drag体验被有趣地塑造出来。譬如，在设计虚拟拖拉键盘的时候，我们试图用简单的drag 操作去开发有趣却繁琐的用户体验，从而激发使用者对simplicity and complexity的思考。对于作品展示部分，我们发现其实象美术馆那样横向观赏作品是更符合用户习惯和需求的，所以drag操作在这里无疑创造了相比较scroll down来说更好的信息获取体验。还有值得一提的就是链接和导航的drag bar，相比较点击链接/选项，拖拉则体现出更好的潜在方向性等。
最后，我想到，若是drag gesture脱离了日用电脑，还会有更多拓展性的drag操作的想法，可以更加融入人们的生活。比如，司机开车的方向盘，可以是一个drag bar去控制左右方向；建筑物的广告灯牌，能够感知人的横向移动，而顺序性打开，没人经过时可以关上节省能源等。假以时日，通过简化科技，设计师可以创造出更易用的产品。
总之，Iamlin.cn Drag Me Version的设计过程，实际是通过实践，理解体会design simplicity或者说探索创造更好用户体验的过程。
总结：需要通过实践认知理论
人们都说设计是减法，less is more的设计理念已经深入人心，John Meada的The laws of simplicity也是设计界公认的法则。
其实，Iamlin.cn Drag Me Version则是从另一个极端的角度来证明Simplicity在设计领域中的重要性。举个简单的例子，这个网站不允许mouseover，left and right click等效果，只有drag这个触发效果，看似是更简单了；但是，这个简单随手的拉拽动作在Virtual Drag Keyboard（拖拉键盘）输入时又是那样的繁琐和令人恼怒。
若是从哲学角度解释，事物处在一定背景下就变得很繁琐；另外说，“物极必反”，简单到极致就变得复杂起来。这两个观点在Iamlin.cn Drag Me Version得到了很好的体现，也使我更加理解和体会其实要做到”design simplicity”并非口头上说的那么简单，而是需要经过反复实践和不断探索钻研。其实现在很多优秀的产品都是simplicity的代名词，比如那个小小的“苹果夹子”iPod Shuffle，你没法在上面编辑歌曲，或者其他事情，能做的就是随时享受音乐，看似简约的设计却不简单。想必apple的设计人员一定也是经过了很多尝试和思考之后才雕琢出如此附有“简单”精髓的产品吧。
后记：感谢和理想
在这个项目中，合作工程师xiaokun不仅很好地完成了开发工作，还对设计部分提出了自己的见解，从而影响整个网站的发展走向。我也从与他的合作中学到很多。此外，我也特意邀请自由音乐人nick同学为网站创作了概念性的音乐，更好地表达主题。当然还要感谢一些在设计和测试过程中，给予我鼓励和支持的人。
最后，网站虽然阶段性完成了，但是我相信它不是一个结束，而是一个起点。我们对于“简单易用”设计的探索才刚刚开始，真心希望此后的一生中，能和大家一起努力，通过努力实践为人类创造美好有意义的设计。
P.S 中文在这里！www.iamlin.cn/multi
> 我来回应
这个小组的Lover也喜欢去 · · · · · ·
- 最美的封面 (20963)
- 独立设计师 (21759)
- Design Live Love (2607)
- 国际设计杂志交流馆 (11874)
- 插画小组 (9850)
- 看-插图·画-插画 (3311)
最新话题:
请问内疚是什么颜色的？ (pasla)
大家都来帮帮忙吧 ~· (蛋蛋agio)
呵呵，请问什么颜色象征着公平正义呢？ (当下的爱)
《寄居计划》招募志愿者 (文皆)
這些是我用手機繪畫的彩色小畫，大家多多指教啊~！！ (《御宅男》)
【精心收集】一套完整、系统的基础调图教程（每课实例... (lnsylhhl)
多种颜色总有一个是你喜欢的 原单女帽衫39元一件 (第1拍服饰)