网站设计参照：概念设计的综合思考

2019-03-06 07:26:55来源： UCDChina.com 阅读 ()

　　在现有产品的改善中概念设计的作用一样非常重要，比如：你可以在你的网站改版时，首先把现有网站的情况通过一张完整的概念图整理出来，让大家更加清楚什么地方需要改进、有多少需要改进等等，然后再把改版之后的规划通过概念图的方式再次呈现出来，做到很好的规划和对比…

　　可以模拟未来的设计师 本文作者：白鸦

　　下面是我曾经在一个演讲中提到过的一张图，大致可以这么描述：

　　三个要素：用户、技术、品牌

　　1、做任何产品设计之前我们必须要考虑这三个要素：用户、技术、品牌。

　　2、理解用户是产品的基础。

　　只有你的产品是用户需要的对用户有价值的，才有可能走向一个成功的产品；（我们身边有太多的产品因为没有用户需求而走向消亡）

　　3、有什么样的技术基础

　　明白现在有什么样的技术基础很重要，不能实现的设计往往可能不会产生真正的价值；（目前人机工程领域也可以分两类：提供交互和设计交互，可称为”技术”、”设计”两类。技术的那一部分人大致就是在研究如何有更好的技术作为体验基础，如”芯片”的性能如何提高；设计的那部分人在研究如何在技术之上设计有更好的体验。可以设想一下，如果在DOS时代MS就设计出来了现在的VISTA，那么这个设计的价值不会得到好的体现，因为那个时候”体验支持”还远远做不到。）

　　4、服从一个整体的约束

　　对于一个企业来说，所有的这些都需要服从一个整体的约束：这样的产品设计是否符合整个品牌的文化和气质，是否在品牌战略中存在真正的意义。

　　如果一个设计师只陷入”用户需要什么”中，那么他的设计往往不是完整的；如何一个开发者只限于我能提供什么样的技术支持，那么他的能力也是不完整的；不管是设计师还是产品设计团队中的任何一员，我们必须了解所有的这些综合状况。

　　很多现象显示”往往一个设计师在只知道’设计’的情况下完成工作，之后自己都不明白自己设计的产品是什么样的概念，为什么那样设计”，那么我们可以肯定的说”99.9%这个设计是没有灵魂的，压根就是不合理的，或者其实可以更好”。

　　设计师一定需要具备综合的知识和综合的思考能力

　　所以，我们无数次的在讨论中得到同样一个结论：“设计师一定需要具备综合的知识和综合的思考能力”，在工作中管理者也在不断的要求设计师们要去”主动思考”和”综合考虑”。“合格的设计师不只是能把一个产品做的很漂亮，在整个产品团队中他们还有着一个无法比拟的能力：-模拟未来发展的事情“。

　　在产品设计之初，设计师”模拟未来”的能力就会很好的通过概念设计来体现。

　　概念设计是我在学习UE时第一个感觉自己对UE有所认识的课程，现在还清楚的记得老师讲概念设计时第一句话的大致内容；大家都知道了解用户和环境是我们做任何产品设计的基础，接下来我需要大家明白：概念设计是我们做任何产品设计的第一步。”

　　概念设计是我们做任何产品设计的第一步

　　它就和你要写一篇文章之前一定要先想一下怎么写、大致提纲和内容是什么，在画一个肖像之前一定需要先确定大致的轮廓和基本比例、透视一样。

　　无论你是否着重做了这一阶段的工作，无论你在这一阶段是否有正式的工作产出物，但你一定做过这一阶段的工作也一定有产出物…

　　概念设计因为目的不同可以有很多种不同的方式和做法。

　　比如，一些超现实的概念产品越来越多的出现在人们面前，汽车、数码产品、工业设计等等数不胜数。(设计创新已经在产品竞争中越来越体现价值，甚至在某些品牌钟超越了技术创新和模式的创新，如”APPLE“)；再比如，很多设计师在真正动手设计之前会用绘制”概念图”的方式围绕着用户使用过程去模拟产品的设计及大的使用流程。

　　这种方式可以很好的促进和帮助团队之间的沟通，也可以让大家对于产品设计过程中的工作和难度达到更好的准确评估，同时还能让老板对于该产品给品牌带来的价值有更加深入的认识做出更加有力的决策。（我的老大郭宇曾提过，他的导师在不同的设计学校只教概念图这一门课，而且给学生布置同一个作业，即制作一张概念图来教会一个对棒球毫无所知的成年人如何打棒球，这里有作品展示)。

　　还比如，往往设计师会通过一些形象的表现方式绘制一些特殊的概念图，更加形象且有效的来说明整个产品的思路已经发展方向(不同角色之间的关系、不同功能点的关系、甚至可能是销售或盈利模式的串联等)。这种方式可以更好的统一所有团队成员对于产品的整体认识而且成本很低，但起到的作用却非常大。

　　例子：去年我在Flickr上面发现一个朋友，他好像是搞自然资源保护工作的，他的Flickr上面公布了很多他的概念图作品。这些作品都非常有趣，画法不拘一格，但表达的却非常形象准确。

　　有效的表达产品思路

　　我每次在说到概念图设计的时候就会有同样一句话：表达产品整体概念的概念图用什么工具画什么风格画都可以，只需要你可以有效的表达产品思路即可；我在Flickr上面发现一个搞自然资源的人，他的概念图是我目前最欣赏的概念图。

　　那么，概念设计是不是只在产品设计之初才会有作用呢？概念设计是不是只能在从无到有的开始阶段夸夸其谈呢？

　　答案当然是否定的。很显然，概念设计的作用不仅仅只是在产品设计之初，而且概念设计也不完全是虚拟的。

　　正如Angela在本期文章中的比喻：”画画时一样，你需要时不时地从细节中抽身出来，退后几步眯起眼睛看看整个画面的样子”，其实在产品设计之初画概念图可以让整个团队在整个产品设计过程中不断的统一和调整思路；

　　网站改版时，概念设计的作用

　　比如：你可以在你的网站改版时，首先把现有网站的情况通过一张完整的概念图整理出来，让大家更加清楚什么地方需要改进、有多少需要改进等等，然后再把改版之后的规划通过概念图的方式再次呈现出来，做到很好的规划和对比…

　　概念设计123　本文作者：一叶千鸟

　　先阐述自己对产品“概念设计”的理解：

　　* 主要对象有功能、逻辑两大部分。

　　* 介于“需求分析”和“具体设计”之间的流程。

　　* 由感性到理性的发散过程。

　　重要性

　　实践表明，一旦概念设计被确定，产品设计的60％到70％也就被确定了。然而，概念设计阶段所花费的成本，在总的开发成本和设计周期中所占比例通常都在20％以下，也就是说概念设计是产品开发的低成本端。

　　如何进行？

　　通过抽象、概括、归纳等方法将已有的创意需求进行分类，并找出其中的内在关联。应该从江湖局势、形式方向、民族地域、历史人文的角度去演绎，而不应该过分深入到用户角色，技术可行性、交互流程中。

　　元素，提出核心功能点。
　　关系，根据用户自然需求放大。
　　集合，进行产品定位。

　　如何呈现？

　　不止一次听设计师提到画概念图最好的方式是纸和笔，我认为如此最大的好处是保留随意性，能够得以全身心投入发挥，用软件处理最终概念图比较妥当，毕竟在公司还需要给高层汇报和整理归档。

　　手绘，在纸、玻璃板或黑板上随意发挥。图1

　　拍照，对讨论后的理解和回味，可以达到事半功倍的效果。图1

　　打印，软件处理的最终版本。图2

　　另外想到的

　　属于“信息架构”的组成部分，都需要广泛了解商业意图和用户需求。和“产品创新”有直接关系，是另外一个课题，网上已有不少类似的好文章。

　　其实任何产品的“概念设计”都讲究两个固定需求：创新？独特？

　　附图

　　图1. 前几天的例子，其实是概念&架构混合图，意思意思：
　　

　　图2. 著名的“用户体验重要性概念图”：

　　帮助你了解全局的城市地图 本文作者：Angela

　　通常大家都会认为设计师是一群关注细节的人，但事实上，设计师不仅要关注细节，还需要考虑整体，就象画画时一样，你需要时不时地从细节中抽身出来，退后几步眯起眼睛看看整个画面的样子。
　　
　　那么对于从事产品的设计师来说，在进入具体内容之前（不管是视觉、交互还是功能），最好能对整个产品的概况有所把握。那么，我们用什么方式来得到产品的整体印象呢？

　　在以往的项目中，我有时会根据用户操作的路径给自己画一张流程图，其中包括用户从哪儿进入，从哪儿离开，中间如何走到各个功能上去，看上去与程序员画的流程图很相似，但我的关注点不是底层的逻辑，而是用户与界面的交互过程。

　　如果把产品比喻成一座城市的话，这幅图对我而言就像是城市的导游图。它首先能帮助我理解这个城市里有什么建筑，也就是这个产品的主要功能是什么；其次，它能模拟人们在城市里行走的主要路径，即理想状态下用户会如何使用这个产品；最后，它还能告诉我银行大厦和保险大厦的关系，即产品功能之间的关系。

　　为什么要画？

　　从这幅图能产生的三种作用（理解产品目的、模拟使用路径、了解功能关系）来讲，团队里的每一个人都需要它。从工作范围来讲，我们更需要的是第二种。作为界面设计师（我知道，大多数公司分工都不是很明确，所以只好模糊地称为UI），我们应该掌握用户在城市里通常是怎么行动的，他们有可能在什么地方迷路，有没有绕远路，有没有不通车的路，以及如何标识两条不同的路，十字路口要怎么标识方向，不同的建筑物要如何区别等等，因为在屏幕上，用户所有的方向全部来自你的指引——不象在现实生活中，没有指南针还可以看星星什么的——所以设计师的一点点疏漏，就会让用户搞不清楚身在何处。

　　由于关注点不一样，所以我们不能依赖程序员或产品经理的地图。如果你需要从银行开具财产证明去国外留学，那么程序员关心的是你的钱够不够申请留学，产品经理则关心的是银行要用什么方法来评估你的财产，而我们则要关心你有没有带齐所有的资料，免得你跑冤枉路。

　　怎么画？

　　前面已经提到了一点。首先我会确定用户从哪儿进入，从哪儿离开，这通常就是这个产品本身，比如某个系统的登录界面和退出界面。然后遵循从整体到局部的基本原则，在两者之间把最大的功能模块都放进去，就像把城市划成CBD和金融街一样。接着集中精力攻克其中一个功能（比如银行大厦），如果它的子功能与其它街区有联系的话，先连接过去，但暂不考虑它们之间的关系（比如银行开具财产证明，然后你才可以去办出国手续，那就先划一条线到海关去）。功能模块内部的交互过程都完成以后，再来考虑模块之间的交互关系。经过这样一点点地增加模块和线条，最后这幅图就会从刚开始的两个点，变成一幅规模宏大的地图。这，就是我们想要的全局。

　　用什么画？

　　最好的工具？当然是纸和笔。相信我，不管你用多么简单的软件，都不可避免地会涉及到操作的问题。这个方块怎样才能往右移一点点？怎样才能画一个箭头？在考虑这些的时候，你就已经被这些手工的问题分掉了一些注意力。哪怕你是使用这个软件的高手，你肯定也有鼠标选不中某条细线的时候，更何况你的电脑时不时的还要休息一会儿。如果你曾经做过视觉设计，你更是下意识地想把某条线和某个方块对齐，或摆成一条线什么的（亲身经历啊！）。总之，只要你面对屏幕，总会有这样那样的干扰来让你无法集中注意力去考虑眼下这件事，所以最好的办法就是：远离电脑。

　　纸和笔可以用来画一些简单的流程，如果你的城市很大，那么我建议你准备以下几样东西：整面墙的大白板、即时贴、白板笔、相机。

　　你知道要怎么做了？白板就是整个产品，黄色的即时贴是每一个最小单位的功能。首先在白板上画几个框，也就是最重要的功能模块，比如注册或管理，有几个主要功能模块就画几个。接着在左右两端确定入口和出口。在即时贴上写子功能模块的名字，贴到相应的主模块中。然后开始工作，比如注册成功进入管理模块，就用白板笔把它们连起来，在线上标明它们之间的关系。尽量把所有相关的即时贴都连接起来，检查是否有重复的、不通畅的（有进没出的）、多余的线，如果即时贴的位置不合适的可以扯下来重新贴。如果可能的话，不同的功能区使用不同颜色的白板笔，这样能看得更清楚。

　　最后用相机把整个白板拍下来。那张照片，就是我们的全局图。如果你需要向领导汇报或与同事分享，这个时候可以回到电脑旁边，根据照片来做一幅图，你想要多规整多漂亮都可以。这样的话，我们才能做到思考的时候不被分心，创作的时候也可以全神贯注。

　　一些建议：

　　*要因为时间来不及就偷懒，事前准备充分以免事后补救，其实后一种情况会让你花掉更多的时间和浪费更多的工作。

　　* 因为画不好而放弃，如果你不试，你永远不知道自己能做到多好。

　　* 太多细节和逻辑关系，在画地图期间，我们关注的是线路而不是功能或需求。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有