序言
继上一篇需求分析之后，UI的设计是第二个很要命也很重要的步骤，好的ui设计风格，有趣的交互方式，以及健全的页面展示，是取悦用户很重要的一步。
针对于UI的设计，不同端的展示和交互方式都会不同，并且由于端器械的操作形式和能力的不同，部分多端应用可能在端提供的功能也不同的，这就需要我们自己的取舍。
虽说上面所述的内容有一些偏向于需求分析得嫌疑，但是这样得取舍通常情况下，多半是基于交互边界，优劣，UI方面得易用，以及技术得能达到的程度来判断得。所以出现在UI这篇文章之中，也不算完全没道理。
之前已经大体得分析了首版本的原型，暂时只考虑app端的应用，在ui的设计过程之中，可能因为易用性和设计感对其进行一定的调整。这也算是反映出了需求在落定前不断商讨变化的过程，毕竟这个经常难以避免。
目录
想要给他一个风格
看了许多的素材网站，我自己有的时候也是很混乱，感觉好像很多的素材都很适合，但是又不是完全的适合。那就只能先确定一个基调。
常用的设计风格：
- 简易扁平：没有冗余的装饰效果，让信息本身成为核心，通常采用比较鲜明的色彩，设计简明抽象一些。Bento布局可以算是扁平化的一种延伸。信息分块，展示更加聚合。
- 材料设计: 以现实世界中的材料和物理特性为灵感，如纸张、卡片等，让用户对界面元素有更直观的理解。强调丝滑的过渡动画，配色的统一（主色和辅色），阴影和光感的运用辅助细化层次感。磨砂玻璃质感的设计风格就是此类风格一个运用衍生，给人一种轻盈透亮的感觉。
- 拟物化: 模仿现实世界的物体和材质效果，包括纹理、阴影、渐变和光照效果等，使界面元素看起来就像真实物体.
- 新拟物化：结合扁平化和拟物化的一种新的风格，通过模糊的阴影和渐变效果，营造出元素浮现在背景上的立体感觉。
- 手绘风格：模仿手绘艺术的效果，线条可能粗细不均，颜色鲜艳且具有独特性，给人一种亲切、温暖、个性化的感觉
- 弥散风格：通过虚实变化，颜色边缘保留较为清晰的轮廓，整体从观感上多了一些动感与变化层次，给人一种虚实结合的魔幻感
- 暗黑风格：以黑色或深色系作为背景主色调，如深灰色、深蓝色等，营造出神秘、沉稳的氛围。
以个人项目的工作量来看，还是以扁平化为主吧，相对工作量没那么多，嘻嘻，素材也会比较容易获取。同时也可以适配多巴胺风格，油画风等特色风格。
想要给他一套色彩
设计前调，当然还是需要有一套完整的色彩方案的。
常规的配色方案有:
- 同类色方案：使用色相一致，但饱和度和明度不同的颜色。比如以蓝色为主色调，搭配深蓝、浅蓝等不同明度的蓝色。优点是整体性强，能营造出和谐、统一的视觉效果，使网页看起来简洁、专业1。
- 邻近色方案：选择 12 色相环上间隔 30° 左右的颜色，如朱红色与橘黄色。这些颜色色相彼此近似、冷暖性质一致，你中有我、我中有你。能让网页达到和谐统一的效果，同时又比同类色方案更具色彩变化，避免色彩过于单调1。
- 对比色方案：选取 24 色相环上间隔 120°-180° 之间的颜色，像黑色与白色、红色与绿色等。通过强烈的色相对比、明度对比或饱和度对比，可突出重点内容，产生强烈的视觉冲击力，吸引用户的注意力，常用于需要突出特定元素或营造活泼、动感氛围的网页1。
- 互补色方案：互补色是对比色中特殊的一种，在色相环上呈 180° 相对。如蓝色和黄色、红色和绿色等，搭配使用能创造出鲜明、生动的视觉效果，使网页充满活力和张力，但使用时要注意控制比例和明度，避免过于刺眼。
- 三角色方案：在色相环上均匀选取三个颜色，形成一个等边三角形。这三个颜色相互搭配，能提供丰富的色彩组合，既具有对比效果，又能保持一定的和谐感，使网页色彩丰富且平衡。
- 无彩色方案：主要使用黑色、白色、灰色进行搭配。无彩色系给人简洁、大气、专业的感觉，适合追求简约风格或需要展现高端、稳重气质的网站，如一些金融、科技类网站。也可与少量彩色搭配作为点睛之笔，增加页面的活力。
中式传统配色方案之中常见互补色和对比色方案，同时作为国人，国人还是传统配色看着述符，嘻嘻。
基于扁平化考量之中常常用互补色配合同类色的方案，选取多种颜色（单类颜色之中也会选择多种明暗配比），丰富和明确当前的页面配色。
这里我选择的一套颜色是：
UI要怎么设计呢？（头大）
由于项目优先于App端，此处使用750 * 1334的分辨率来进行初步UI设计，方便适配android和ios端。
- 从最简单的开始吧，来吧登录页面。
常规的登录，但是提供两种方式用户或者手机，当然后续也可能接入支付宝或者微信。提供更多的登录接入。
- 资讯详情列表页：登录之后首要跳转页面，主要地阅读学习分享区。
每天针对不同的专题给出推荐学习和交流地文章内容，但是考虑到推荐内容占据地位置相对较大，所以给了一个开关，同时每日地推荐专题不同，用户可以通过日历安排查看专题活动计划噢。
搜索内容支持多关键字的输入，但是再书写日期，或者类别的时候，可能一开始并不知道合适的格式或者具体有哪些类别。所以此处设计了两个按键方便用户选择日期和类型。
搜索栏下方的类型标签将会展示用户感兴趣的标签内容，并不会全部展示。
标签类型中的文章会依据具体的文章长度或者内容选择不同的展示方式，目前确定的是设计中的三种方式。文章的推荐方式不仅仅是新文章优先，同时针对流量多受欢迎的文章，定期的进行推荐提前的方式。
- 资讯详情查看:
思量着因为项目有一定的电商属性，而且资讯和商品的信息是关联的，所以商品的详情和资讯的详情想要统一页面的，同时，可以通过左边菜单来进行锚点跳转，以及一部分的其他操作。
后续也会提供ai功能等，帮助用户的总结学习。
分享功能，可以平台文案转化的功能，方便分享小红书，抖音，微信等平台。
- 编辑页面
编辑页面可以资讯，也可以灵感编辑，两者的不同却别是，资讯是发布的内容，灵感可以作为笔记草稿。
用户可能在阅读之中灵感爆发，但是引用还是需要明确，用户在编辑的时候，系统会帮助记录当前的引用文章，也可以随时跳转到相关文章的部分进行阅读。
占位符的部分，如果是从文章跳转过来，并且跳转之前选中了文章内容，则占位符会展示为选中的部分。否则会展示提示内容。
- 商品页面
商品页面类似于资讯页面的，作为主要页面之一，为了方便用户对于商品的搜索。点击商品也会跳转到详情页面之中。
- 名片页面
用于作者信息，或者本人信息查看，当然查看他人的信息的时候，会有一部分信息与本人查看的时候不相同。
总结
初步UI设计样式如上，初步版本有待于打磨和讨论。毕竟哪怕是细节交互也是十分影响用户体验的，操作的位置，方式，历史记录等等，都是需要细细考量的点。想要设计一个好的UI还真不是一件简单的事情呀。
UI虽然只是整个研发过程中的第二步，但是这个过程环环相扣，每一步都需要细细推敲。才会有最后的精品成果。
p.s. 当前设计只是初级版本，后续的变更将会同步到当前的文章之中来。 如果有任问题，不正确的地方，或者改动建议，也希望可以帮忙提出，感谢了。
