- 硬件+遠(yuǎn)距離操控——基本交互 -

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

一 、遙控器輸入

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

圖1 不同廠商的遙控器

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

圖2 遙控器的基本按鍵

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

遙控器輸入的特性決定了用戶(hù)在輸入時(shí)的效率和便捷程度都大打折扣，因此，在這樣的局限下，設(shè)計(jì)師只能通過(guò)各種不同的方式來(lái)盡量減弱這種不便捷：

1. 減少用戶(hù)輸入

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

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

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

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

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

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

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

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

二、導(dǎo)航和菜單

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

1. 十字

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

圖4 十字導(dǎo)航

2. 磁貼

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

圖5 磁貼信息展示

3. Tab

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

圖6 Tab導(dǎo)航

4. 列表

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

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

5. 其他

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

圖8 其他類(lèi)型的導(dǎo)航和菜單

三、信息展現(xiàn)

在前面的文字中，我在“電視”這個(gè)詞后面都緊跟了“大屏”這個(gè)詞，電視的屏幕是比PC還要大的屏幕；而用戶(hù)也因?yàn)槿绱舜蟮钠聊?，往往是坐在兩三米之外。因此，電視端的信息設(shè)計(jì)有著兩個(gè)顯著的特質(zhì)：為大屏幕而設(shè)計(jì)和為遠(yuǎn)距離而設(shè)計(jì)，有著以下幾個(gè)注意事項(xiàng)：

1. 重視信息的識(shí)別性和簡(jiǎn)潔易懂

文字、圖標(biāo)和按鈕，乃至toast提示，在電視端的識(shí)別性問(wèn)題比手機(jī)和PC端更為凸顯。因?yàn)檫h(yuǎn)距離、大屏幕，加上電視本身的休閑屬性，使得用戶(hù)的注意力較為分散，因此，界面中的信息和元素就需要適當(dāng)放大，至少保證用戶(hù)能夠在兩三米之外能清晰看到，如圖9所示。

圖9 信息識(shí)別案例

2. 提前露出信息和多露出點(diǎn)信息

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

圖10 信息露出案例

3. 避免過(guò)多無(wú)模塊信息的展示

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

圖11 信息模塊化案例

四、控件位置

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

圖12 控件位置案例

五、焦點(diǎn)狀態(tài)

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

圖13 不統(tǒng)一的焦點(diǎn)樣式

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

圖14 焦點(diǎn)狀態(tài)種類(lèi)

可能需要簡(jiǎn)單講述一下“標(biāo)記狀態(tài)”和“半選中狀態(tài)”：“標(biāo)記狀態(tài)”在PC和手機(jī)端也非常常見(jiàn)，比如告知用戶(hù)所在位置在哪里的Tab標(biāo)記；而“半選中狀態(tài)”是“焦點(diǎn)狀態(tài)”的一種情況，即移動(dòng)到某個(gè)焦點(diǎn)后，不進(jìn)行加載或觸發(fā)操作，需按“OK鍵”才觸發(fā)，如圖15所示。這種狀態(tài)在早期電視盒子性能不足、在Tab切換時(shí)經(jīng)常需要使用，因?yàn)槿绻苯忧袚Q焦點(diǎn)時(shí)就加載，可能會(huì)造成卡頓。

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

六、結(jié)語(yǔ)

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

國(guó)外的logo設(shè)計(jì)

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

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

1. <view class='header1'>  
2.   <view class='header'>  
3.     <view class='header_con flex_between'>  
4.       <view class='left'>  
5.         共計(jì){{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='類(lèi)目一' 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.               類(lèi)目一  
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>  

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

一、跨域科普

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

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

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

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

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

1. <view class='header1'>  
2.   <view class='header'>  
3.     <view class='header_con flex_between'>  
4.       <view class='left'>  
5.         共計(jì){{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='類(lèi)目一' 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.               類(lèi)目一  
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>  

介紹一下如何在PS里更好的體現(xiàn)圖標(biāo)的質(zhì)感，個(gè)人覺(jué)得，這個(gè)教程對(duì)于UI學(xué)習(xí)者來(lái)說(shuō)是非常受用的，特別是UI設(shè)計(jì)的新手學(xué)習(xí)者。好了，喜歡的朋友記得給我好評(píng)！