网站界面(UI)设计形考作业5（实训9）参考答案

实训9向上或向下适配（必做）实训目的通过输出不同倍率的素材，适配采用不同分辨率屏幕的设备，以获得最好的浏览效果。实训内容分别针对iOS系统和Android系统的特点，完成向上或向下适配设备的操作。教师指导2学时，学生课后练习4学时以上需完成iOS系统App3种适配元素输出；Android系统App5种适配元素输出，如下图。实训要求♦俣簿访问，下或♦实训要求♦俣簿访问，下或♦■g・33D?!•♦BlBk._卡箔冬(GO♦■CreativeOoudR*AOneOnveQ司埠空间J3Da»®Fi£文也4下,/昭■AX1(g)一«W»g)_JCTi(F;)_十iB里(G)_«g7fa(j：)_*»S(GO-0s三发5)♦N«two«ki5e<«■aHi1ailJW-lpngi茶而lOh.pog?WHO3x.pn9aH.1•J,I⑭Kh1陟n?^2©2x.pr^I茶评2。2M奈普2033Agl茶彳•ZSx.p”茶译3«pcg.HdID■砂wlr^*302x.pog茶*3©3x.呻（茶评行评4.png茶部4png茶濡4Q2x.pngfa|⑭⑭茶讦茶讦333^95^-4Q3x.pngqb回遂8i?-HP2x-pn9茶仲•5O3)cpngSHpng51s@8png参维@3中”春茶.png彝苓Q2x_pngM获@3xpngStXlft-png优EG123nsJ氏EC3x.png广告.pngHHf*ft<^2v.pngffH7pngy金讦O.png及Q金杆6“ng金好1.p«g步骤简述:1手机屏幕的尺寸相同，如果屏幕的分辨率越大，那么图片显示的就会越小，因为屏幕的像素越大，那么图片在屏幕中占据的空间比例也就越小。2手机的分辨率相同，如果屏幕的尺寸越大，那么图片显示的就会越大。所以，为了保证在不同的机型下，实现相同的显示效果，需要综合这两个因素，即屏幕密度的概念。先了解一下ppi及dpi的概念：dpi是dotperinch,每英寸多少点，ppi是pixelperinch,每英寸像素数，针对显示器的设计时，dpi=ppi（ppi表示显示设备的点密度，dpi表示印刷品点密度）这样，我们就可以选取一个基准的ppi,然后通过比例计算出目标设备需要显示实际像素点,以保证物理尺寸的一致，在Android系统中有一个根据dpi转换的单位dp（独立设备像素），Idp表示在屏幕点密度为160ppi时lpx长度，dp与px的转换公式为px=dp*（ppi/160）通过这样转换，我们即可保证在不同的设备上，实现相同的显示效果。对于ios系统而言，我了解的不多，通过在网上查看一些相关的知识，在此稍作总结:在ios中也存在一个抽象的表示尺寸的概念，即点，只不过由于ios的设备差距不是特别大,不需要像android那样通过ppi进行转换计算，同时，4、4s、5、5s、6的ppi都是相同的,虽然宽度及高度有所变化，但是对于图片影响不大，只是布局的及布局的宽高需要处理，但是对于6P而言，它的ppi与之前的设备不同，如果使用同一张图的话，图片显示会变小，所以需要为6p需要更大尺寸的图片。同时在6及6P上，有一个displayzoom的概念，即放大显示，在displayzoom的模式下,6会显示5s尺寸的布局，而6P会显示6尺寸的布局，这样会相当于减少了画布的大小，从而达到放大显示的目的，但是这样会造成出来的图像失真。.客户端的设计原则1）手机本身的物理特性受限引起的指南:a）客户端的文字输入，必须要降到最低：由于手机在输入上的低效性，在设计的过程中,应尽量减少用户的输入，如果有可能可以设置默认值，或者让用户选择目标值。b）客户端的信息结构好，屏与屏之间的逻辑关系清晰：由于手机屏幕都普遍较小，即使有4时屏，那也只能展示较少的信息量，因此，在手机设计上，更需要有清晰的信息架构，用户知道当前在哪儿，并能返回到哪儿。c）客户端的操作、功能不要隐藏太深，重要功能都需要在界面中有适当的提示：由于手机屏幕较小，不能展示所有的信息。因此，对重要的、使用频率高的功能或信息放在最重要的位置，并在首页上展示或指示。2）手机的移动特性引起的指南:a）客户端的最主要的功能操作，用单手可以完成：手机的使用情景多样性，在很多情景下,用户都只能单手来操作手机，因此，在客户端的设计过程中，需要考虑最重要的核心功能，能否单手操作完成。b）客户端的界面必须简洁、操作简单，操作步骤少：由于用户操作情景复杂，在使用客户端的过程可能有额外的认知负荷，因此，在设计客户端的过程中，逻辑必须简单，操作步骤也要减少。c）客户端的界面层次不要太深，最好不要超过3级:d）客户端的提示包括界面、声音、振动多种形式：用户在操作手机时，往往不会一直盯着手机屏幕看，因此，很多手机状态页面的切换，脱离了用户的视线，这时，必须要提供视觉之外的其他感觉通道的信息（如听觉、触觉等），来对用户做提示。3）其他原则a）客户端UI的适配不必恪守所有的平台都保持一致，只要一些品牌的关键元素能体现即可:b）客户端的主要操作方式（框架、导航、按键功能及软键对应方式等）应与所承载的手机操作系统保持一致：客户端都承载在某款具体的手机平台中，而用户会对当前的手机平台很熟悉，因此，在设计的过程中，需要更好地理解当前的手机平台，并使客户端的设计与手机系统的设计逻辑保持一致。.手机客户端设计适配的步骤:个人认为，客户端的适配要以一个平台为起始，但是要着眼于多个平台。1）根据公司的战略，选择一个最先切入的平台;2）了解该平台的UI设计规范，可用的UI控件及交互原则;3）确定切入的屏幕大小，以此来设计第一个客户端，但是要考虑适配其他屏幕的可能性,是自适应来扩展或者缩小；4）根据平台及屏幕大小，来选择一款最典型的手机，开始客户端的交互设计。5）确定客户端的核心目的。如为娱乐为主的，应在设计方式更娱乐性；功能性完成目的为主的，以更易用性为主；6）根据客户端的功能和内容，来设计客户端的信息架构;7）根据UCD的原则，来完成客户端的交互原型；在交互原型的过程中，需要考虑手机适配的三因素（平台、屏幕、触摸/非触摸），以便将来的适配。移动设备客户端交互适配设计屏幕大小随着各个手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上迁移。然而手机与PC不一样，PC经过了多年的发展，在设计上形成了很多不成文的规则，如网页的宽度都在960Px左右【当然，由于整体的电脑屏