译者:tiah
门牌号:http://www.zcool.com.cn/article/ZMzgyMjI0.html
介面明晰最重要
介面明晰是UI结构设计的第二步,要想让采用者讨厌你结构设计的UI,具体来说要让采用者普遍认可它、晓得好不好采用它。让采用者在采用时市场预期会出现甚么,并方便快捷地与它可视化。
全力以赴保护采用者的目光
在写作的这时候,常常会有表达方式零散他们的目光。因而,在结构设计介面的这时候,能招揽采用者的目光很关键性,一千万千万别将介面的周遭结构设计得支离破碎。
▲ 恰当示范点|整洁简约的介面能让采用者更为沉浸于在写作的当今世界里。
让介面处在采用者的支配当中
人类文明常常对能支配他们和周遭的自然环境深感难受,不考量采用者体会的结构设计常常会让此种舒适度消亡。确保介面处在采用者的支配当中,让采用者他们体会主导权。
▲ 错误示范点|采用者不晓得如何查看很多的卡片,除了查看第一张卡片的详情,其他的卡片脱离了采用者的支配。
直接操作的感觉最棒
当能直接操作物体时,采用者的感觉是最棒的。在结构设计介面时,他们增加的图标常常并不是必需的,比如他们过多的采用按钮、选项等等其他繁琐的东西仅仅是为了填满介面,这些都是画蛇添足。
▲ 恰当示范点|图标的作用是以图形化的视觉形象给采用者快速引导,如果只是装饰,就不如千万别。
每个屏幕只提供一个操作主题
他们结构设计的每一个画面都应该有单一的主题,这样不仅能让采用者采用到它真正的价值,也使得上手容易,采用起来也更方便快捷。如果一个屏幕支持两个或两个以上的主题,立马会让整个介面看起来混乱不堪。
▲ 错误示范点|这个介面是让采用者输入登录,却将注册放在与登录同等重要的位置,干扰采用者操作,会导致操作错误。比较好的做法是,将注册放在右下或登录按钮下方。
介面过渡自然
介面的可视化都是关联的,所以要认真地考量到下一步的可视化是怎样的,并且通过结构设计将其实现。当采用者已经完成该做的步骤,千万别让他们不知所措,给他们自然而然继续下去的方法,以达成目的。
▲ 恰当示范点|介面的可视化非常明晰,点击向下展开,再次点击向上收起。
表里如一
如果它看上去像个按钮,那么它就应该具备按钮的功能。结构设计师不应该在基本的可视化问题上耍小聪明,要在更高层次的问题上发挥创造力。
▲ 错误示范点|介面非常漂亮,但登录被弱化,并且表现形式雷同输入的提示文字,采用者不易察觉。
区别对待一致性
如果屏幕元素各自的功能不同,那么它们的外观也理应不同。反之,如果功能相同或相近,那么它们看起来就应该是一样的。
▲ 恰当示范点|元素排版整齐且统一,功能明晰明了。
强烈的视觉层次感
强烈的视觉层次感是通过介面上视觉元素提供的明晰浏览顺序来实现的,也就是说,采用者每次都能按照同一个顺序浏览同一些元素。弱化的视觉层次没有给采用者提供如何浏览的线索,采用者会深感困惑和混乱。当一切都是粗体时,就没有主次之分了。
▲ 恰当示范点|介面以采用者的写作习惯将层次拉开,从左到右,从上到下,元素之间互不干扰。
恰当的组织UI能降低认知难度
正如John Maeda在他的书中所说,对屏幕元素的恰当组织能使页面显得简约,这能帮助采用者更容易并且更快地理解你的介面。
▲ 恰当示范点|将零散的元素进行组合,并以生活中常见的物品展示,采用者更易理解。
颜色不是决定性因素
物体的颜色会随着光线的变化而变化,颜色是一个变化的性质,不应该在介面上起决定性作用。它能用于提醒,但是不应该是唯一的区分元素。
▲ 恰当示范点|通过鲜艳的色彩来提醒需要采用者关注的内容,但是tiah不太认同颜色不能作为唯一的区分的观点,现在有很多天气、记事、时钟类APP极简的结构设计,常常采用色彩进行区分也非常赞。
渐进展示
在每个屏幕上只显示必要的内容,如果采用者在做选择,那么给他们显示足够的信息,然后在各自的页面上展示详情,避免在某个介面过度展示所有细节。
▲ 恰当示范点|采用者只单纯地想播放音乐,所以列表页只需要当前播放状态、演唱者、专辑名和歌曲名,无需太多的信息。
零状态的介面
第一次访问介面是最重要的,但经常被结构设计者忽视。为了帮助采用者适应,应该提供启动的方向和引导。
▲ 恰当示范点|零状态结果本身对采用者体验极其不好,更需要情感化或引导性的结构设计来降低采用者焦躁的情绪。
杰出的结构设计是无形的
杰出的结构设计是没有痕迹的,如果结构设计是成功的,那么采用者能只关注他们的目的,而不是介面,不依赖于介面。
▲ 恰当示范点|要想做到这点非常不易,tiah认为Yo做到了。
介面是被人采用的
只有采用者采用你结构设计的介面时,才是成功的。如果一件衣服很漂亮,但是穿起来不难受,那么结构设计是失败的。
▲ 错误示范点|视觉效果非常好,但是采用者体验上非常糟糕,当前状态与主介面关联太弱,弧形轨迹写作太累。
以上举例图片来自dribbble,如对译者冒犯处敬请谅解
Joshua Porter观点原文:http://bokardo.com/principles-of-user-interface-design/
——————————————————
要学PS?赶紧关注下方帐号!瞬间提升!
越努力,越幸运。
这里是庞门正道。