美文网首页视觉设计我说设计交互设计
从用户界面PATTERN网站学习视觉交互

从用户界面PATTERN网站学习视觉交互

作者: 钱小小春 | 来源:发表于2015-07-15 17:31 被阅读519次

想要写一些和视觉相关的文章,卡了几个礼拜了。难点在于:视觉是比较感性的,从感受上谈,不知从何说起;从平面构成的各个要素去谈,那是别人一本书的工作量。但在准备的过程中,我发现通过用户界面PATTERN类网站学习视觉、寻找视觉参考是非常有效的方式。

案例完整、多平台、有运营页面的reeoo

平台:web、ipad、iphone, 

可按颜色/按标签查看

特点:

点击每一个案例,都相对比较完整。

Topic部分有一些手机运营页面可以参考

reeoo

扁平、小清新、按功能模块分类、web端参考的CALLTOIDEA

平台:web

按功能模块分类,扁平、小清新风格

Calltoidea

可多选条件、多平台参考的zurb-patterntap

平台/设备:Desktop、Mobile、Tablet、Web

优点:可以根据风格(视觉)标签、类型(模块)标签、颜色和设备多选。每类的标签也可以多选。

缺点:非完整案例,有些只有一个局部;图片显示极慢,最好用代理。

zurb-patterntap

可以学习到各种动态效果的capptivate

capptivate

建立自己的可多选PATTERN库

“可多选”的理想状态是:我可以选择“橙色”(颜色分类)、“登录模块”(功能模块分类),可以找到自己曾经收藏过的较好的案例。还可以增加更多的分类:IOS7\IOS8;版本一、版本二;视需要而定。

曾经比较常用花瓣的CHROME浏览器插件,但在分类问题上,满足不了上述需求。

于是我想到了印象笔记。我是印象笔记的重度用户(但又不爱整理),以前没有主动做标签的习惯,但已经保存的1326条笔记中,已经自动产生了248个标签。于是首先我果断删除了所有的标签。

删除印象笔记原有标签

以后看到好的参考,就存到印象笔记中,加上自己会去查的标签,比如“橙色”(颜色)、“登录”(对功能模块的描述)、版本等等。以后需要具体参考的时候,只需在印象笔记中搜索标签就行啦。

相关文章

  • 从用户界面PATTERN网站学习视觉交互

    想要写一些和视觉相关的文章,卡了几个礼拜了。难点在于:视觉是比较感性的,从感受上谈,不知从何说起;从平面构成的各个...

  • 产品设计要素

    需求→交互→界面(视觉)→开发→测试→发布→用户反馈→迭代 草图·主界面·交互界面·交互说明·前端开发·后端接口 ...

  • app视觉设计艺术

    一、移动互联网产品在变化 UI=用户界面 用户的界面-从属关系-视觉传达与美化界面设计 用户与界面-交互关系-从视...

  • UI介绍

    UI:用户界面;指对软件的人机交互/操作逻辑/界面美观的整体设计。 包括:交互设计/用户研究/界面设计。 视觉包括...

  • 你不知道的UI设计风格的秘密(一)

    用户界面的全称是User interface 是指界面的视觉设计 但是实际上还包括了用户与界面之间的交互关系 总的...

  • 平静技术原则指导只能可穿戴设备

    SPL: 现有许多研究通过视觉设计、隐式交互设计、微交互设计、多维用户界面设计等原则出发,提出了微交互和多维界面设...

  • 读书笔记——100种用户界面

    用户界面 理解:用户界面设计更多基于交互思维,遵循8/2原则(即只设计最好的20%的功能),精简功能,选择具有视觉...

  • APP UI设计干货,如何设计打造出实用有效的用户界面

    UI界面一直都是指计算机与用户发生交互和情感的场景。而且也是人机交互当中最直观的视觉语言。 设计一个有效的用户界面...

  • 提升界面秩序感,让你的ui设计根据规范性

    相对于视觉传达设计而言,交互界面更加注重用户与界面的互动,用户对界面的理解将直接关系到用户能否顺利操作并达到自己的...

  • 射鸡师

    UI设计师发展路线 从最开始的GUI界面视觉,到 UI 交互设计,UE用户研究, PM产品经理,这些岗位都有些交集...

网友评论

本文标题:从用户界面PATTERN网站学习视觉交互

本文链接:https://www.haomeiwen.com/subject/ykkyqttx.html