Case1(Iflengthofvalueofwidgetｙisgreaterthan"10"):
Sety1stateto２
Case2(ElseIfTrue):
Sety1stateto１
Case3(Iftextonwidgetｙequals"tianlina"):
Sety1stateto重复名键入，不超过10位2ｍOnKeyUp:
Case1(Iflengthofvalueofwidgetｍislessthan"6"):
Setm1stateto2
Setm1stateto1至少六位3ｑOnKeyUp:
Case1(Iftextonwidgetｑdoesnotequaltextonwidgetｍ):
Setq1stateto2
Setq1stateto1密码应该一致4OnClick:
Case1(Iflengthofvalueofwidgetｙislessorequals"10"andlengthofvalueofwidgetｍisgreaterorequals"6"andtextonwidgetｑequalstextonwidgetｍ):
Open注册成功inCurrentWindow
Set２statetoState1成功即跳转页面，失败显示“错误”2)可折叠版面问题：用户在查看信息或功能时，只需查看某一部分的信息。例如网站中”最新的widget”列表，用户只需要查看最新关于新闻的widget。解决：制作成点击后可迅速打开或折叠的面板，通过折叠区域分类储藏信息。应用：“添加内容”板块，有三个种类可选择，“分类添加”、“最重要的添加”、“下载添加”。利用可折叠版面，在查看其中一个项目时，隐藏其它的项目。当切换到“分类浏览”版面时，隐藏其余版块。可折叠版面可以使几种内容相互切换，而不需占用空间。折叠区域分类储藏信息，隐藏不必要的信息。不仅可以帮助用户快速找到自己想要的信息，而且可以保持界面的整洁。设计原因：由于分类信息较多，如此设计可以节省网页空间，美观。设计成果图：图6-9图6-9添加内容版块设计源代码：表6-2表6-2“添加内容”可折叠版面的交互设计footnotelabelinteractionspecification1OnClick:
Case1:
Set添加内容1stateto分类
Hide分类panel右边跳转至分类状态2OnClick:
Set添加内容1stateto重要跳转至“最重要的``状态3OnClick:
Set添加内容1stateto下载
Hide下载等待右侧跳转状态3)自动填充问题：用户在选择某个名称，如人名，地名时，需要输入他们的完整名称。但往往由于信息量过大，用户会时常忘记此类名称。因此在输入的时候可能时常出错，甚至会由于遗忘而带来苦恼。解决：根据用户输入的内容，显示与用户输入的内容相匹配的建议列表。同时根据用户继续输入的内容继续缩小或者扩大建议列表。便可避免用户输入错误，并可以让用户更快更方便的找到所要的名称。应用：在联系人版块，用户可自行输入名称搜索联系人，但由于每个用户都可能存在多个联系人，所以应想法尽可能的减少用户的记忆负担。利用自动填充功能，可以进行关键字匹配，如输入“李”，自动匹配李姓联系人的名字，由此引导和提示用户需要的信息，协助用户记忆。设计原因：便于帮助用户查找信息，帮助其记忆。设计成果图：图6-10图6-10搜索联系人版块设计源代码：表6-3、表6-4、表6-5表6-3自动填充设计1footnotelabelinteractionspecification11OnKeyUp:
Case1(Iftextonwidget1equals"李"):
Set2stateto2
Case2(ElseIftextonwidget1equals"李小"):
Set2stateto3
Case3(ElseIftextonwidget1doesnotequal"李"):
Set2stateto1
OnFocus:
OnLostFocus:
Set2stateto1键入李、或李小、或非”李“人名，自动填充表6-4自动填充设计2footnotelabelinteraction1m1OnChange:
Case1(Ifselectedoptionofm1equals"李安"):
Settextonwidget1equaltoselectedoptionofm1
Case1(ElseIfselectedoptionofm1equals"李雪"):
Case1(ElseIfselectedoptionofm1equals"李玉"):
Case1(ElseIfselectedoptionofm1equals"李小龙"):
Case1(ElseIfselectedoptionofm1equals"李大鎏"):
Case1(ElseIfselectedoptionofm1equals"李小琳"):
Case1(ElseIfselectedoptionofm1equals"李小双"):
Settextonwidget1equaltoselectedoptionofm1表6-5自动填充设计3footnotelabelinteraction1m2OnChange:
Case1(Ifselectedoptionofm2equals"李小琳"):
Settextonwidget1equaltoselectedoptionofm2
Case1(ElseIfselectedoptionofm2equals"李小双"):
Case1(ElseIfselectedoptionofm2equals"李小龙"):
HidePanel2OnClick:
SetvalueofvariableOnLoadVariableequaltotextonwidget页面名称andtextonwidget新增tabequalto"[[OnLoadVariable]]"
Set第四个stateto新增,页签stateto其他
Hide灯箱添加一个新页签3OnClick:
Set大图statetoState12OnClick:
Set大图stateto23OnClick:
Set大图stateto34OnClick:
Set大图stateto45OnClick:
Set大图stateto56）直接编辑问题：用户想要在页面上直接编辑某轻量级的文字，而不需要切换页面。在可读的地方，直接写入，即编辑。解决：让用户不切换页面，也不需要弹出窗口，直接在当前页面需要编辑的地方点击编辑，并保存或者取消。应用：在页面标题处，点击原来标题，即可进行修改，在可点的地方即可编辑。设计原因：标题更改对用户来讲是一次很平常的事情，因此不应该过于程序复杂，直接编辑便于用户的多次更改。设计成果图：图6-13图6-13编辑标题设计源代码：表6-8表6-8直接编辑的交互设计FootnoteLabelInteractions1编辑了OnKeyUp:
SetvalueofvariableOnLoadVariableequaltotextonwidget编辑了andtextonwidget标题了equalto"[[OnLoadVariable]]"
Set空间标题stateto标题7)页签问题：用户需要在所有信息中找到自己想要的那一种类的信息。解决：横或纵向排布页签，页签下的模块内容随着页签的不同而改变，在不切换页面的前提下分类查看用户所需的信息。当前选定的类别应该区别于其他页签。可以用对比鲜明的颜色，形状，大小或字体。最好是建立必要的对比，尤其是为每个页签命不同的名称。应用：本网站主要的应用便是页签。网站属于个人门户网站，通过页签用户可以方便自由添加版块。用户可以对自己添加的内容进行分类，便于日后分类查看，个人门户将会拥有各种不一样的信息，用户可随时添加或删除页签。设计原因：个人门户网站的用户往往是无规律的添加各式的内容，特别需要页签进行分类导航。而且他们上网总是会进入个人门户去浏览信息，希望一站式解决一切网络生活。因此，他们不希望网页经常跳动影响他们的使用。设计成果图：图6-14图6-14页签设计源代码：表6-9表6-9页签切换操作的交互设计FootnoteLabelInteractionsSpecification1OnClick: