个人网站app设计 第1篇
一般如果有UI设计人员的话，都会给出一个效果图和图片素材，帮你切好图片资源。如果没有效果图，则根据自己的设想，参考一些其它APP的个人中心页面，分析下界面内容和布局，最后实现自己的设计。
通过分析，可以知晓大致有哪些内容，需要什么布局结构等。接下来开始实现过程。
把整体页面分为几个部分：
头部模块中间的区域模块，统计模块和下方的item条目模块。
wrapper整体页面的样式设计，css样式类wrapper和头部样式设计。
注意style后面别忘加scoped和lang属性。
在Vue组件的
.center_top是个flex布局，内部包含center_img和center_info的横向排列。所以center_top的flex-direction应设置为 row，横向排列。center_info又包含昵称和vip会员等级显示内容，是个纵向的布局关系。
头像和显示昵称的flex布局样式：
其中会员的显示有个钻石的icon的图标，这个有现成的uni-icon可以用。
主要用于个具有弹性和居中对齐的容器.count，并且包含两种类型的子元素.cell和.text，它们有自己的样式和布局特性。这样的设计可能用于显示数量、统计或其他需要分组的文本信息。
.count
设置为display: flex;，意味着这个元素将作为一个弹性容器，其子元素将按照弹性布局排列。
margin: 0 20rpx;设置上下无边距，左右边距为20rpx，提供内缩的视觉效果。
text-align: center;使.count内的文本居中对齐。
border-radius: 4rpx;给.count添加4rpx的圆角，提升视觉效果。
position: relative;将.count设置为相对定位，以便后续可以使用绝对定位相对于它自身进行定位。
top: 10rpx;将.count向上偏移10rpx，可能会与其他元素产生位置关系。
没有指定flex-direction，则默认是横向排列，与flex-direction: row等同。
.cell
是.count内的子元素，设置margin-top: 10rpx;为其添加顶部边距。
.cell的flex: 1;表示在弹性布局中，分配剩余空间，使得它能自适应容器宽度。
.cell的padding-top: 20rpx;设置内部顶部填充，提供与内容的距离。
.text
.text是另一个嵌套的子元素
display: block;确保它作为独立的块级元素显示。
块级元素的特点是它们会在垂直方向上占据一整行，彼此之间默认有换行。块级元素可以设置宽度（width）和高度（height），而行内元素通常不能直接设置宽高（除非使用display: inline-block;或float）。块级元素的宽度默认是其父元素的100%，除非另有指定。有时候还可用于清除浮动元素的影响，例如，通过在非浮动的兄弟元素上使用display: block;来确保它们不会跟随浮动元素。
display: block;是布局和设计中一个非常基础且重要的工具，它允许开发者更好地控制元素的外观和布局。
这部分内容简单，用uni-list-item组件可以用。如果不加样式，看到的是上图红框中的效果，这跟设计的不符合，所以也需要设计下样式。
个人网站app设计 第2篇
在uni-app中设计个人中心页面，通常需要考虑以下步骤：
1.页面布局规划
分析个人中心需要展示的内容，如头像、昵称、积分、订单、收藏、设置等。
设计合理的布局，通常采用顶部导航栏、底部导航栏和中间内容区的结构。
2.创建页面结构
创建一个新的Vue组件，例如命名为。在组件中设置基本的HTML结构。
3.样式设计
使用CSS（如SCSS、Less等预处理器）来定义样式，确保跨平台兼容性。
应用uni-app的CSS变量和组件样式，如uni-row和uni-col来创建网格布局。
使用uni-icons组件添加图标。
4.组件化
这一步非必须，根据需要，将可复用的部分（如订单列表、个人资料卡片等）拆分为单独的组件。例如，创建一个用于展示用户基本信息。
5.数据绑定
通过data属性定义页面需要的数据。
使用v-model或props从父组件传递数据。
使用()获取服务器数据。
6.交互逻辑
个人网站app设计 第3篇
Adobe XD 是一款专业级的 APP 设计网站，它为设计师提供了丰富的功能和高质量的设计体验。Adobe XD 支持快速绘制原型和交互设计，提供了丰富的预设组件和样式，让设计师可以快速创建出色的 UI 设计。此外，Adobe XD 还支持与其他 Adobe 产品的无缝集成，方便设计师在不同工具之间切换和协作。
Sketch 是一款仅适用于 Mac 平台的 APP ui 在线设计网站，它以其简洁的界面和丰富的功能而受到设计师的喜爱。Sketch 提供了丰富的插件和样式管理功能，让设计师可以快速创建可复用的组件和样式。这种组件化的设计方式，不仅提高了设计效率，还保证了设计的一致性。Sketch 支持无缝导出设计文件，方便与开发团队和客户进行交流和共享。
InVision Studio 是一款支持高保真原型制作和交互设计的 APP 在线设计网站。InVision Studio 提供了丰富的预设动画和交互效果，让设计师可以轻松创建真实且交互性强的原型。此外，InVision Studio 还支持实时协作和团队共享，让团队成员可以同时在同一设计文件上工作，提高团队的工作效率。
Zeplin 是一款专注于设计与开发协作的 APP 在线设计网站，它将设计师的作品与开发者无缝连接。Zeplin 支持将设计文件导入到平台，并自动将设计元素生成代码和资源，方便开发者使用。此外，Zeplin 支持开发者进行标注和测量，让开发者可以更直观地了解设计的尺寸和样式。设计师和开发者可以在 Zeplin 平台上进行实时交流和反馈，提高设计与开发之间的协作效率。
以上就是本文和大家分享的 5 个做 APP 设计的网站，这 5 个工具都各有优势，适合不同层次的设计师和团队使用。从强大的绘图工具、实时协作和共享，到高保真原型制作和设计与开发协作，这些 APP 设计网站都能为设计师带来全新的创作体验和高效的团队协作。即时设计网站对所有个人用户免费开放，所有内置功能都可以免费使用！现在去即时设计官网注册账号，可以享受即时设计会员的全部权益：无限文件数量、无合作伙伴数量限制、无限云存储空间等。
个人网站app设计 第4篇
简单介绍下Flex布局。Flex布局很强大，与传统的布局方式相比，Flex布局的语法和理解起来更加简单，容易上手。Flex布局可以方便地实现多列等高布局。Flex布局支持各种对齐方式，包括水平和垂直对齐，并且可以通过设置order属性对子元素进行排序。
flex的6 个属性：
flex-direction：决定主轴的方向。
flex-wrap：如果一条轴线排不下，如何换行。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content：定义项目在主轴上的对齐方式。
align-items：定义项目在交叉轴上如何对齐。
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-direction属性：
flex-direction属性决定主轴的方向（即项目的排列方向）。