第一点：了解你的目标客户群的心态

1、做微任务的目标客户群(如随时随地看看新闻，听听歌，看看电影，聊聊八卦之类)：

这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。

这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。

第二点：APP原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具：移动APP原型设计神器 POP、axure、Foreui等

第三点：APP视觉设计与设计要点

（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等

一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。

另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。

所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。

你必须记住：（1）隐藏设计或者减法设计（2）分区或分类（3）帮用户做决策（4）提高交互创新设计（5）让人有爽快感和新奇感（6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）

一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”

2014年 APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！

第四点：APP界面设计流程

（1）.设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。

（2）.放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有

效。

（3）.并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

（4）.由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

（5）.整个设计过程中不断问自己“真的需要吗？”。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，

但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

第五点：APP界面设计测试与预览修正

设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的方法最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。

App界面设计是UI设计师们普遍需要设计的内容，具体App界面设计流程是怎么产生的？刚好我在CGWANG培训学院了解咨询过相关的设计流程，再结合一些企业内部设计师们的工作情况，最后为大家总结出了以下几个方面，针对产品经理、交互设计师、视觉设计师提出的建议。

完整的流程，分层次设计，自下而上去完成：

1、策略层，定义产品使命、价值、目标人群

2、愿景/功能层：定义核心场景、功能列表

3、结构层：做流程图、信息架构，确定主导航、主菜单

4、框架层：梳理每一个主界面的内容、布局

5、表现层：视觉设计，涉及图标、配色、切图。

产品经理主要关注1~2，在去找设计师之前，请先问自己以下几个问题，以保证需求明确：

1、产品给用户带来的价值是什么？

2、竞品有什么？我们做这个有什么优势？

3、为什么样的用户而做？

4、用户会在什么样的场景下使用这个产品？

5、要完成这个产品，最大的瓶颈是什么？是技术攻关？体验出彩？还是运营资源？

交互设计师主要关注3~4，在交付方案之前请先不断问自己以下几个问题，以保证体验质量：

1、该界面要求用户完成的最重要的任务是什么？

2、这是最简单的解决方案吗？

3、信息是否组织得当？

4、设计是否易用且一目了然？

5、标准是否一致？

6、能否减少用户点击次数？

视觉设计师主要关注5，在与产品经理PK之前请先不断问自己以下几个问题，以保证减少返工：

1、界面上需要突出的重点是什么？是否进行了有效的突出？

2、界面上一共有几个层级，是否用清晰的视觉语言予以展现？

3、同样层级、同样性质的元素是否用了一致的设计语言？

4、主色调、材质，是否符合整体品牌感？

5、细节有无丢失？按钮点击态、反馈、缺省状态、字数超出、加载中、未加载态、加载失败态，是否都提供了？

另外，合作不易，三个角色分别需要注意的问题：

对于产品经理：

1、APP的设计，不要只看竞争对手确定自己的定位，不要“因为竞品A和B没有做到，所以我们要做比A和B更牛B的XX功能”，而是要以用户为导向，思考自己为客户提供的价值。在向其他人描述你的想法时，请用这样的句式来描述和思考：XXX这一类型的人在XXX的时候、XXX的环境下，想要做XXX事情，遇到了XXX问题。而我们这个APP能够通过XXXX方式巧妙的帮助他解决了这个问题。

2、不要直接拿线框图给交互设计师看，直接描述你的需求即可，描述清楚。让设计师知道你的目标是什么，接下来让交互去画原型，让更专业的人做专业的事。

3、不要太纠缠视觉，对于一些无关紧要的细节，该放手就放手，尽量减少提出主观意见。

4、别太迷信用户反馈，能提反馈的，大部分都是粉丝、深度用户、高级用户，他们代表不了全部用户的心声。

5、让开发主管去评估工作量，如果对某一部分工作量的评估觉得时间太长，就把它拆分成子任务。

6、每周对一到两次开发成果，别频繁的去打扰人家。

7、bug不断发现，不断修复，发现/修复率小于1，才开始变得可控了，才能确定bug的具体规模并精准预测发布日期

8、少做少错，新版本尽量别加太多锦上添花的功能，满足最核心的就行了。

对于交互设计师：

1、不要一提商业化就头疼，谁不想做一个干干净净没广告的APP?别老想着高大上，目标最重要。通过你的设计，让用户消无声息的贡献点击，让商业化变得人性化，这才是你的本事。

2、别太窝囊，别产品说怎么改，就怎么改，要跟他争，把自己当成产品的owner，产品的数据、规划，你全都要知道，这样信息对等了，才有话语权，才能有机会站在用户角度提供人性化的设计建议，否则只能是个画线框图的。

对于视觉设计师：

1、简洁不等于好（在业界大谈特谈简约至上的风气下，一定有人对这句有疑问，不细解释，请自行先翻一下诺曼的《如何管理复杂》这本书）。符合用户的心智模型，让人一目了然，才是好。

2、别做一大堆方案，ABC方案抛出去让人选，这样累不累？自己先判断哪一个方案最好，把它做到自己满意、可行、拿得出手，就行了，不要沦为美工。

3、给开发的视觉稿，先自己想一下，布局如何实现，不同屏幕尺寸如何适配。如果有动画效果，别天马行空的描述，能做出动画示意最好，做不出来，也找一个靠谱的示意。别让开发gg太上火。

最后，90%的问题本质上都是沟通问题！90%的争论本质上都是名词之争！

总结

您已经对如何使用网格有了基本的了解，您可能想知道如何将其应用于您在网络上看到的布局。响应式网格是一种系统地调整您的设计，分配命令，建立层次结构和“逻辑”设计的方法。它使事情看起来不那么浮动，您通常可以分辨出谁在使用网格以及谁没有使用网格。随着人们成为更好的设计师，他们的眼睛不断在各处绘制水平和垂直线，以创建这种顺序和对齐方式。

在该注释上，我经常会遇到诸如“等等，粘性面板如何在网格布局中工作?”之类的问题。或“您对端到端的Web应用程序做什么?”我们将研究响应式网格的一些应用程序，以及它们如何按比例缩小到移动设备。更重要的是，我想教您如何混合和匹配布局以适应您的设计需求。

如果不确定如何在响应式设计中使用网格，请阅读第一部分：响应式网格以及如何实际使用它们。还是顺其自然，一切都很好。

免责声明：我不在这些公司中任职，也不知道他们如何建立自己的网格。这纯粹是一个学习练习，我仅以这些网站为例。

单列布局

又名全页布局。这是最简单的布局，用于登录页面。您有足够的空间来显示大图像，以创建可增强您的产品或品牌的声明。一栏式布局中的事物充当单独的模块，并且易于在移动设备上扩展，因为事物已经按照您希望它们显示的顺序进行了堆叠。因为它在激发情绪方面非常强大，所以这是主页，简介，操作指南或新产品等的通用布局。即使在模块中，也有可能将事物分成不同的网格列，整体而言正在利用12列作为主要内容。

网格使用

您可以清楚地看到，WeWork在其设计中使用了网格，因为尽管每一行都划分了所有内容，但它们仍然排列在一起。一个简单的赠品是元素之间的填充量是一致的(在4张卡片和两个客户成功案例之间)，并且外部边缘的宽度相同，这使此设计非常令人赏心悦目。我也喜欢这个示例，因为它表明您仍然可以在执行基于行的模块的同时以有趣的方式分解页面。

例子

这是一列布局的其他一些示例。请注意，父元素内的元素可能如何划分为不同的列，但整个父元素位于一个主容器下。

两列布局

这可能是最常见的布局之一，只是因为您不希望文本的宽度超过6_8列。另一个好处是您可以将其他元素置于折叠上方，并使用此侧栏进行导航，广告，号召性用语，类似清单等。您应将8栏用作主要内容，并将4栏用作侧面内容。这样，您的两面都是偶数，如果需要，您可以将主要内容切成两半，以很好地并排显示内容。

“但是等等，有8列?然后我的设计空间就大大减少了!”你可能会说。在网络上，切勿让文本使用全部12列。这是一个基本的排版原则，舒适的阅读宽度在16px处约为60_80个字符，而在桌面上恰好不超过8列。其实8列是真正推动它，因为你必须要考虑那些谁使用了大量的桌面，所以我不会设计的东西多比。即使在单列主页布局中，内容也居中并具有最大宽度。因此，“更少的空间”确实是没有问题的，甚至可以使您的设计更好。

这种布局用途广泛，适用于网站的内页，例如，当您有大量文本要阅读时。一些页面示例是博客，说明，常见问题解答，操作方法，您希望在其中使导航或其他方便用户使用的内容。

移动

在移动设备上，这是一个简单的层次结构问题。您需要根据侧面板中的内容做出堆叠决策。如果侧面板是导航或关于FAQ的一系列问题，则应将其放在主要内容之前。如果侧面板是“阅读更多”或“其他建议”，则应将其堆叠在主要内容的底部。

三列布局

由于您要处理三列，因此您可以选择如何分配它们。让我们先来看一个简单的示例-均匀的4_4_4分布。

4_4_4分布

当您需要发布大量图像时，这对于布局很有用。如果设计将不使用最大宽度，则可以由您选择。我在下面显示了两个示例。

分布不均(3_6_3)

分布不均匀是一种布局，用于当您拥有可以处理较长内容的产品时，您还希望突出显示用户可以做的其他事情。当主要内容不需要很多水平空间时，这是最合适的。

这是Dribble设计工作板上3_6_3布局的示例。紫色轮廓指示内容位于网格上的位置，紫色块指示它们为元素提供的其他填充。我非常喜欢这个示例，因为它提醒您可以按自己的喜好分解页面。在这里，标题和大号的CTA是一个模块，用作三列之前的标题语句。但是，如果仔细看，它实际上仍在中间的6列之内。

就像两列布局一样，您需要决定如何显示内容，而这取决于信息的重要性。使用相同的Dribbble示例，在平板电脑上，左面板完全消失。在移动设备上，右侧面板会塞入过滤器按钮。单击过滤器按钮可展开该部分并将内容推入下面。仅出于理论上的考虑，如果左侧是导航，则可以将其堆叠在主要内容的顶部，放在抽屉中，尝试水平滚动的锚点，或者创建带有导航元素的粘性页脚。

Dribble的3列布局更改为平板电脑上的2列(左)。在移动设备上，右侧面板会塞入过滤器按钮(中间)。单击过滤器按钮可展开该部分，并将内容推入下方(右)。

分布不均(2_5_3)

Facebook和Twitter使用这种布局，其中主要内容是供稿的长滚动区域。您可能会注意到左侧和右侧的列数不均。他们的左侧面板是导航栏，右侧是一列较宽的栏，其中包含生日，精彩集锦，提醒和趋势等杂项。

如果您回想起我以前的文章，则12列是台式机上最基本和最标准的列，但这并不意味着您需要使用它。不同的页面可能需要不同的网格设置，具体取决于您的产品。在这里，布局之所以有用，是因为提要不需要太宽，而且分布不均匀也使提要具有层次结构和注意力。

基本上，您可以按自己的喜好分割网格，只需要认真考虑站点的用途以及削减层次结构将如何支持该目的。UI设计网格布局有哪些如果站点的目的是主要阅读长篇小说或查看大图像，则我不会使用散列布局，因为我想使用更多的水平空间。取而代之的是，我将导航放在顶部，并使用两列布局。或者，如果我需要一个介于图像和文本之间的不错的选择，那也将是使用两列布局的一个很好的理由，例如Reddit的当前设计。

粘板

粘性面板是指您的区域具有粘性，或者在用户向下滚动页面时“跟随”用户。粘性面板中的信息可以是静态的，例如带有号召性用语的警告消息，也可以是动态面板，该面板会在您更改信息时进行更新。布局本身与两列布局相同，但粘性内容要短得多。它之所以非常有效，是因为它可用于反映用户在非粘性方面所做的事情，并始终吸引号召性用语。使号召性用语保持一致很重要，因为它可以提醒用户下一步应该做什么，从而增加转化次数。与滚动两列布局相比，当您要突出显示用户可以执行的单个操作时，最好使用粘性列，而对于多个操作则最好使用不粘滞。

如果使用网格系统进行设计，则面板应位于网格内部。在台式机上，面板将占用外部3或4列。其余的，无论是右侧还是左侧，将是滚动的8列或9列。

重要：如果您决定设计粘性面板，则该面板必须足够短，以使其在所有桌面屏幕上都可见。因此，它必须简明扼要，如果它是动态的或具有伸缩性，则应确保内容未在其最大高度处被剪切。

移动

您是否注意到台式机与两栏式布局相同，但侧面板较短?区别在于移动设备，面板被压入了一个粘性页脚。另一个选择是，它也可以是包含在内容中间的另一个模块。

在移动体验上，Airbnb会将粘性的右面板变成粘性的底部页脚。当用户单击“预订”时，将显示带有预订详细信息的模式。通常，粘性页脚会非常汇总，如果用户单击粘性页脚，则可能会显示一个模态或您可以像抽屉一样将其拉起。在移动网络上，与抽屉相比，该模式更易于开发，但是抽屉将模仿更近的桌面体验。

网络应用

某些站点具有持久的导航功能，该导航功能通常会粘在屏幕边缘，通常在屏幕的顶部和左侧。这些粘性导航菜单可帮助用户感觉就像他们在使用应用程序，并且对于基于动作的UI(用户需要在不同目标之间进行切换)非常有用。由于这样的设计意味着导航始终存在，因此您可以利用它来简化内容。

对于Web应用程序设计，粘性导航实际上不属于网格。它留在它外面，因为它将一直存在。网格将成为您的内容，其外部还有粘性导航。通常，此粘性导航的大小也是固定的。在此示例中，Spotify的左侧面板和底部面板具有粘性，并且在拉伸浏览器时，只有网格中的内容会动态更改大小。大多数网络应用程序都保持网格流畅以填充浏览器。

移动

通常，Web应用程序倾向于具有实际的移动应用程序(从应用程序商店下载应用程序)。与移动网络相比，有了移动应用程序，您可以做更多的事情(在手机上以chrome打开页面)。在移动体验中，由于菜单项很多，导航项往往会塞入汉堡菜单。如果在桌面上有一个顶部导航充当总体导航，则它在移动设备上可能仍会粘在顶部或底部。为什么是底部?它离您的手更近，因此更容易接近。因此，现在有几家公司不再将导航放在其应用程序的顶部。

Slack的移动应用程序将导航隐藏在左上角的图标中。将导航隐藏在移动应用程序的汉堡菜单中，但还引入了新的即时贴按钮来创建新的便笺。Youtube的移动网络版本具有导航功能，可作为页脚。

这还不是全部。您还可以利用许多其他很酷的方法来利用网格进行出色的设计。有时您不必使用装订线，有时甚至不必在桌面上做12列。您的三列布局甚至不需要从页面的开始处开始。这仅仅是设计中如何使用网格的开始。最后，它可以帮助您思考层次结构。希望本文能够在技术方面为您提供帮助，但更重要的是，在如何考虑设计并提供适合页面目的的可视化解决方案方面，您会有所帮助。良好的可用性不仅取决于外观，还取决于有效的，可扩展的和可转换的。

UI设计网格布局有哪些

转载请注明：片头模版 » APP界面由哪些部分组成(常用的界面布局方式有哪些)