• 党的政治建设是根本性建设 2019-03-23
  • 麻辣财经:大咖热议全面绩效管理,“全”体现在哪儿? 2019-03-22
  • 汲取立志智慧 坚定理想信念 2019-03-21
  • 省旅游集团党委召开“讲忠诚、严纪律、立政德”专题警示教育部署动员大会 2019-03-21
  • “奶茶”婚事与社会心态 2019-03-19
  • CSL2017总决赛圆满落幕 Eclipse击败VG夺冠 2019-03-17
  • 日本是世袭国家与民主相距甚远。 2019-03-14
  • 第一应是赚钱。第三、四两条也赚钱的范围,而且其他很多原因。关踺是胆识;第二是用钱。节省是其中之一。 2019-03-14
  • 如何保持胃肠道健康年轻态 来听听这位消化科医生球迷的经验 2019-03-13
  • 冯翠玲:把党的声音传递给“国际大家庭” 2019-03-13
  • 【理上网来喜迎十九大】苏格:习近平总书记外交思想领航中国特色大国外交 2019-02-13
  • 钱江晚报:火锅店被吃垮,实际是信任破产 2019-02-13
  • 经济日报:微观基础改善 经济稳健可期 2019-02-06
  • 广州市荔湾区:基层党建引领老旧社区自治 2019-02-06
  • 比利时30大胜巴拿马 卢卡库梅开二度 强队总算没有都凉凉 2019-02-06
  • 交互方案该画到什么程度?来看全栈设计师的总结! - 优设网 - UISDC

    交互方案该画到什么程度?来看全栈设计师的总结!

    2018/05/02 7046评论区

    Z Yuhan:作为一个经历了「全栈 -> 非科班 -> 海归学院派 -> BAT」的交互设计师,我也算是阅读和学习过各种类型的资料了。有一个问题长期默默困扰着包括我在内的很多交互设计师,然而却从未受到应有的关注,那就是交互方案应该画到什么程度?

    Dribbble 这类图片资料注重设计趋势,交互进阶(自我宣传一下)这类博文资料注重设计理念,学术研究和书籍这类官方资料注重设计方法……大家不约而同地把「具体实施」这一步骤忽略了。跟 UI 视觉不同,交互设计确实对于画图没有什么明确的要求……但是,我摔过的无数坑都验证了一个无法逃避的事实:

    恰当的表达形式能够对思想传达和工作效率起到事半功倍的效果;不恰当的表达形式可能让人对你的设计造成误解,甚至低估你的能力水平。

    下面我将结合大家的普遍理解和个人经历分析一下各类交互方案的优劣以及对表达形式的探索。下文将介绍的类型有:线框图、伪视觉稿、去色稿和色块稿。

    一、线框图

    △ 图片来源:Lucidchart

    这可能是交互方案最原始的状态了吧,「你想要设计一款程序,于是构思一下信息排布和功能组件,然后用简单快速的方式画下来?!?/p>

    在早期,线框图是唯一的交互方案表现形式,因为大家不会在画稿时顾虑太多。如果你去翻翻国外人机交互的经典资料或者学术论文,会发现上面的图例在现在的我们看来大多丑到无法呼吸。

    △ 图片来源:Matching HCI Design Patterns to Workflow within an Agile Process

    但是这种原始而单纯的表现形式,已经不太适应现在的设计环境了。在更加激烈竞争和注重审美的今天,大家的交互方案的形式性要求越来越高。在这种环境中,如果你依旧只把交互方案画到线框图这种程度,哪怕设计想法再好,方案也很容易被 PK 掉。

    除非你有机会能够解释清楚线框图背后的设计意图,但是抛去一小丢丢偏爱学术的科班设计师之外,大部分人都不太可能有这个耐心的。

    二、伪视觉稿

    △ 图片来源:Ramotion

    如果没有说明解释,你可能以为上图是扁平简约中规中矩的视觉稿,实际上它只是交互方案罢了。很多交互设计师孜孜不倦地在视觉效果上加重投入,哪怕明明知道视觉设计师会将其完全颠覆,哪怕常常被开发误当做最终视觉方案……如果太过,这样破坏方法论和设计体系的操作方式,真的有点病态。

    我以前也经常这么干,理由很简单,就是竞争。

    我在本科时参加过一个挺山寨的 UI 设计大赛,当时是抱着体验一下国内比赛的感觉和同学组了个队。这个比赛分了好几次复赛,第一次是检验前期调研;第二次复赛是检验线框图;第三次复赛是检验完整方案。我们第一个阶段还比较认真,以我个人项目和比赛经历,按照计划下去应该不会太差,但是没想到在第二次复赛就被刷下来了。

    因为我们很单纯地解读比赛规则后,在第二次复赛(语音+PPT)如实上交了精心准备的线框图。即便我们的方案分明在创意、合理程度和完成度上都很好,然而在外行评委的眼里,这种黑白灰的简陋线框图比起其它组色彩缤纷的视觉稿,相差太远了。哪怕那些视觉稿其实非常丑,调研、设计思路和可行性和比我们差好几个档次。

    从此之后我学到了,在有竞争的情况下,不要以为别人说线框图就只给线框图,那样想简直太单纯了。

    有的设计团队里,交互稿必须达到近似视觉稿的细致程度已经是不成文的规则。长久来看,我觉得这样做其实并不太好,因为:

    • 交互设计师需要在工作价值之外的地方投入更多的精力,维护成本更是成倍增加。
    • 在大量的稿件传递中,很容易分不清哪些是交互方案,哪些是视觉方案,让人误解。
    • 太细致的交互方案会产生过多的风格引导,限制了视觉设计的发挥潜力。

    三、去色稿

    △ 图片来源:Patryk Sobczak

    这种表现形式可以看作是上文伪视觉稿的去色版,就是在视觉风格上可以自由发挥,但是除了黑白灰之外不用任何色彩。

    这种方式在具有较高的观赏性和细致程度的同时,比起伪视觉稿好处是:

    • 由于不考虑彩色,投入的精力相对少一些。
    • 不会让人误以为是视觉方案。
    • 对视觉风格的引导性低一些。
    • 标注用任何颜色都会很显眼。

    如果在颜色选取上稍微突破一下,还可以在不做过多视觉预设的基础上,增加方案的吸引力。

    △ 图片来源:Eddie Lobanovskiy

    △ 图片来源:Jeff Broderick

    四、色块稿

    这算是一种比较新的探索了。有时候交互方案不需把界面所有细节都展示出来,可以用色块来代替图片和文字。

    △ 图片来源:Ramil Derogongun

    △ 图片来源:Autumn Mariano

    △ 图片来源:Ramotion

    这么省事的方法,显然不能够随便使用,可以用到的场景有:

    • 复用性较高的动效。
    • 涉及到大量界面、对细节要求不高的流程图。
    • 纯粹的排版设计。
    • 页面局部的重新设计,不重新设计的其余部分就可以用色块简单示意。

    由于没有细节,所以就算使用色彩也不会让人产生视觉方案的感觉。

    △ 图片来源:Jared Erondu

    如果交互方案都能这么搞,那真是能省不少时间……不过这当然不可能的。

    总结

    所以,交互方案该画到什么程度呢?我这里虽然给了一写建议,但是具体情况还是要具体分析。请结合一下项目需要、团队风格以及自身喜好选择合适的表现形式吧。

    欢迎关注作者的微信公众号:「交互进阶」

    「高手经验!帮你打造思路清晰易使用的交互稿」

    ================明星栏目推荐================

    优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏??裘夥炎匝缕?,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

    设计导航:国内人气最高的设计网址导航,设计师必备: //hao.www.vrfys.com

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址://www.vrfys.com/interaction-scheme-degree

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    转场动效 优设专访 设计师 扁平化设计 交互设计师 优设大课堂 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 AI教程 设计理论 平面设计 神器下载 字体下载 设计趋势 用户体验设计 psd下载 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立至今,一直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

  • 党的政治建设是根本性建设 2019-03-23
  • 麻辣财经:大咖热议全面绩效管理,“全”体现在哪儿? 2019-03-22
  • 汲取立志智慧 坚定理想信念 2019-03-21
  • 省旅游集团党委召开“讲忠诚、严纪律、立政德”专题警示教育部署动员大会 2019-03-21
  • “奶茶”婚事与社会心态 2019-03-19
  • CSL2017总决赛圆满落幕 Eclipse击败VG夺冠 2019-03-17
  • 日本是世袭国家与民主相距甚远。 2019-03-14
  • 第一应是赚钱。第三、四两条也赚钱的范围,而且其他很多原因。关踺是胆识;第二是用钱。节省是其中之一。 2019-03-14
  • 如何保持胃肠道健康年轻态 来听听这位消化科医生球迷的经验 2019-03-13
  • 冯翠玲:把党的声音传递给“国际大家庭” 2019-03-13
  • 【理上网来喜迎十九大】苏格:习近平总书记外交思想领航中国特色大国外交 2019-02-13
  • 钱江晚报:火锅店被吃垮,实际是信任破产 2019-02-13
  • 经济日报:微观基础改善 经济稳健可期 2019-02-06
  • 广州市荔湾区:基层党建引领老旧社区自治 2019-02-06
  • 比利时30大胜巴拿马 卢卡库梅开二度 强队总算没有都凉凉 2019-02-06