使用場景和設計方法來看，App與Web的設計有什么區別？

早前，總是遇到問“Web設計”和“UI設計”分別做了多久？之類的詢問，文章開始之前，我們先來聊聊什么是UI設計。

UI=Ueser Interface，直譯“用戶界面”。也就是說UI設計就是用戶界面設計。所以只要是用戶，也就是人機交互得體驗中會用到的界面,都叫做“UI”，對于這些“UI”的設計，我們都統稱為“UI設計”。

界面有很多種，我們主要介紹Web與App界面，由淺入深，通過使用場景與設計方法、開發環境與適配要點，兩兩結合來看一下他們的區別。

關于使用場景，2012年移動互聯網元年至今，越來越多的小伙伴將網癮道具，從電腦改為移動設備。以前聊的是，我配了個XXX的顯卡跑游戲，現在越來越多的是，某果的發布會看了嗎？

越來越多的用戶“道具”，促使我們要去畫更多的，用戶的“道具”皮膚，也就是我們“俗稱”的界面。

在設計不同的“皮膚”時，我們可通過考慮以下幾點設計方法，來區分他們。

1. 交互方式的不同

1.1 操作媒介

Web網站 – 鼠標操作 VS 移動App – 手指場景的局限造成了，使用電腦成本會高一些，相對按鈕位置的精確度會更高（在觸摸大屏還沒出現的時代，我們操作鼠標來實現點擊）。

而移動設備，隨時隨地動動手指就可以了。

我們要注意預留點擊區域，控制可點擊內容的艱巨性。

1.2 設計要點

（1）使用場景不同

• 相對PC端的位置固定，因為顯示器種類繁多，窗口也可以隨意縮放，設計時需要優先確定頁面的安全區域，但同樣因為屏幕大所有現實的內容相對更豐富。
• 而移動端的頁面相對就小很多，雖然小但顯得很靈活，很多App賣點就是利用碎片花時間學習、購物、娛樂，對應這點的不同，移動端的內容會更加精簡。

兩端的閱讀范圍及內容長度偏重的也因此不同。

（2）文字大小

Web設計 ：比較隨意，文章正文字體12px/14px；頁面安全區域1080px～1280px為宜（一些展示頁面字體會做到16-20px或更大）。

App設計：正文30-34px,最小可用28px;注釋及提示行文字20-24px，最小不小于20px。（具體字數根據24px-36px的字體大小，以及頁邊距來定～）。

（3）Banner

• Web設計：寬度在1920px,主內容區域（安全范圍）1080px～1280px為宜；
• App設計：畫面大小根據比例自適應縮放或根據實際頁面適配方案調整安全距離。

2. 反饋方式的不同

相對PC端的位置固定，用戶會在一個相對平緩的環境瀏覽頁面，狀態也會更為專注。誤點擊的概率小，更多的會講究反饋速度和信息的精確度，用戶比較多的是收藏正頁面而不是單獨的段落。而移動端用戶因為場景多變，很多時候會利用走路，坐車的實際去瀏覽界面，更容易產生誤操作，也更容易對頁面內容產生疲憊感。

Web設計：一般對于界面的通知中心,位置相對固定，但較為隱蔽，用戶使用的不多,很難主動喚起用戶。

這里設計師需要做的，是將自動呼出的彈窗提示和漂浮窗口這類的“強制”、“粗魯”的提示形式。（經常被運營要求加個活動飄窗，價格在線客服，這類令人反感的交互方式。）

通過一些，相對“隱蔽”、“固定”、“委婉”的方式及擺放位置，在不影響用戶閱讀的前提下進行提示交互。

App設計：最常見的是系統自帶的推送通知，用戶可主動關閉通知，當然也有嵌在頁面內的，因為屏幕限制，所以相對網頁更加突出，設計師需要思考如何讓用戶更容易“開啟通知權限”。

3. 側重的不同

針對不同設備用戶的不同習慣，我們在定義兩端的交互內容時也要有所側重，我們會選擇性的對一些內容進行隱藏，也會針對設備區分同一功能的交互方式。比如：兩端同樣的收藏動作，Web用戶比較多的是收藏整頁，而不是單獨的段落；因此用戶會較多使用“收藏夾”、下載等方式。

而對App用戶因為切換應用容易被打斷操作及閱讀環境的限制，除了選擇一些App自帶的“稍候閱讀”功能外，“截屏”保存或長按收藏就比較實用了。

3.1 藏功能

平臺，會在兩端分別給用戶不同的功能側重。就好像工作時間會更優先pc端去處理事情，這是因為，PC端能夠更好的拆解我們的需求，因為需求不同界面的側重功能也會不同。

比如：我們會有在平臺編輯文章并配圖、排版發布平臺的需求，但是在兩端同時體驗操作后發現，App任務發布的復雜程度讓用戶難以理解。往往一個Web頁面就能完成的事情App端需要2-3個頁面才能完成，加上大段的文字內容需要編輯，以及網絡狀態原因，讓發布任務變得很艱難。

因此，很多App就會拆分兩端的用戶需求，將商家更多的引導去Web去上架貨物;消費者則側重于App，同時界面會根據不同端“藏”去一部分的功能。

3.2 藏內容

因界面分辨率的差異化，我們也會隱藏一些需求度較低的內容元素。比如：我們常說的面包條菜單，其實就是把Web上常規的Menu，適應智能手機的操作和顯示特性而做出的變化。

Web網站：以鼠標或觸摸板為操作媒介, 常用交互方式有左擊、右擊、hover鼠標滑過幾個操作方式，對應這些操作的web端可以將隱藏的元素，（比如解釋類文字，及子菜單等）可以在鼠標hover時或是點擊后才展示出來。

移動App：因為實際面積更手指觸控的關系，App常用的交互方式有，手指點擊、滑動、捏合等各種復雜的手勢。同時在App設計時，多遵循用選擇代替輸入，因此設計師需要更多整合信息，并隱藏一些焦點外的內容。

3.3 “藏”的設計方式

（1）提示

通用-小紅點、提示氣泡、文字字重及變色、展開收起常用提示性符號。

（2）內容收起Web網站

點擊下拉、hover下拉。

移動App：滑動拖出內容

4. 功能側重的不同

• Web網站：側重復雜操作類，例如文本編輯，后臺數據上傳下載等，需要大量操作及其他軟件相互協助的功能。
• 移動App：側重相對簡易且場景多變的操作，比如打車，導航等，或是一些適合利用碎片化時間作業的功能。

Tips：我們在“藏”的時候要注意，移動App以單手操作為主，界面上重要元素需要在用戶單手點擊范圍內，或者提供快捷的手勢操作。

5. 網絡環境的不同

Web使用的是Wifi或是電纜等無限量的高速網絡，而App則是移動網絡或是Wifi，網絡環境相對復雜。應對這些不同網絡環境對應的網絡速度，我們可以通過分頁區別化和加載區別化來提高用戶的體驗。

Web網站：一般都是點擊進入鏈接后從0開始加載，也因為網絡穩定的“先天”優勢，讀用翻頁符號來解決分頁問題，也有一些以支撐的網站選擇使用“瀑布流”的方式替代分頁。

比如，花瓣、蘑菇街這類“看圖”的網站，因為搜索后的數據格式相同，用戶對同一內容興趣關注度大，停留對比時間較長，所以優先使用“瀑布流”。

移動App：因用戶使用環境復雜（可能在移動過程中從通暢環境到封閉的信號較差的環境,網絡可能從有到無、從快到慢）。所以和網站有區別的是，我們一般通過用戶主動下載、更新的方式來加載主要框架；實時的數據信息則是在用戶打開App后通過當前網絡加載，也因為網絡不穩定的劣勢，很少有翻頁符號來區別每頁，反復刷新加載會造成等待時間較長。

Tips：注意圖片大小 -加載圖片是對數據流量和網速的“巨大”考驗，因此，我們在一些運營類的項目或者是商場圖片時，尤其是App圖一定要記得壓縮。我們可以用到tinypng.com等在線壓縮圖片的工具進行壓縮，也要提醒開發小哥哥發版前記得壓縮圖片。

總結

• 交互方式，因為操作媒介有所不同，所以我們要注意區分一些狀態和側重；
• 反饋方式，因為瀏覽環境和基礎框架不同，所以我們要注意利用各自空間優勢進行反饋；
• 側重功能，因為各自的操作優勢，我們會對兩端的用戶和功能進行劃分，給出不同的產品側重；

最后是網絡環境，因為兩者各自網絡環境的優劣勢，我們在做頁面布局設計的時候也要作出相應的調整。

雖然現在Web端的網站等在慢慢的被弱化，連鵝廠都放棄了Web端的QQ，但是作為UI設計師，對于Web端的基本工還是不能放棄啊～至少App戰勝不了后臺系統！

參考鏈接：

• https://www.jianshu.com/p/81d4486bc816《網頁中的字體到底該怎么選擇？》
• https://www.jianshu.com/p/cc8916f35d00《用戶界面網頁設計原則》

本文由 @Quines 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

產品設計時細節是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣，大多會在下面加上下劃線以便識別，不過現如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現在出現了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接，顧名思義，就是沒有動態效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優化其實就是對網站的站內鏈接的優化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質量的外部鏈接指：和你的網站建立鏈接的網站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態

鏈接在交互上一般會呈現4種狀態，即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現半透明線條

點擊時，有波紋暈開的動態效果

點擊后，下面線條粗

有時候是3種狀態，比如百度網和知乎應用：

默認狀態

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統知乎應用的3種狀態，而在Android系統沒有用力點擊這一狀態。

默認狀態

點擊狀態

用力點擊會彈出預覽小窗口

有些時候只有2種狀態，如下圖谷歌網：

默認和點擊后狀態一樣

鼠標懸停時出現下劃線

默認狀態

點擊時

而有時候比如在APP里有時候就一直只有一種狀態，也可以稱靜態鏈接，之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

源：環球時報

國 App 的火爆早已 超過一國范疇，給全球用 戶帶去便利和歡樂。

本報駐印度、埃及、尼日利亞、德國特派特約記者 胡博峰 曲翔宇 姜 宣 青 木

編者按：印度對TikTok等中國App的禁令以及美國可能的“強有力行動”，在阻礙中國互聯網公司走向全球的同時，也讓我們看到中國App這些年在世界上的強勢崛起。在眾多“中國制造”的App中，TikTok、微信、全球速賣通（AliExpress）已經成為全球排行榜上的佼佼者。通過分析觀察，我們發現這些能受到各國用戶追捧的App都有其共同的成功策略，而失敗的經驗同樣值得珍視。

印度：原本前途無限

日前，印度政府決定封禁TikTok等59款中國應用程序。禁令發布后，印度媒體驚呼原來中國手機App在印度已經不知不覺這么火了。以TikTok為例，其在印度下載量超過4.57億，幾乎占全球下載量的1/3。若非政治因素，中國App本來可以說在印度前途無限。

行業媒體認為，近年來中國手機App在印度的發展猶如雨后春筍。谷歌應用程序商店發布的2017年下載量排名前十的手機App中只有2款來自中國公司，而一年之后就有5款。保爾森研究所的調查顯示，中國手機App前后只用5年時間就占領了印度市場的半壁江山，打破了美國臉書、推特等對印度市場的壟斷地位。2015年，中國手機App在印度的下載量占比只有23.9%，但2019年就飆升至60.5%。與此同時，美國手機App的印度市場份額則下降到31%。難怪有媒體評論說，印度政府對中國手機App發布禁令，其實是幫了美國公司的忙。

這些中國手機App在印度市場摸爬滾打中雖然是“八仙過海，各顯神通”，但每家公司都有決勝的法寶。分析背后共同經驗，其實不外乎兩點，即巨額的營銷投入和本地化的經營方式。2012年，騰訊旗下的WeChat（微信海外版）登陸印度時，曾不惜重金邀請寶萊塢大牌明星作為品牌大使并因此迅速“圈粉”，不過短短3年便折戟沉沙。WeChat前印度市場與戰略副總監希曼舒·古普塔認為，“這很大程度上歸咎于本地化工作不足”。在此之后，幾乎所有來到印度發展的中國手機App公司都吸取了這一經驗。例如，字節跳動公司旗下的Helo在印度的團隊幾乎都是本地人。值得一提的是，Helo公司的內容運營總監西雅曼迦·巴魯瓦曾在《印度斯坦時報》《今日印度》等多家主流媒體任職，不僅在產品內容方面有獨到之處，在營銷等方面善于制定本地化策略，而且其在當地媒體也積累了不少人脈，對Helo樹立品牌形象也很有幫助。

本地化的另一面體現在中國手機App善于深耕印度二線乃至三線城市市場。印度科技新聞網站FactorDaily的一篇報道說，大多數中國手機App剛到印度時，并沒有對印度市場情況進行細分。但它們一般都可以很快發現印度二三線城市的潛在需求，并迅速實現產品升級和轉型。眾所周知，印度是個宗教和語言都非常多元化的社會，因此市場細分程度很高。某種意義上來說，誰能更多、更好地占領細分市場，就能決勝印度整體市場。而在這方面，中國手機App公司做得非常出色。新加坡國立大學教授克拉布特利認為，印度市場中有約4億用戶沉淀在這些細分市場的城鎮中。這些城市有的位于印地語中心地帶，有的位于主要說泰米爾語的泰米爾納德邦，還有的位于安得拉邦，那里的人說泰盧固語。克拉布特利說，“這些居住在二三四線城市的互聯網用戶收入不高，也不會說英語，但用戶群數量非常龐大”。針對印度這些二三線城市，中國企業一方面考慮到英語在這些地方并不流行，因此推出的App中有當地語言選項；另一方面，短視頻類應用程序會通過大數據和算法，非常注重精準投放，多以相對輕松的內容為主。

中東：年輕群體帶來不竭動力

過去幾年，中東已成為中國互聯網創業者最重要的市場之一。游戲、直播、短視頻、跨境電商……中國創業者已在快速增長的中東移動互聯網市場中發現大量掘金機會，涌現出一批佼佼者。不過，專業人士接受《環球時報》記者采訪時表示，近年中國App出海中東北非地區總體喜憂參半。

TikTok毫無疑問是中國在中東互聯網世界的“頭號網紅”。“TikTok在中東北非地區輸出的不僅是內容，更是生態，一個海外本土用戶喜聞樂見的內容傳播生態。”海外電商專家鄒昶華對《環球時報》記者分析說，網紅經濟近年在中東北非悄然興起，TikTok的成功在于前期充分準備，乘勢而上，不斷吸引各行各業的KOL（關鍵意見領袖）在自己的App上發布有趣內容，極大迎合本地用戶的關注點。另外，在諸如迪拜哈利法塔一年一度的新年焰火等本地關注度高的活動中，TikTok總舍得投入大筆資源，適時出現在高峰時段。這種線上與線下的結合，能夠迅速拉抬品牌知名度。

實現本地化的前提，在于對當地基本情況了然于心。中東地區總人口約5億，互聯網人口逼近3億，滲透率近60%，移動互聯網建設大踏步前進。《環球時報》記者去年曾參與中東北非南亞電信領袖峰會，了解到在中國企業的推動下，所有海合會國家已完成第一波5G部署。同時，中東北非多個國家整體人口結構高度年輕化，約60%-80%的人口年齡在30歲以下。龐大年輕群體的需求外加經濟多元化轉型的需要，是移動互聯網發展的不竭動力。

“雖然本地化是重要突破口，但畢竟成本高昂，并非所有出海App都能通過本地化脫穎而出。”鄒昶華對《環球時報》記者表示，在TikTok高歌猛進的背后，也有部分中國App鎩羽而歸。以近年備受關注的中東跨境電商App為例，本地化涉及自建倉儲配送，運營成本高且庫存風險大，經營得當方能提高用戶體驗，稍有差錯則會滿盤皆輸。

對于中企而言，文化差異的風險始終存在。盡管一些國家女性單獨出門受限讓電商平臺賺得盆滿缽滿，但同樣的文化邏輯，可能導致互聯網直播時，主播露出胳膊就可能被用戶投訴。該地區復雜的地緣政治情況，也對經濟環境構成一定威脅。比如，對伊朗、卡塔爾等市場的深度參與，很可能引起沙特、阿聯酋等國的反感。

歐洲：注重隱私與個性化

《環球時報》記者觀察到，在德國等歐洲國家，中國的App最近幾年發展迅速。最受歡迎的顯然是社交App，尤其是TikTok，持續保持在下載榜前三的位置。

許多歐洲人從中國電商App如AliExpress、Joybuy、GearBest、Banggood等購買中國商品。華為、小米、聯想、大疆創新、國航等中國品牌在歐洲推出官方App，也可用來線上購物。不少用戶表示，在大疆創新、小米、國航等App上購物很方便。付款方式與其他歐洲品牌App類似，可以用信用卡、PayPal、借記卡，甚至還有貨到付款，不定期還有打折活動。柏林夏里特醫院的女護士貝阿特告訴《環球時報》記者，她非常喜歡在中國的AliExpress、小米等App上購物，不僅因為價格便宜，而且產品緊跟潮流，有創意。

歐洲近兩年也開始流行美妝App，這股潮流還是從中國等亞洲國家流行過來的。這主要是因為三星、華為、小米等亞洲品牌手機在歐洲的暢銷，而這些手機中常常有美妝App推薦，尤其是美圖秀秀等非常受歡迎。此外，語言培訓、圖片編輯、視頻剪輯等工具類App，來自中國的也非常多。工具類App也是最賺錢的。比如ChineseSkill這款，在蘋果和谷歌商店評分高達4.8，要價31.99歐元。

德國慕尼黑大學網絡經濟學者穆勒對《環球時報》記者表示，相對于美國，中國App進入歐洲的阻礙較少。但目前在美國的壓力下，歐洲對中國TikTok等App的調查也多起來了。他認為，為了應對政治阻礙，設立獨立的海外版是一種對策。中國App尤其要保護青少年以及用戶的隱私。同時，中國公司也要勇于維權，表明自己的態度，這也有利于提高透明度，減少誤解。

其次，文化方面的因素也不容忽視。比如，許多中國App只有中文版和英文版，沒有德語等語言，這就阻礙其深入到更多用戶中。再如，許多年輕用戶向《環球時報》記者反映，美圖秀秀等美妝App主要定位美白、浪漫或可愛，這與他們這邊喜歡的奇趣、創意等趨勢有些區別。他們認為，這些App太亞洲化，希望有更適合歐洲人興趣的。

再次，要多營銷。穆勒認為，一種是通過蘋果和谷歌商店進行推銷，還有就是通過專業人士推薦。支付寶的營銷比較有針對性，在歐洲主要針對中國游客。中國App不妨先從到中國出差旅游的歐洲人入手，把一些相關App打包在一起進行推薦，然后不斷向全歐洲擴展。他認為，未來App競爭主要在中美之間展開。