今天给大家分享一下设计过程的介绍～里面还有一些很有用的设计网站。如果你想知道如何完整的设计一个项目，可以看看~在这篇文章中，我们将以设计一个CMS系统界面为例，介绍web开发的一般设计流程。CMS，全称ContentManagementSystem，即内容管理系统构建环境原作者使用AdobeXD中的Web选项（完全免费）：如果你使用Sketch、Photoshop等软件，记得选择文档大小为1920x1080，这是Web项目的标准分辨率。面对客户如果有机会直接与客户沟通，最重要的是确认客户想要什么。假设本文设计的项目基于以下背景：我们的客户Pablito拥有一家面包店，他想要一个CMS系统来展示面包的图片和视频，系统可以添加和编辑文章，这些文章可以从CMS中的Post下载到Twitter和Facebook。那么让我们来列举一下这个项目的功能：系统中有什么？图片视频文章系统有哪些功能？登录;登出。上传图片；删除图片；将图片分享到社交媒体。上传视频；删除视频；将视频分享到社交媒体。创建文章；编辑文章；将文章发布到外部博客。好的！下一步：调查。不要重新发明轮子。许多学生在设计时喜欢从头开始。这怎么可能？设计不是魔术，网上的都是设计的，大家可以参考一下！在这个例子中，我们正在设计一个CMS，因此我们需要一些灵感。您可以在以下位置找到它：PinterestB?hanceSearchability不要跳过这一步。只需在Google中搜索CMS，然后按顺序点击，您可能会看到许多网站都是使用Wordpress、Wix、Joomla或Drupal制作的。您可以体验这些CMS，看看它们是如何设计的。画草图是时候拿起笔和纸开始画出您的想法了。我的建议是使用较小的笔记本，这对于表达简单的想法很有帮助，因为你不必担心大的空白区域。给你看我画的草图：登录界面：主界面：图片展示界面：分享模态框：文章编辑界面：侧边栏：想把草图展示给客户确认他们的想法，那就去做吧！设计，但是有灰色我们还没有讲到颜色部分，等设计完成后再说吧。是时候将我们的草图数字化了。选择一个软件开始吧~我们将遵循一些简单的设计指南，如果你想了解更多关于如何设计具有可用性和可访问性的信息，你可以参考文章末尾的文章。那么为什么要进行灰度设计呢？因为这样我们就可以专注于内容以及元素的放置方式和位置。第1步：网格我们不会深入讨论网格。它们对于在您的设计中定位和放置元素很有用，您可以根据需要创建它们。下面是一个基本示例：创建网格的步骤如下：在文档中间创建一条简单的线。然后复制粘贴到右边。可以根据自己的想法控制线与线之间的距离。然后只需复制并粘贴到另一侧，使其对称。第二步：放置元素为了简单起见，我只展示了部分绘制的页面：主界面：图片展示界面：分享模态框：大家可以看到，我只用了灰色调。也没有使用黑色，因为如果要强调一种颜色，可以使用不同类型的灰色。最后，是时候画画了！是时候为我们的设计上色了。我们不会深入研究调色板和颜色的理论。您只需要记住：理想的调色板包括：主色、辅助色和高光色。如果您的客户有徽标或商标，则颜色也应反映在调色板中。假设我们的客户Pablito不介意使用的颜色。如果您不想花时间创建调色板，您可以查看文章末尾的第二个链接，找到您喜欢的并能反映您业务本质的调色板。我选择了下面的调色板作为例子：下面是应用后的效果：主界面：登录界面：图片显示界面：以上所有图标都是在AdobeXD中完成的。当然你也可以使用外部图标库。图片也可以在Unsplash上找到。就是这样！我们总结一下上面的过程：搭建环境。确定项目的内容和所需的功能。挖掘现有示例以获得一些灵感和能力。在小笔记本上用纸和铅笔画草图。使用简单的网格将这些草图数字化为灰度。创建调色板。数字草图中的颜色用于画龙点睛和修复。总结设计是一个复杂的过程，但在进行元素放置和着色之前弄清楚几个步骤将使该过程更容易和更快。如果你连设计什么都不知道，你怎么设计呢？是从猜测开始的吗？换句话说，如果你连项目的功能是什么都不知道，怎么可能开始画草图呢？我最后一条也是非常重要的建议：设计不是关于外观，设计是关于呈现信息。你设计的一切都与信息有关，没有信息，你的设计只是……漂亮的颜色和形状。全文完结！希望对你理解设计有所帮助~相关链接WhyusabilityandaccessibilityinDesign:5tipsPaletteColorHuntUnsplashAboutGridsAboutTypography
