ui界面模板（如何选择UI 界面布局样式）

本文目录

• 如何选择UI 界面布局样式
• UI界面与模板尺寸不一样怎么办
• 如何用高级UI制作触摸系统界面
• 如何制作Asp.Net界面模板
• UI设计界面的视觉一致性和简易性分享，快来看看！

如何选择UI 界面布局样式

从七个方面说明UI界面应注意的一些常见的问题。
一、空间的摆放一致。
二、UI布局尽量符合格式塔原理中的接近性，即相互靠近的控件看起来尽量使一组。
三、用结构来提高用户浏览长数字的能力，比如关于金额的表示，一般为2,548,125.00元，其中的“，”符号的分割，方便用户清晰快速的读取。
四、构建清晰的视觉层次：用尺寸大小、显著程度和内容关联对页面内容进行组织排序。方便用户看，无形中提高用户体验。
五、支持，而不是干扰阅读。识别越容易，阅读也就越快、越容易。
1）避免一些难辨认的字体，如带图案的背景或所有问题都居中对齐等
2）使用直白的、用户的语言
3）将界面设计出层次感
六、让错误提醒信息易见，
让错误信息易见的常用方法是：放在用户所看的位置上，标记出错误。使用错误“X”“！”等错误符号，保留红色以呈现错误
七、为促进用户使用，系统提供低风险环境
1）尽可能防止出错（最常见就是让不可点击的按钮灰掉）
2）向用户清晰展示他们做了什么（比如，不小心删了一段文字），这样错误就容易被用户及时发现。
3）让用户能够轻松地撤销、反转或修正错误。

UI界面与模板尺寸不一样怎么办

UI界面与模板尺寸不一样的解决方法：将图标与上图的模板居中对齐，然后中心不动，放大图标使之图标依次碰到三种形状的边界，填充最满的那个形状的尺寸。
用户界面(UserInterface)是指对软件的人机交互、操作逻辑、界面美观的整体设计。

如何用高级UI制作触摸系统界面

第一步，打开2.0制作工具

第二步，在button文件夹中新建一个“触摸系统”文件夹，并将拆分后需要用作按钮的图片放入此文件夹中。

第三步，将高级UI所需图片及立绘放入other文件夹中。

第四步，点击工具栏中的“设置”项，切换到“图片选项”页面，在空白编号内添加按钮信息后，点击“确认”按钮。

第五步，点击工具栏“高级UI”，新建一个高级UI界面，命名为“触摸系统”，点击“”进入页面。

第六步，点击“添加组件”-“图片”-“使用指定路径图片”导入背景图，点击“确认”。

第七步，点击“添加组件”-“图片”-“使用字符串指定图片”，选择一个空白字符串，命名为“触摸人物图片”。

第八步，点击“界面生成事件”-“字符串”添加字符串命令，输入图片名称，包括后缀扩展名，点击“确认”。

第九步，点击“添加组件”-“图片”，导入立绘图片，由于立绘图片是通过字符串指定的，暂时不可见，所以这里添加了一个临时图片作为参考。

第十步，点击“添加组件”-“按钮”，将头和胸的按钮导入，点击“确认”，拖到对应位置。

第十一步，选择“触摸-头”按钮，点击右键“”-“按钮点击事件”，添加语音、音效等，点击“确认”。

第十二步，选择“触摸-胸”，操作和上一步一致，如果要改变立绘图片，则添加字符串命令，将字符串内容修改为想要的图片名称，点击“确认”完成操作。

第十三步，点击“添加组件”-“按钮”，添加返回按钮。

第十四步，在“返回”按钮的“按钮点击事件”中，添加命令“返回界面”，并将按钮拖动到合适的位置。

第十五步，确认触摸按钮与立绘按钮位置相对应后，删除参考立绘。最后的模板如下图所示。

如何制作Asp.Net界面模板

　　 一 基础知识

　　C:\Program Files\Microsoft Visual Studio NET \VC#\DesignerTemplates\

　　其下的NewWebFormCode cs文件是默认的新Asp Net页面的后台代码文件;

　　C:\Program Files\Microsoft Visual Studio NET \VC#\VC#Wizards\CSharpAddWebFormWiz

　　其下的\Scripts\ \default js文件定义了基本的针对* aspx页面的脚本操作;

　　其下的\Templates\ \WebForm aspx文件定义新Asp Net页面的* aspx文件;

　　其下的\Templates\ \Templates inf文件指向了WebForm aspx文件;

　　C:\Program Files\Microsoft Visual Studio NET \VC#\CSharpProjectItems\WebProjectItems\UI

　　其下的ui vsdir文件定义了模板向导的基本信息;

　　 二 制作过程  

　　建立VC#文件夹 其内部结构如下:

　　VC#\CSharpProjectItems \WebProjectItems\Itabby界面模板\

　　ItabbyAddCommonFormWiz vsz 内容如下

　　VSWIZARD                                                   Wizard=VsWizard VsWizardEngine                                                   Param= WIZARD_NAME = ItabbyAddCommonFormWiz                                                   Param= WIZARD_UI = FALSE                                                   Param= PROJECT_TYPE = CSPROJ                                 

　　ui vsdir 内容如下

　　ItabbyAddCommonFormWiz vsz|{FAE EC F d BF B C F EFBC}|Itabby通用模板| |# |{FAE EC F d BF B C F EFBC}| | |ItabbyCommonForm aspx

　　VC#\DesignerTemplates\ \

　　NewWebFormCode cs 修改微软NewWebFormCode cs而成

　　VC#\VC#Wizards\ItabbyAddCommonFormWiz\Scripts\ \

　　default js 修改微软default js而成

　　VC#\VC#Wizards\ItabbyAddCommonFormWiz\Templates\ \

　　ItabbyWebForm aspx 修改微软WebForm aspx而成

　　Templates inf               内容如下

　　ItabbyWebForm aspx

　　 三 分析说明

　　CSharpProjectItems                    webProjectItems                          Itabby界面模板                                   ItabbyAddCommonFormWiz vsz                                   内容:                                   VSWIZARD                                    Wizard=VsWizard VsWizardEngine                                    Param= WIZARD_NAME = ItabbyAddCommonFormWiz                                    Param= WIZARD_UI = FALSE                                    Param= PROJECT_TYPE = CSPROJ                                    说明:上述代码修改自微软:\CSharpProjectItems\WCSharpAddWebFormWiz vsz中:                                   VSWIZARD                                    Wizard=VsWizard VsWizardEngine                                    Param= WIZARD_NAME = CSharpAddWebFormWiz                                    Param= WIZARD_UI = FALSE                                    Param= PROJECT_TYPE = CSPROJ                         ui vsdir                        内容:                        ItabbyAddCommonFormWiz vsz|{FAE EC F d BF B C F EFBC}|Itabby通用模板| |# |{FAE EC F d BF B C F EFBC}| | |ItabbyCommonForm aspx                        说明:                        上述代码修改自微软:\CSharpProjectItems\WebProjectItems\UI\ui vsdir中:                       \ \CSharpAddWebFormWiz vsz|{FAE EC F d BF B C F EFBC}|# | |# |{FAE EC F d BF B C F EFBC}| | |WebForm aspx        DesignerTemplates                                           NewWebFormCode cs                         内容:                         $NAMESPACE$        //微软自动处理                         $CLASSNAME$        //微软自动处理        VC#Wizards                  ItabbyAddCommonFormWiz                             Scripts                                                                                        default js                                                内容:

　　// (c) Microsoft Corporation  function AddDefaultServerScriptToWizard(selProj)  {   wizard AddSymbol( DEFAULT_SERVER_SCRIPT JavaScript );  }

　　function AddDefaultClientScriptToWizard(selProj)  {      var prjScriptLang = selProj Properties( DefaultClientScript ) Value;      // = JScript      // = VBScript      if(prjScriptLang == )      {   wizard AddSymbol( DEFAULT_CLIENT_SCRIPT JavaScript );      }      else      {   wizard AddSymbol( DEFAULT_CLIENT_SCRIPT VBScript );      }  }

　　function AddDefaultDefaultHTMLPageLayoutToWizard(selProj)  {      var prjPageLayout = selProj Properties( DefaultHTMLPageLayout ) Value;      // = FlowLayout      // = GridLayout      if(prjPageLayout == )      {   wizard AddSymbol( DEFAULT_HTML_LAYOUT FlowLayout );      }      else      {   wizard AddSymbol( DEFAULT_HTML_LAYOUT GridLayout );      }  }

　　function OnFinish(selProj selObj)  {      var oldSuppressUIValue = true;   try   {    oldSuppressUIValue = dte SuppressUI;    var strProjectName = wizard FindSymbol( PROJECT_NAME );    var strSafeProjectName = CreateSafeName(strProjectName);    wizard AddSymbol( SAFE_PROJECT_NAME strSafeProjectName);    SetTargetFullPath(selObj);    var strProjectPath  = wizard FindSymbol( TARGET_FULLPATH );    var strTemplatePath  = wizard FindSymbol( TEMPLATES_PATH );

　　//用户自定义代码开始    var strPaths = strProjectPath split( \\ );                  var curResPath = ;    var bFindModules = false;    for(index = strPaths length ;index》= ;index )    {     if(strPaths== modules )     {      bFindModules = true;      break;     }     curResPath += / ;    }    if(bFindModules==false)     curResPath = ;    var curJsPath = curResPath + Jscript/mon js ;    var curCssPath = curResPath + style/mon css ;    var curImgPath = curResPath + images     var curctlPath = curResPath + Jscript/controlpanel js         wizard AddSymbol( ITABBY_JS_SRC curJsPath);    wizard AddSymbol( ITABBY_CSS_SRC curCssPath);    wizard AddSymbol( ITABBY_IMG_SRC curImgPath);    wizard AddSymbol( ITABBY_CTL_SRC curctlPath);    //用户自定义代码结束

　　var strTpl = ;    var strName = ;    var InfFile = CreateInfFile();        // add the default project props for the aspx file before we    // render it    AddDefaultServerScriptToWizard(selProj);    AddDefaultClientScriptToWizard(selProj);    AddDefaultTargetSchemaToWizard(selProj);    AddDefaultDefaultHTMLPageLayoutToWizard(selProj);    // render our file    AddFilesToCSharpProject(selObj strProjectName strProjectPath InfFile true);    AddReferencesForWebForm(selProj);   }   catch(e)   {    if( e description length 》 )     SetErrorInfo(e);    return e number;   }      finally      {    dte SuppressUI = oldSuppressUIValue;    if( InfFile )     InfFile Delete();      }  }

　　function SetFileProperties(oFileItem strFileName)  {      if(strFileName == WebForm aspx )      {   oFileItem Properties( SubType ) Value = Form ;      }  }

　　说明:上述修改自微软:\VC#\VC#Wizards\CSharpAddWebFormWiz\Scripts\ \default js

　　Templates                                         ItabbyWebForm aspx                       内容:  《%@ Page language= c# Codebehind= $FILENAME$ cs AutoEventWireup= false Inherits= $INHERITS$ %》//微软自动处理  《!DOCTYPE HTML PUBLIC //W C//DTD HTML Transitional//EN 》  《》    《head》      《title》平纹科技《/title》      《meta content= Microsoft Visual Studio NET name= GENERATOR 》      《meta content= C# name= CODE_LANGUAGE 》      《meta content= JavaScript name= vs_defaultClientScript 》      《meta content= name= vs_targetSchema 》      《meta content= 平纹公司 科技服务生活 信息创造价值 name= keywords 》      《META equiv= Content Type content= text/; charset=gb 》      《meta name=vs_defaultClientScript content= 》《/script》                              //用户自定义变量    《/head》            

　　Templates inf                 内容:                 ItabbyWebForm aspx                 说明 上述代码修改自微软:VC#Wizards\CSharpAddWebFormWiz\Templates\ \Templates inf:                 WebForm aspx

　　 四 模板内容

　　模板的定制主要以修改\VC#\VC#Wizards\ItabbyAddCommonFormWiz\Templates\ ItabbyWebForm aspx和修改VC#\DesignerTemplates\ \NewWebFormCode cs为主 实现不同的界面风格和代码逻辑

　　\VC#\VC#Wizards\ItabbyAddCommonFormWiz\Scripts\ \default js主要实现与aspx页面的交互 如相对路径的制定 自动替换等操作;

UI设计界面的视觉一致性和简易性分享，快来看看！

视觉一致性

UI视觉设计中最重要的原则就是一致性原则，具体的表示是为用户提供一个风格统一的界面， 这意味着用户可以花更少的时间在操作学习上，因为他们可以将自己从操作一个界面中的经验直接移植到另外一个界面上，使得整个UI体验更加流畅。

在为应用程序设计界面之前， 设计师首先会对界面的风格进行定义，而定义会以应用程序的市场定位、 功能特点等因素来决定，完成风格的定位之后，就会开始着手设计一些单个的界面元素， 而这些界面元素也就是组成完整界面的个体。

在设计界面元素时， 要把握好外形、 材质、 颜色等方面的问题，力求整套界面元素都是统一的网络，完成界面元素的创作后，再将这些元素具体应用到每个界面中，组成一个完整的界面，采用的都是同种风格，界面达到了一致性，有系列感，给用户统一的感觉。

视觉简易性

当在设计某个应用程序界面时，如果要为界面添加一个新的功能或者界面元素，先问问自己，用户真的需要这些吗? 这样的设计是否会得到重视?而自己在考虑添加新元素的时候， 是不是出于自我喜好而添加的?

值得注意的是， 设计中一定不要让UI设计出太多的风头，而削弱了程序本身的功能，要将视觉设计与功能相互平衡， 寻求一个最佳的点， 在体现出UI视觉设计的特点和风格的同时， 简单而直观地展示出程序的功能。

以上就是青藤小编关于UI设计界面的视觉一致性和简易性的相关内容的分享，希望对大家有所帮助，想要了解更多相关内容，欢迎大家及时在本平台进行查看哦!