首頁

大屏時代，如何做好電視端交互設計？

藍藍設計的小編

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里


在前不久，藍藍參觀了中國國際廣播展覽會，這個中國廣電大伽云集的展會上，許多企業(yè)都在播放智能電視端，我拍了一些，做為以后設計的參考，同時也在收集大屏電視設計的資料。

以下為藍藍設計收集的文章之一，這篇文章的好處是總結了硬件交互的特點和各種電視上常見的表現(xiàn)方式，并配以圖片說明，雖然對于專業(yè)的設計師而言，tab/磁貼/列表/滑動換換幻燈片式等都是常見的方式，本能直觀就會做出選擇，也不會僅限于此，但對非從業(yè)者來講，這樣列有概括啟蒙的作用，各個例子取的很全。



- 硬件+遠距離操控——基本交互 -


基于桌面資料研究以及設計經(jīng)驗，總結了基本交互主要包含以下幾個關鍵內(nèi)容：遙控器輸入、導航和菜單、信息展現(xiàn)、控件擺放和焦點狀態(tài)。


一 、遙控器輸入


當我們用手指快速便捷地在手機屏幕上點擊或滑動時，主流電視大屏及應用的操作還是：使用遙控器進行操作。而市面上不同電視生產(chǎn)商生產(chǎn)的遙控器也有著不同的造型和按鍵數(shù)量，如圖1，分別展示了：蘋果、谷歌、小米、樂視和中興機頂盒的遙控器。

1.jpg


圖1 不同廠商的遙控器

 

盡管有著千奇百怪的造型和按鍵數(shù)量，但幾乎全部的遙控器都有幾個相同的按鍵：上、下、左、右、返回鍵和OK鍵，如圖2。它們也夠成了遙控器輸入的基本交互方式：通過“上下左右鍵”移動焦點位置，選中界面元素，按“OK鍵”進行相關操作，按“返回鍵”返回。


2.jpg
圖2 遙控器的基本按鍵


而上圖中還有一些按鍵，如數(shù)字鍵、菜單鍵，有些遙控器是沒有它們的。這里強調(diào)下“菜單鍵”，比如之前的一個設計，將不常用的操作隱藏到菜單鍵中，當用戶按菜單鍵時再喚出操作（如安卓端的“長按”，iOS端的“左滑”等）。后來，才發(fā)現(xiàn)并不是所有遙控器都有該按鍵，只能在后續(xù)版本中迭代優(yōu)化。因此，在設計之前，不妨研究一下你的輸入硬件設備，避免因“刻板印象”造成不必要的坑。


遙控器輸入的特性決定了用戶在輸入時的效率和便捷程度都大打折扣，因此，在這樣的局限下，設計師只能通過各種不同的方式來盡量減弱這種不便捷：


1. 減少用戶輸入

能不讓用戶輸入就不輸入，盡量只讓用戶去做“選擇型”輸入，避免大量“文字型”輸入，比如電視上的搜索功能中，及時聯(lián)想、熱搜詞就變得極為重要，如圖3右圖所示。

3.jpg


圖3 鍵盤輸入的優(yōu)化


2. 優(yōu)化輸入模式

結合項目情況，去嘗試優(yōu)化輸入模式，比如充分利用遙控器數(shù)字鍵輸入、重新設計鍵盤以減少用戶操作，如圖3所示。


3. 將輸入轉(zhuǎn)移

越來越多的產(chǎn)品開始將一些輸入轉(zhuǎn)移并引導到手機端進行操作，甚至將手機端直接做為遙控器，比如最常見的掃碼登錄和TV助手類APP。輸入轉(zhuǎn)移能大大提升用戶操作效率，但設計時還是要結合具體場景，避免用戶過多地在手機和遙控器間切換。


4. 創(chuàng)新的輸入方式

隨著各種技術的發(fā)展，在未來，電視端也會有越來越多的輸入方式，而不僅限于遙控器輸入，如智能語音輸入，而我們也需要了解這些新技術，才能幫助我們不斷的創(chuàng)新并給用戶帶來優(yōu)秀的體驗。


二、導航和菜單


電視端的導航和菜單大多數(shù)和手機端、PC端是類似的，但因遙控器輸入的特性或多或少的有些差異，主要分為以下幾類：


1. 十字

十字導航在國內(nèi)的產(chǎn)品中比較少見，但因它的主導航和二級導航同時展開，能與十字方向鍵完美契合，用戶可通過方向鍵在主導航和二級導航之間以最的方式切換，如圖4所示。但它最多展現(xiàn)2級菜單，即縱向菜單和橫向菜單，又浪費了大量界面空白，因此針對國內(nèi)大而全的產(chǎn)品而言，往往不是特別適用。


4.jpg

圖4 十字導航


2. 磁貼

磁貼廣泛應用于各種電視應用產(chǎn)品，一般包含主導航和二級磁貼，往往二級磁貼的展現(xiàn)能使信息更加扁平、直觀及可視化，且相比于十字導航，操作的方向不會受到限制；但往往焦點從磁貼移回到左側/上側導航需要更多的操作成本，如圖5所示。磁貼的信息展現(xiàn)能夠充分利用界面空間，并把信息前置，因此，對很多內(nèi)容型產(chǎn)品而言，磁貼可以很好的適用內(nèi)容露出，吸引用戶進入。


5.jpg
圖5 磁貼信息展示


3. Tab

廣泛應用于手機端和PC端，當然在電視端中也經(jīng)常使用，往往起到一級導航的作用，在告知用戶所處位置的同時，很好的引導用戶進行模塊間的切換，如圖6所示。然而，Tab導航也有一些基本的設計要求，比如盡量不使用多層Tab套用，即使不得已套用也需盡量保證表現(xiàn)形式不同；另外，在“焦點”的章節(jié)，也還會提到Tab切換時的加載問題。


6.jpg
圖6 Tab導航


4. 列表

列表也是手機端最常用的菜單展現(xiàn)形式，在電視端同樣適用，如電視直播類產(chǎn)品，主功能就利用了多層列表套用的展現(xiàn)形式，詳見圖7所示。而在電視端，列表的樣式也是多種多樣的：如純文字列表（可配按鈕）、圖文列表（可配按鈕）、展示型列表（不可操作）、橫向列表（選集列表）等。


7.jpg

圖7 圖文列表和展示型列表


5. 其他

電視產(chǎn)品上最常用的菜單和導航模式一般都可以總結為以上4種，當然還有一些其他的方式。隨著用戶多設備的使用，越來越多的手機端和PC端的設計模式開始在電視上出現(xiàn)；而更多的產(chǎn)品界面因其復雜的功能無法只使用1種菜單和導航模式，往往是混合型設計，如圖8所示。不過，無論使用何種導航和菜單類型，電視大屏幕的菜單和導航的設計目標終歸是：用戶可以快速定位，并且能夠預測出操作結果。因此，靈活使用導航和菜單，使用戶不會迷失在功能繁多的界面信息中就尤為重要。


8.jpg
圖8 其他類型的導航和菜單


三、信息展現(xiàn)


在前面的文字中，我在“電視”這個詞后面都緊跟了“大屏”這個詞，電視的屏幕是比PC還要大的屏幕；而用戶也因為如此大的屏幕，往往是坐在兩三米之外。因此，電視端的信息設計有著兩個顯著的特質(zhì)：為大屏幕而設計和為遠距離而設計，有著以下幾個注意事項：


1. 重視信息的識別性和簡潔易懂

文字、圖標和按鈕，乃至toast提示，在電視端的識別性問題比手機和PC端更為凸顯。因為遠距離、大屏幕，加上電視本身的休閑屬性，使得用戶的注意力較為分散，因此，界面中的信息和元素就需要適當放大，至少保證用戶能夠在兩三米之外能清晰看到，如圖9所示。


9.jpg
圖9 信息識別案例


2. 提前露出信息和多露出點信息

在“遙控器輸入”章節(jié)中有提到，提前露出信息能夠在一定程度上減少用戶輸入，并在產(chǎn)品層面吸引用戶進入。不過，和手機端設計類似，還是需要甄別哪些信息需要提前露出、怎么露出以及露出信息后對產(chǎn)品穩(wěn)定性和性能的影響；這些都需要基于產(chǎn)品特點，并與產(chǎn)品、視覺和開發(fā)共同協(xié)商確定。而“多露出點信息”卻相對容易理解，主要是告知用戶右邊/下邊“還有一些內(nèi)容，快去看看”，如圖10所示。


10.jpg
圖10 信息露出案例


3. 避免過多無模塊信息的展示

相比于手機端，因屏幕較大，與PC端類似，往往需將屏幕劃分為多個排列整齊的小屏幕來進行設計，即模塊化、區(qū)域化的設計信息展現(xiàn)。通過這種方式，可以使信息布局更為規(guī)整，用戶不容易迷失在繁雜的信息中，如圖11所示。


11.jpg
圖11 信息模塊化案例


四、控件位置


控件的位置問題是初期開始電視產(chǎn)品設計時非常容易犯的錯誤，如圖12所示。左圖中的“添加股票”按鈕，當已添加的股票過多時，可能會看不到該按鈕，或需用戶按很多下才能使焦點移動到“添加股票”；右圖中的文字瀏覽，完全不知道如何瀏覽，也不知道如何將焦點從文字移動到“查看票種”按鈕。這兩個案例闡述了：按鈕的位置導致按鈕丟失或操作效率較低；電視端文字閱讀也得遵守焦點瀏覽原則，如每行1個焦點或整篇1個焦點，若是后者，就得保證可見范圍內(nèi)文字已展示全。因此，在電視大屏中放置交互控件，需充分考慮是否符合電視端的使用方式以及用戶的操作效率。


12.jpg
圖12 控件位置案例


五、焦點狀態(tài)


前文提到過很多次的“焦點”，它其實是電視大屏用戶體驗的第一要素，而在交互說明中最常出現(xiàn)的也是“焦點怎么樣了”。無論是交互還是視覺，在初期接觸電視產(chǎn)品設計時，可能都會因為“焦點”的設計失誤引發(fā)用戶體驗問題，比如：焦點的移動順序不一致（從哪里來未回到哪里去，焦點在界面中亂跳）使用戶認知錯亂；焦點的不夠醒目或樣式不統(tǒng)一使用戶無法找到焦點等，如圖13所示。


13.jpg
圖13 不統(tǒng)一的焦點樣式


電視端焦點也是有著各種不同的狀態(tài)的，如圖14所示，“焦點狀態(tài)”一般采用“描邊、放大、高亮等”方式使其明顯，而“按下狀態(tài)”可能不一定有，或者是和其他幾個狀態(tài)相同。


14.jpg
圖14 焦點狀態(tài)種類


可能需要簡單講述一下“標記狀態(tài)”和“半選中狀態(tài)”：“標記狀態(tài)”在PC和手機端也非常常見，比如告知用戶所在位置在哪里的Tab標記；而“半選中狀態(tài)”是“焦點狀態(tài)”的一種情況，即移動到某個焦點后，不進行加載或觸發(fā)操作，需按“OK鍵”才觸發(fā)，如圖15所示。這種狀態(tài)在早期電視盒子性能不足、在Tab切換時經(jīng)常需要使用，因為如果直接切換焦點時就加載，可能會造成卡頓。

屏幕快照 2018-03-28 上午9.34.42.png


圖15 標記狀態(tài)和半選中狀態(tài)案例


六、結語


我總結和歸納的這些基本知識和注意事項，雖然它們能夠幫助我們快速了解電視大屏的基本交互知識，避免一些不必要的坑；但還遠遠不夠，更多的是需要在實際參與項目中快速學習、快速應用，因此，之后我將會基于我參與的項目再次進行電視大屏的實戰(zhàn)總結，歡迎下次再與大家一同交流和成長。


藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

評論(0) 瀏覽(3509)

JS基本事件總結

seo達人

JavaScript 創(chuàng)建動態(tài)頁面。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。比如說，當用戶單擊按鈕或者提交表單數(shù)據(jù)時，就發(fā)生一個鼠標單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結果。主要事件表總結如下： 

評論(0) 瀏覽(3289)

小程序復選框-在線預定

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

  1. <view class='header1'>  
  2.   <view class='header'>  
  3.     <view class='header_con flex_between'>  
  4.       <view class='left'>  
  5.         共計{{items.length}}件商品  
  6.       </view>  
  7.       <view class='right flex_end'>  
  8.         <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>  
  9.           管理  
  10.         </view>  
  11.         <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>  
  12.           完成  
  13.         </view>  
  14.       </view>  
  15.     </view>  
  16.   </view>  
  17. </view>  
  18. <view class='header2'>  
  19.   <view class='header'>  
  20.     <view class='header_con flex_between'>  
  21.       <input value='類目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">  
  22.       </input>  
  23.       <view class='right flex_end'>  
  24.         <block wx-if="{{title_disabled}}">  
  25.           <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>  
  26.         </block>  
  27.         <block wx-if="{{!title_disabled}}">  
  28.           <view class='flex_center' bindtap='finish_classname'>  
  29.             完成  
  30.           </view>  
  31.         </block>  
  32.       </view>  
  33.     </view>  
  34.   </view>  
  35. </view>  
  36. <view class='onlinechoose'>  
  37.   <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>  
  38.     <view class='list_cons flex_start'>  
  39.       <view wx:if="{{management_good}}" class='lefts'>  
  40.         <block wx-if="{{!i.checked}}">  
  41.           <view class='icon_none'></view>  
  42.         </block>  
  43.         <block wx-if="{{i.checked}}">  
  44.           <icon type="success" size="30" color="red" />  
  45.         </block>  
  46.       </view>  
  47.       <image src='../../../image/hotel/demoimg.jpg'></image>  
  48.       <view class='right'>  
  49.         <view class='name'>  
  50.           {{i.name}}  
  51.         </view>  
  52.         <view class='list1 flex_between'>  
  53.           <view class='left'>  
  54.             <view class='condition1'>  
  55.               16㎡|雙人床|含早  
  56.             </view>  
  57.             <view class='condition2'>  
  58.               <block>  
  59.                 間數(shù)：10  
  60.               </block>  
  61.               <block>  
  62.                 間數(shù)：2  
  63.               </block>  
  64.             </view>  
  65.           </view>  
  66.         </view>  
  67.         <view class='list1 flex_between'>  
  68.           <view class='left'>  
  69.             <view class='condition2'>  
  70.               類目一  
  71.             </view>  
  72.           </view>  
  73.         </view>  
  74.       </view>  
  75.     </view>  
  76.   </view>  
  77. </view>  
  78. <view class='bottom flex_between' wx:if="{{management_good}}">  
  79.   <view class='left flex_start'>  
  80.     <block wx:if="{{select_all}}">  
  81.       <view bindtap='select_none' class='flex_start'>  
  82.         <icon type="success" size="30" color="red" />  
  83.         <view>  
  84.           取消全選  
  85.         </view>  
  86.       </view>  
  87.     </block>  
  88.     <block wx:if="{{!select_all}}">  
  89.       <view bindtap='select_all' class='flex_start'>  
  90.         <view class='select_none'>  
  91.         </view>  
  92.         <view>  
  93.           全選  
  94.         </view>  
  95.       </view>  
  96.     </block>  
  97.   </view>  
  98.   <view class='right flex_end'>  
  99.     <view style='text-align:right'>  
  100.       <view class='all'>  
  101.         共選中{{middlearr.length}}件商品  
  102.       </view>  
  103.     </view>  
  104.     <view bindtap='deleteitem' class='sure'>  
  105.       刪除  
  106.     </view>  
  107.   </view>  
  108. </view>  
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

評論(0) 瀏覽(3117)

Http訪問跨域解決

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

一、跨域科普

跨域，即跨站HTTP請求(Cross-site HTTP request)，指發(fā)起請求的資源所在域不同于請求指向資源所在域的HTTP請求。

二、如何產(chǎn)生跨域

當使用前后端分離，后端主導的開發(fā)方式進行前后端協(xié)作開發(fā)時，常常有如下情景：

    a、后端開發(fā)完畢在服務器上進行部署并給前端API文檔。
    b、前端在本地進行開發(fā)并向遠程服務器上部署的后端發(fā)送請求。
    c、在這種開發(fā)過程中，如果前端想要一邊開發(fā)一邊測試接口，就需要使用跨域的方式。

三、解決方案

1、JQuery+ajax+jsonp 跨域訪問

Jsonp(JSON with Padding)是資料格式 json 的一種“使用模式”，可以讓網(wǎng)頁從別的網(wǎng)域獲取資料。

下面給出例子：

html 前端代碼：

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
  2. <html>    
  3. <head>    
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  5. <title>Insert title here</title>    
  6. <script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>    
  7. </head>    
  8. <script type="text/javascript">    
  9. $(function(){       
  10.  /*    
  11.  //簡寫形式，效果相同    
  12.  $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",    
  13.          function(data){    
  14.              $("#showcontent").text("Result:"+data.result)    
  15.  });    
  16.  */    
  17.  $.ajax({    
  18.      type : "get",    
  19.      async:false,    
  20.      url : "http://app.example.com/base/json.do?sid=1494&busiId=101",    
  21.      dataType : "jsonp",//數(shù)據(jù)類型為jsonp    
  22.      jsonp: "jsonpCallback",//服務端用于接收callback調(diào)用的function名的參數(shù)    
  23.      success : function(data){    
  24.          $("#showcontent").text("Result:"+data.result)    
  25.      },    
  26.      error:function(){    
  27.          alert('fail');    
  28.      }    
  29.  });     
  30. });    
  31. </script>    
  32. <body>    
  33. <div id="showcontent">Result:</div>    
  34. </body>    
  35. </html>    

服務器端：

[java] view plain copy
  1. import java.io.IOException;    
  2. import java.io.PrintWriter;    
  3. import java.util.HashMap;    
  4. import java.util.Map;    
  5. import javax.servlet.http.HttpServletRequest;    
  6. import javax.servlet.http.HttpServletResponse;    
  7. import net.sf.json.JSONObject;    
  8. import org.springframework.stereotype.Controller;    
  9. import org.springframework.web.bind.annotation.RequestMapping;    
  10.      
  11. @Controller    
  12. public class ExchangeJsonController {    
  13.  @RequestMapping("/base/json.do")    
  14.  public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {    
  15.     try {    
  16.      response.setContentType("text/plain");    
  17.      response.setHeader("Pragma", "No-cache");    
  18.      response.setHeader("Cache-Control", "no-cache");    
  19.      response.setDateHeader("Expires", 0);    
  20.      Map<String,String> map = new HashMap<String,String>();     
  21.      map.put("result", "content");    
  22.      PrintWriter out = response.getWriter();         
  23.      JSONObject resultJSON = JSONObject.fromObject(map); //根據(jù)需要拼裝json    
  24.      String jsonpCallback = request.getParameter("jsonpCallback");//客戶端請求參數(shù)    
  25.      out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式數(shù)據(jù)    
  26.      out.flush();    
  27.      out.close();    
  28.    } catch (IOException e) {    
  29.     e.printStackTrace();    
  30.    }    
  31.  }    
  32. }    

2、通過注解的方式允許跨域

在Controller類或其方法上加@CrossOrigin注解，來使之支持跨域。

舉例：
[java] view plain copy
  1. @CrossOrigin(origins = "*", maxAge = 3600)  
  2. @RestController  
  3. @RequestMapping("/User")  
  4. public class UserController {  
  5. }  

其中origins為CrossOrigin的默認參數(shù)，即跨域來源，*即任何來源，也可以是其他域名。即可以以以下形式：

[java] view plain copy
  1. @CrossOrigin("http://test.com")  
  2. @CrossOrigin(origins="http://test.com",maxAge=3600)  

該注解用于方法上，寫法相同，處理時，SpringMVC會對類上標簽和方法上標簽進行合并。

3、通過配置文件的方式允許跨域

在web.xml中添加如下配置：

[html] view plain copy
  1. <filter-mapping>   
  2.     <filter-name>CorsFilter</filter-name>   
  3.     <url-pattern>/*</url-pattern>   
  4. </filter-mapping>  
使用這個Filter即可讓整個服務器全局允許跨域。

藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


評論(0) 瀏覽(4198)

【ionic3】ionic2.x與ionic3.x之間的部分區(qū)別

seo達人

在用2.x開發(fā)時有的地方的顏色樣式是通過添加 color="primary" 屬性的形式設置的，但是升級3.x之后這種方式除了一些自帶的color屬性的組件、標簽（eg: ）可以生效，其他的都失效了。

評論(0) 瀏覽(3914)

學習解析XML(1）

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

什么是xml, xml有什么作用？
XML 是獨立于軟件和硬件的信息傳輸工具
  • XML 指可擴展標記語言（EXtensible Markup Language）。
  • XML 是一種很像HTML的標記語言。
  • XML 的設計宗旨是傳輸數(shù)據(jù)，而不是顯示數(shù)據(jù)。
  • XML 標簽沒有被預定義。您需要自行定義標簽。
  • XML 被設計為具有自我描述性。
  • XML 是 W3C 的推薦標準。


XML 和 HTML 之間的差異

XML 不是 HTML 的替代。

XML 和 HTML 為不同的目的而設計：

  • XML 被設計用來傳輸和存儲數(shù)據(jù)，其焦點是數(shù)據(jù)的內(nèi)容。
  • HTML 被設計用來顯示數(shù)據(jù)，其焦點是數(shù)據(jù)的外觀。

HTML 旨在顯示信息，而 XML 旨在傳輸信息



xml的用途:

    

XML 把數(shù)據(jù)從 HTML 分離

XML 簡化數(shù)據(jù)共享

XML 簡化數(shù)據(jù)傳輸

XML 簡化平臺變更

XML 使您的數(shù)據(jù)更有用

XML 用于創(chuàng)建新的互聯(lián)網(wǎng)語言


<?xml version="1.0" encoding="UTF-8"?> 聲明

以及根元素 子元素 以及定義根元素結尾

如例

聲明

<?xml version="1.0" encoding="UTF-8"?>

根元素

<note>

子元素

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

定義根元素結尾

命名的規(guī)范

所有的 XML 元素都必須有一個關閉標簽

XML 標簽對大小寫敏感、

XML 必須正確嵌套

XML 屬性值必須加引號

實體引用




XML 以 LF 存儲換行

在 Windows 應用程序中，換行通常以一對字符來存儲：回車符（CR）和換行符（LF）。

在 Unix 和 Mac OSX 中，使用 LF 來存儲新行。

在舊的 Mac 系統(tǒng)中，使用 CR 來存儲新行。

XML 以 LF 存儲換行。

藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

評論(0) 瀏覽(3179)

優(yōu)秀網(wǎng)頁UI設計深度解析

藍藍設計的小編

在今天這樣一個互聯(lián)網(wǎng)+時代，絕大多數(shù)企業(yè)都意識到通過線上資訊來吸引更多的潛在客戶是多么的重要。這些潛在客戶對你的公司及產(chǎn)品印象的好壞，很大程度上取決于你在網(wǎng)站設計上投入精力的多少。所以花時間構思一個好的網(wǎng)站設計，特別是主頁部分的設計非常關鍵。

評論(0) 瀏覽(3849)

小程序復選框-在線預定

seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

  1. <view class='header1'>  
  2.   <view class='header'>  
  3.     <view class='header_con flex_between'>  
  4.       <view class='left'>  
  5.         共計{{items.length}}件商品  
  6.       </view>  
  7.       <view class='right flex_end'>  
  8.         <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>  
  9.           管理  
  10.         </view>  
  11.         <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>  
  12.           完成  
  13.         </view>  
  14.       </view>  
  15.     </view>  
  16.   </view>  
  17. </view>  
  18. <view class='header2'>  
  19.   <view class='header'>  
  20.     <view class='header_con flex_between'>  
  21.       <input value='類目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">  
  22.       </input>  
  23.       <view class='right flex_end'>  
  24.         <block wx-if="{{title_disabled}}">  
  25.           <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>  
  26.         </block>  
  27.         <block wx-if="{{!title_disabled}}">  
  28.           <view class='flex_center' bindtap='finish_classname'>  
  29.             完成  
  30.           </view>  
  31.         </block>  
  32.       </view>  
  33.     </view>  
  34.   </view>  
  35. </view>  
  36. <view class='onlinechoose'>  
  37.   <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>  
  38.     <view class='list_cons flex_start'>  
  39.       <view wx:if="{{management_good}}" class='lefts'>  
  40.         <block wx-if="{{!i.checked}}">  
  41.           <view class='icon_none'></view>  
  42.         </block>  
  43.         <block wx-if="{{i.checked}}">  
  44.           <icon type="success" size="30" color="red" />  
  45.         </block>  
  46.       </view>  
  47.       <image src='../../../image/hotel/demoimg.jpg'></image>  
  48.       <view class='right'>  
  49.         <view class='name'>  
  50.           {{i.name}}  
  51.         </view>  
  52.         <view class='list1 flex_between'>  
  53.           <view class='left'>  
  54.             <view class='condition1'>  
  55.               16㎡|雙人床|含早  
  56.             </view>  
  57.             <view class='condition2'>  
  58.               <block>  
  59.                 間數(shù)：10  
  60.               </block>  
  61.               <block>  
  62.                 間數(shù)：2  
  63.               </block>  
  64.             </view>  
  65.           </view>  
  66.         </view>  
  67.         <view class='list1 flex_between'>  
  68.           <view class='left'>  
  69.             <view class='condition2'>  
  70.               類目一  
  71.             </view>  
  72.           </view>  
  73.         </view>  
  74.       </view>  
  75.     </view>  
  76.   </view>  
  77. </view>  
  78. <view class='bottom flex_between' wx:if="{{management_good}}">  
  79.   <view class='left flex_start'>  
  80.     <block wx:if="{{select_all}}">  
  81.       <view bindtap='select_none' class='flex_start'>  
  82.         <icon type="success" size="30" color="red" />  
  83.         <view>  
  84.           取消全選  
  85.         </view>  
  86.       </view>  
  87.     </block>  
  88.     <block wx:if="{{!select_all}}">  
  89.       <view bindtap='select_all' class='flex_start'>  
  90.         <view class='select_none'>  
  91.         </view>  
  92.         <view>  
  93.           全選  
  94.         </view>  
  95.       </view>  
  96.     </block>  
  97.   </view>  
  98.   <view class='right flex_end'>  
  99.     <view style='text-align:right'>  
  100.       <view class='all'>  
  101.         共選中{{middlearr.length}}件商品  
  102.       </view>  
  103.     </view>  
  104.     <view bindtap='deleteitem' class='sure'>  
  105.       刪除  
  106.     </view>  
  107.   </view>  
  108. </view>  
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

評論(0) 瀏覽(3476)

UI設計教程 質(zhì)感朋克U盤ui圖標教程

藍藍設計的小編

介紹一下如何在PS里更好的體現(xiàn)圖標的質(zhì)感，個人覺得，這個教程對于UI學習者來說是非常受用的，特別是UI設計的新手學習者。好了，喜歡的朋友記得給我好評！

評論(0) 瀏覽(3456)

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔