原理
一般的Image Mesh为一个矩形区域，它的顶点数为4是固定在四个角的，所以我们能看到的是个矩形图。



为了让Image产生弯曲的效果，我们就是增加Mesh中矩形区域的数量，并且使其按一定的曲线排列。

最终达到曲线的效果。



这里使用的曲线为贝塞尔曲线，这种曲线非常灵活，可扩展，达到理想的效果。

脚本如下：
using UnityEngine;
using UnityEngine.UI;

public class BezierMeshImage : Image 
{
    //控制点坐标
    Vector2 controlV2 = new Vector2(0,200);
    //密集度 mesh数量
    int intensity = 50;
    //mesh 宽度 
    int width = 8;
    // 以上属于动态配置参数,为了方便共享才放在此中，建议使用时提取出去动态配置。

    float halfW;
    Vector3[] bezierPoints;
    protected override void Start()
    {
        base.Start();
        halfW = width/2;
    }
    public void UpdateBezierPoints(Vector3 start, Vector3 end, Vector3 control, int segmentNum)
    {
        bezierPoints = Bezier.GetPointList(start, end, control, segmentNum);
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        var r = GetPixelAdjustedRect();
        var v = new Vector4(r.x, r.y, r.x + r.width, r.y + r.height);

        var start = new Vector3(v.x,v.y + r.height/2,1);
        var end = new Vector3(v.z,v.y + r.height/2,1);
        var c = new Vector3(controlV2.x,controlV2.y);
        UpdateBezierPoints(start,end,c,intensity);

        vh.Clear();
        for (int index=0; index < bezierPoints.Length; index++)
        {
            Vector3 baseVector = bezierPoints[index];
            var i = index*4;
            vh.AddVert(baseVector+new Vector3(-halfW,-halfW,1), color, new Vector2(0f, 0f));
            vh.AddVert(baseVector+new Vector3(-halfW,halfW,1), color, new Vector2(0f, 1f));
            vh.AddVert(baseVector+new Vector3(halfW,halfW,1), color, new Vector2(1f, 1f));
            vh.AddVert(baseVector+new Vector3(halfW,-halfW,1), color, new Vector2(1f, 0f));
            vh.AddTriangle(i,i+1,i+2);
            vh.AddTriangle(i+2, i+ 3,i);
        }
    }
}

public static class Bezier
{
    private static Vector3 CalculatePoint(float t, Vector3 p0, Vector3 p1, Vector3 p2)
    {
        float u = 1 - t;
        float tt = t * t;
        float uu = u * u;
        var p = uu * p0;
        p += 2 * u * t * p1;
        p += tt * p2;
        return p;
    }
    public static Vector3[] GetPointList(Vector3 startPoint, Vector3 endPoint,Vector3 cPoint,int segmentNum)
    {
        Vector3[] path = new Vector3[segmentNum];
        for (int i = 1; i <= segmentNum; i++)
        {
            float t = i / (float)segmentNum;
            Vector3 pixel = CalculatePoint(t, startPoint,cPoint,endPoint);
            path[i - 1] = pixel;
        }
        return path;
    }
}

矩阵图即用一张图绘制多个变量之间的关系，数据挖掘中常用于初期数据探索；
本文介绍python中seaborn.pairplot（傻瓜版）和seaborn.PairGrid（更个性化版）绘制矩阵图
本文内容速览
目录
1、绘图数据准备
2、seaborn.pairplot
加上分类变量
修改调色盘
x,y轴方向选取相同子集
x,y轴方向选取不同子集
非对角线散点图加趋势线
对角线上的四个图绘制方式
只显示网格下三角图形
图形外观设置
3、seaborn.PairGrid（更灵活的绘制矩阵图）
每个子图绘制同类型的图
对角线和非对角线分别绘制不同类型图
对角线上方、对角线、对角线下方分别绘制不同类型图
其它一些参数修改
1、绘图数据准备
还是使用鸢尾花iris数据集
#导入本帖要用到的库，声明如下：
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
from pandas import Series,DataFrame
from sklearn import datasets
import seaborn as sns
#导入鸢尾花iris数据集（方法一）
#该方法更有助于理解数据集
iris=datasets.load_iris()
x, y =iris.data,iris.target
y_1 = np.array(['setosa' if i==0 else 'versicolor' if i==1 else 'virginica' for i in y])
pd_iris = pd.DataFrame(np.hstack((x, y_1.reshape(150,1))),columns=['sepal length(cm)','sepal width(cm)','petal length(cm)','petal width(cm)','class'])
#astype修改pd_iris中数据类型object为float64
pd_iris['sepal length(cm)']=pd_iris['sepal length(cm)'].astype('float64')
pd_iris['sepal width(cm)']=pd_iris['sepal width(cm)'].astype('float64')
pd_iris['petal length(cm)']=pd_iris['petal length(cm)'].astype('float64')
pd_iris['petal width(cm)']=pd_iris['petal width(cm)'].astype('float64')
#导入鸢尾花iris数据集（方法二）
#import seaborn as sns
#iris_sns = sns.load_dataset("iris")
数据集简单统计
2、seaborn.pairplot语法：seaborn.pairplot(data, hue=None, hue_order=None, palette=None, vars=None, x_vars=None, y_vars=None, kind='scatter', diag_kind='auto', markers=None, height=2.5, aspect=1, corner=False, dropna=True, plot_kws=None, diag_kws=None, grid_kws=None, size=None)
g = sns.pairplot(pd_iris)
g.fig.set_size_inches(12,12)#figure大小
sns.set(style='whitegrid',font_scale=1.5)#文本大小
对角线4张图是变量自身的分布直方图；
非对角线的 12 张就是某个变量和另一个变量的关系。加上分类变量
g = sns.pairplot(pd_iris,
hue='class'#按照三种花分类
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)修改调色盘
可以使用Matplotlib、seaborn、颜色号list等色盘。可参考：
import palettable
g = sns.pairplot(pd_iris,
hue='class',
palette=palettable.cartocolors.qualitative.Bold_9.mpl_colors,#palettable颜色盘
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)
g = sns.pairplot(pd_iris,
hue='class',
palette='Set1',#Matplotlib颜色
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)
g = sns.pairplot(pd_iris,
hue='class',
palette=['#dc2624', '#2b4750', '#45a0a2'],#使用传入的颜色list
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)x,y轴方向选取相同子集
import palettable
g = sns.pairplot(pd_iris,
hue='class',
palette=palettable.cartocolors.qualitative.Bold_9.mpl_colors,
vars=['sepal length(cm)','sepal width(cm)'],#x,y轴方向选取相同子集绘图
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,6)
sns.set(style='whitegrid',font_scale=1.5)x,y轴方向选取不同子集
import palettable
g = sns.pairplot(pd_iris,
hue='class',
palette=palettable.cartocolors.qualitative.Bold_9.mpl_colors,
x_vars=['sepal length(cm)','sepal width(cm)'],#x,y轴方向选取不同子集
y_vars=['petal length(cm)','petal width(cm)'],
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,6)
sns.set(style='whitegrid',font_scale=1.5)非对角线散点图加趋势线
import palettable
g = sns.pairplot(pd_iris,
hue='class',
palette=palettable.cartocolors.qualitative.Bold_9.mpl_colors,
kind='reg',#默认为scatter,reg加上趋势线
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)对角线上的四个图绘制方式
可选参数为‘auto’, ‘hist’（默认）, ‘kde’, None。
import palettable
g = sns.pairplot(pd_iris,
hue='class',
palette=palettable.cartocolors.qualitative.Bold_9.mpl_colors,
diag_kind='hist',#hist直方图
)
sns.set(style='whitegrid')
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)只显示网格下三角图形
import palettable
g = sns.pairplot(pd_iris,
hue='class',
palette='Set1',
corner=True#图形显示左下角
)
g.fig.set_size_inches(12,12)
sns.set(font_scale=1.5)图形外观设置
import palettable
g = sns.pairplot(pd_iris,
hue='class',
palette='Set1',
markers=['$\clubsuit,'.','+'],#散点图的marker
plot_kws=dict(s=50, edgecolor="r", linewidth=1),#非对角线上的图marker大小、外框、外框线宽
diag_kws=dict(shade=True)#对角线上核密度图是否填充
)
g.fig.set_size_inches(12,12)
sns.set(font_scale=1.5)
3、seaborn.PairGrid（更灵活的绘制矩阵图）seaborn.PairGrid(data, hue=None, hue_order=None, palette=None, hue_kws=None, vars=None, x_vars=None, y_vars=None, corner=False, diag_sharey=True, height=2.5, aspect=1, layout_pad=0, despine=True, dropna=True, size=None)每个子图绘制同类型的图
g = sns.PairGrid(pd_iris,
hue='class',
palette='husl',)
g = g.map(plt.scatter)#map每个子图绘制一样类型的图
g = g.add_legend()
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)对角线和非对角线分别绘制不同类型图
g = sns.PairGrid(pd_iris,
hue='class',
palette='Set1',)
g = g.map_diag(plt.hist)#对角线绘制直方图
g = g.map_offdiag(plt.scatter)#非对角线绘制散点图
g = g.add_legend()
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)对角线上方、对角线、对角线下方分别绘制不同类型图
g = sns.PairGrid(pd_iris, hue='class',)
g = g.map_upper(sns.scatterplot)
g = g.map_lower(sns.kdeplot, colors="C0")
g = g.map_diag(sns.kdeplot, lw=2)3绘制核密度图
g = g.add_legend()#添加图例
sns.set(style='whitegrid',font_scale=1.5)其它一些参数修改
g = sns.PairGrid(pd_iris, hue='class',
palette='Set1',
hue_kws={"marker": ["^", "s", "D"]},#设置marker
diag_sharey=False,
)
g = g.map_upper(sns.scatterplot,edgecolor="w", s=40)#设置点大小，外框颜色
g = g.map_lower(sns.kdeplot, colors="#01a2d9")#设置下三角图形颜色
g = g.map_diag(sns.kdeplot, lw=3)#对角图形颜色
g = g.add_legend()#添加图例
g.fig.set_size_inches(12,12)
sns.set(style='whitegrid',font_scale=1.5)
参考资料：
本文结束，欢迎随缘关注@

在产品设计初期，你会面临很多选择：

比如在网页中，你是如何选择四网格还是五网格？哪里放视频？哪里放图像？是选择水平滚动还是竖行列表？在导航栏上设计四个还是五个标签？
而画出一个线框图（Wireframe）就可以帮你做出决策。


线框图的定义
画线框图就是从页面结构出发来设计网页的一种方法。
线框图又是什么？

根据usability.gov给出的定义：线框图是页面界面的二维示意图，专门关注内容、可用功能和预期行为的空间分配和优先级排序。

一个网站的线框图案例
简单地说，它是一个页面或屏幕的布局，演示了特定页面或屏幕上将存在哪些元素，可以将其视为一个页面的网页框架。你可能已经注意到在上面的图像中，它们不包括任何颜色、样式或图形，因为它们主要关注的是了解功能、关键元素的位置以及用户将如何与它们交互。
为什么线框图如此重要？
线框图可以节约设计时间！

线框图是在早期设计过程中使用的，所以在线框图阶段进行更改、实现反馈要容易得多，而不是在已有大量视觉元素的最终模型进行更改。

它能助我们展现界面功能，并及早发现问题，在以后节省修改时间。它能将可行性的问题凸显，设计师们倾向于在整个开发过程中（从线框图到原型到最终的可交付成果）测量设计的可用性!

“线框就像设计过程中的蓝图，不应该被忽略，就像你建造房屋没有蓝图一样。”

通过消除颜色、图像和其他细节，我们可以在线框图阶段专注于页面上每个元素的布局和功能。
线框图的类型
两种类型线框图：

Lo-Fi  低保真线框
Hi-Fi  高保真线框

低保真线框通常是粗糙的纸质草图，包括最基本的内容和视觉效果，通常是静态的（非交互式）。



低保真线框图示例（通过墨刀制作）
然而，高保真线框非常详细，并且具有低保真里通常缺少的细节。相对于低保真线框图，高保真线框图耗时多、难上手。



高保真线框图实例（来自墨刀模板，由张贵民制作）
什么时候创建线框图？
一旦你收集了足够的用户动机和目标，线框图就会派上用场。你需要了解你网站的结构，这可通过做一个产品逻辑地图实现。但是，如果你想探索其他可能性，或不同的功能，低保真线框图就起到作用啦。 线框图没有严格的规定或秩序要遵守。
如何创建线框图？
我需要为一个线框软件/工具支付大量的费用吗？不！相信我，在大多情况下，笔和纸的线框都能很好地工作。它们和数字线框一样快速有效。草图可以传达想法，并且可以轻松理解流程/结构。
如果你试图决定使用哪种类型的线框工具，除了草图和纸质线框图，你也可以用在线工具来创建它们。作为一款在线的原型设计和协作工具，墨刀可以让设计零基础的人轻松画出产品线框图，它提供多种线框图组件（矩形、线条、文字输入框等），可直接拖拽组件到画布。便于进行可行性测试，提高产品设计效率。
线框图确实是UX过程的重要组成部分。 这个过程不仅能够确保我们的团队在同一进程上 - 而且还允许我与目标用户群体一起进行测试，在深入潜入视觉设计之前尽早收集反馈。
想让你的线框图更方便、更轻松地将想法传达给团队，以及考虑到设计实施时情况，那就开始制作线框图吧！
本文由转载自墨刀编译自 Parveen Yadav 的 Wireframes in UX Design — What, Why, When and How?
墨刀作为一款在线原型设计与协同工具，已经帮助众多产品经理和设计师们轻松做出交互原型，展现和验证设计想法，还支持多人协作编辑，分享和评论。新注册用户即可获得墨刀高级企业版的15天免费试用！开始体验一下吧！