Blog
趨勢新知
行動裝置網頁的重要性
2013-09-30
行動版網頁的迅速崛起
之前我們和大家分享的文章─《淺談網頁版面設計編排》，帶大家認識了近來國內外的網頁設計編排，以及《網站設計十年間，2013網站設計趨勢》這兩篇文章，而除了家家必有的電腦版網頁設計之外，你的網站還需要支援行動版網頁( Mobile-Web )嗎？設計行動版網頁有什麼好處？到底該怎麼設計規劃您的行動版網頁( Mobile Web )呢？
在我們介紹行動裝置網頁的重要性前，即將迎接下一個4G時代的行動網際網路中，筆者也針對手機網頁的重要性列出幾個注意點給大家參考：
2012年Google調查指出，有手機版網頁的商店會讓消費者更想要購物，而超過半數的使用者對沒有手機版網站感到不悅。-數位時代報導
「比起APP，我們更重視行動版網頁設計。理想的行動版網頁，需要考量使用介面設計以及網友的需求，不但要做到容易操作，便利閱讀及搜尋，也必須讓網友可以很快找到感興趣的商品。」-樂天市場行銷部長陳婷婷。
資策會產業情報研究所(MIC)執行的「2013行動購物調查」指出，消費者每天使用行動裝置的平均時間為2.7小時，其中在瀏覽購物網站及使用APP的時間占其中的40分鐘，將近4分之1的時間在行動裝置瀏覽購物資訊。
以上幾點綜觀來看，行動裝置大大在持續改變消費者的上網習慣，而即將邁入4G時代的您，還能不設計行動裝置網頁嗎？隨著上網費率調降、 Wi-Fi 熱點如影隨形，這可是一塊不容忽視的市場。
電腦網頁與行動裝置網頁差異
對於行動版網頁有了初步的了解後，我們還必須考慮到行動裝置網頁和電腦版網頁的差異：
1. 您的消費族群經常使用智慧型手機瀏覽網頁嗎？
此點可透過 Google Analytics 功能中”目標對象”的”行動裝置”報表來分析，若是您的網站已經架設在即時互動科技的機房中，我們都會幫您設置好 Google Analytics 的追蹤碼，以便您了解您的客戶從何而來，是由電腦連線、手機或平板電腦瀏覽您的網站。
2. 原本的網頁是否有使用 Flash 動畫的部分? 您知道 Flash 動畫是不能顯示在 iOS 系統的手機(iPhone) 和平板電腦(iPad)嗎？
台灣有許多公司企業仍有使用 Flash 動畫的習慣，殊不知在 iOS 系統的行動裝置下，有許多使用者是看不到 Flash 的設計，這時候就必須考量是要重新請設計師製作行動裝置網頁，還是將現有電腦版網頁優化不顯示 Flash，而改用 HTML 5設計了。以客戶的案例舉例：
3. 行動裝置結合原生功能，也能讓你的客戶直接撥打網頁上的電話、開啟網路地圖或寫給客服email等，較電腦網頁多出許多優勢。
以往電腦網頁還需要額外付費給Skype，來讓網頁可以透過Skype撥打電話，現在透過手機原生的程式功能，只要懂得利用行動版網業的優勢，就能讓您的客人更快找到您。
4. 行動裝置解析度比電腦網頁小了許多，設計需要更簡潔，也需重新考慮瀏覽的視覺動線。
不知道您有沒有在手機瀏覽某些小的不能再小的網站經驗？然後再動動您的手指頭來回放大每個網頁……點選那好像永遠點不到的按鈕連結？若是行動裝置瀏覽網頁這麼不方便，您賣再高品質的商品也變得可惜許多。
沒有確切的想法嗎？給我們一個機會，讓我們為您服務。
觀察，從商品的品質細節著手
2013-07-23
這陣子，我們開始服務百貨專櫃飾品客戶，從客製化的APP設計開始，陸續延伸到飾品的網路行銷。每一次與客戶討論的過程，都能多了解台灣品牌在實體通路與網路行銷過程中的小故事，也許未來有機會能與大家分享。
因為一句話：
“「客戶的商品就是我們的亮點。」„
於是，在客戶的設計師最忙碌的情人節前夕，啟動了協助商品拍攝計畫：
客戶所提供的商品照片，並沒有實體商品來的亮眼，原本飾品的細節質感沒有被突顯，這是我們覺得可惜的地方。由於希望能讓APP裡的飾品圖片，能獲得手機用戶的關注，所以我們準備了一些小道具來協助拍攝 ：
1、黑色、灰色、白色紙張半開左右 X 1張
2、白色硬挺卡紙4K大小 X 2~3張
3、老機不敗之Nikon D90 X 1台
4、Nikon閃光燈+柔光罩 X 1個
5、雙面膠帶 X 1捲
6、刀片 X 1個
Step 1. 平光試拍
公司有大面的採光空間，我們先試以自然光的方式確認色光和白平衡。
陽光照射下平放拍攝試光
Step 2. 製作鏡頭用相機遮蔽掩體
用我們準備好的白色卡紙製做一個面積能夠cover住相機和攝影師手部的紙盒，家裡若有現成的餅盒也可以拿來替代，效果會比白色卡紙好喔。然後使用鏡頭蓋在紙盒中心內凹處畫一個相機蓋的輪廓，這是為了確保鏡頭可以套上紙盒，把相機主體和攝影師的手隱藏起來。
這個掩體我們總共做了三個顏色，黑色、灰色和白色三種，方便拍攝出不同的色彩反射。
Step 3. 用紙捲成圓形柔光棚
由於被攝體商品較小，我們就可以透過A3左右大小的白紙簡單捲成一個柔光棚，一來可以當作閃光燈的柔光罩，二來也很好固定拍攝高度。裡頭也可以適當放入黑色或灰色紙片條，讓圓周的1/3左右可以反射黑或灰色出來，增加銀飾的質感層次。
做成一個筒狀之後，將邊邊用雙面膠黏好，柔光攝影棚就簡單完成了！
Step 4. 定位拍攝
將飾品就定位，確認好商品固定的擺放位置後，就可以將商品放入拍攝囉！
Step 5. 拍攝成果
試了幾種不同的拍攝方式，還是覺得圓柱形紙捲最好用，我們來看一下老派的Before & After照片：
Before-
After-
這次的拍攝也試出了讓客戶點頭的品質，讓自認為攝影半調子的設計師們更有信心了些。我們相信設計思考不單只是把網站、程式、系統架設好就沒我們的事了。讓自己多用心去設想，協助客戶掌控商品的品質細節，這樣的作品就能更貼近設計師的設計初衷，如此才是客戶、用戶、設計師都能點頭認同的好作品！謝謝公司兩位辛苦協助攝影的設計師～
產品釋放正能量的情感化設計 ─ 胡澈
2013-07-08
每一個用戶都是飽含情感的個體，該如何最好地滿足他們的需求呢？人機交互過程(或稱人機互動設計)中該如何讓人和機器之間形成有效的溝通？畢竟一方是冷冰冰的機器，另一方卻是飽含情感的人！
在電影《卡薩布蘭卡》中，有這樣一段臺詞：“世上有那麼多的城鎮，每個城鎮有那麼多的酒館，她卻走進了我的。” 情感化設計所追求的目標，不過如此。
情感化設計並非是一種設計手法。我認為，這是一種圍繞產品體驗問題而引發出的設計理念。在設計美學中往往會提及人與物的關係。最重要一點便是處理人和物的關係，要從“人”的視角去看待產品。
一個普通的杯子，和其他的杯子沒有區別，但在不同人面前，卻會帶來不一樣的感觸。有人會讚歎杯子的外形設計合理，有人會質疑杯子為什麼沒有手柄，或許還有人會因為杯子的材質而擔心是否容易摔碎——人人都是哈姆雷特。
因此，情感化的目的就是當人使用產品時，由此帶來的體驗成為戳中你內心的溫柔一刀，讓用戶像亨弗萊·鮑嘉（Humphrey Bogart）那般喃喃地說：“天哪，她卻走進了我的酒館！”
站在人的視角
在互聯網(網際網路)產品設計中一定會涉及到兩個詞：“用戶價值”和“用戶體驗”。許多人都說要打造最佳用戶體驗，但卻不容易解釋這究竟是什麼。我認為，要解釋用戶體驗，必須解釋用戶價值。一個產品，首先是能用，然後是好用，最後還能帶來身心愉悅的感覺。用戶價值意味著滿足了“能用”的需求，而用戶體驗則由後面兩個環節決定，帶給用戶“好用”和“還想用”的體驗。
情感化設計便是增強用戶體驗的一種思路。
在極客公園的廣州活動中，一位名為 Jo 的年輕人展示了微信內部在研發的一款硬體產品：微信對講機。這款產品定位是當使用者在複雜情況下，可以簡單地使用語音對講功能。或許大家有疑惑，一款對講機，是否有重複造輪子的嫌疑？Jo 在接下來的講演中，充分地闡述了“情感化設計”在這款產品上的運用：
最開始的設計樣式是一支筆，便於攜帶和隨時使用。其中有意思的一個細節是，筆的頂端是一個可以插拔使用的耳機。Jo解釋這樣的設計是為了方便公開場合進行私密對話。第二個設計樣式更像對講機，可以吸附在汽車空調扇葉，方便自駕游的用戶隨時溝通。第三個設計樣式則結合了使用者場景考慮。Jo解釋開車過程中，無法區分對講機正反面，容易導致駕駛員難操作，也有可能引發開車事故，因此將麥克風從側面改到了頂端。第四個設計樣式是在之前產品上的優化，按鈕需要突出，方便通過觸感進行對話，而不需要用眼睛去判斷——畢竟，開車的時候目光離開前方一下，也有可能帶來危險。
真是讓人稱讚的設計！Jo在闡述設計理念的過程中，最關鍵的點就是從使用場景和使用者視角出發——假如我是用戶，我該怎麼使用？這是一種周密而貼心的考慮，只有從人的視角去看待問題，才會有這樣貼心的體驗。
從人的視角出發，使人感受到關懷——這便是情感化設計。
人機交互的情感關懷
巴斯卡說，人是一株會思考的蘆葦；我覺得還可以加一句：“人類飽含情感”。正因為“飽含情感”，所以產品情感化設計一定要關注用戶使用的情景和情緒。
就好像一本優秀的小說，情感化設計首先需要把使用者帶入到一種情境中，逐步從馬斯洛底層的“安全感”需求出發，一級一級滿足最頂層的“自我實現”需求；然後通過展開劇情，將用戶帶入到故事中。 QQ 空間團隊的黃希彤講了這樣一個故事。
當用戶打開一個網站，因為某些原因看到 404 頁面，會是什麼樣的心情？如果只是一個寫著 404 無法訪問的簡單頁面，誰都會覺得這個頁面冷冰冰，甚至是影響心情。但是如果在這樣的頁面上，加入一些公益元素，讓這個原本表示無法訪問的頁面變得有愛有故事，讓人關注公益，傳播一種“正能量”，是否更佳呢？
把原本冷冰冰的伺服器回饋改成充滿人情味的公益頁面，讓人得到情感上的關懷，這也是情感化設計的體現。
情感化的回饋機制
人是需要得到認同和回饋的。目前太多的產品沒有從人的視角出發，去滿足“認同和回饋”的情感化需求。
當我悲傷，我需要安慰；當我快樂，我需要分享。每個人無時無刻不在接觸著各種產品。當遭遇一款缺乏情感化設計的產品，使用中帶來各種不便和挫敗感時，你有什麼感想？
這種情況應該被改善。Google Doodle 充滿趣味，Flickr 注重提供溫馨提醒，QQ 努力提供盲人使用的版本——許多互聯網公司已經讓情感化設計深入人心。
一點點情感化的設計改進，影響的是上萬甚至上億的用戶體驗。我希望越來越多的產品在設計中加入一點“人情味”，讓情感化設計更加流行。這才是真正的正能量，不是嗎？
作者：胡澈 / 產品觀察者，目前為產品經理
原文網址：http://www.geekpark.net/read/view/183732
企業架站規劃與電子商務設計
2013-01-18
即時互動科技提供的網站建置/網頁設計方案 Web Design Service Overview
隨著數位科技與行銷工具的不斷進步，網站設計的需求已經變成一間企業公司所必備的基本行銷管道之一，我們聽到了您的心聲，我們整合您的需求，讓傾聽和溝通的即時互動就在您身邊。一個網站能夠達成什麼樣的任務和效益？有多少人看？怎麼樣把客戶從google search帶到您的網站去？這都是我們會關心的事情。
即時互動針對市場上有網站需求的您，提供以下的方案參考：
1.形象官方網站
形象型官方網站提供您豐富且專業的網頁設計，從首頁開始幫您考量公司產品的曝光方式，建立即時動態的特色形象幫您設計，您可以選擇形象官方網站來做以下的事情：
輪播的產品形象牆
發佈最新消息
使用相簿系統
訊息互動留言
Facebook粉絲頁行銷、分享
其他社群行銷分享
線上回函機制
Google Map整合聯絡我們…等
看更多網站設計案例
2.購物車系統網站(電子商務網站)
電子商務的時代來臨，您不只需要的是一個完善的購物車系統，除了完整的銷售報表分析，商品庫存管理，即時互動的購物車系統能幫您規畫出一套完整的展售購物網站！目前已有許多成功的案例，如：Lativ、天母嚴選、Gracegift等。您可以選擇購物車系統網站來做以下的事情：
輪播的產品形象牆
發佈促銷廣告訊息
商品相簿預覽
多重廣告曝光欄位
Facebook粉絲頁、Google+、Plurk、Line等病毒式行銷分享
訂單通知與進銷存管理
商品折扣與運費管理…等
看更多網站設計案例
3.客製化網站設計
除了以上兩種網站設計方案的功能外，您也可以客製化您的網站，提出您的網頁設計詳細需求，靈活的管理後台和維護教學，我們會為您客製出更完善的網站設計，您可以透過客製化網站來達成以下的效益：
彈性調整設計版面
彈性調整系統功能
企業識別設計(CIS)
跨系統整合功能
獨一無二的版型設計
社群、行銷等跨媒體整合
企業形象官方網站
2013-01-17
企業形象官方網站建置類型 Solutions of Website Plan
公司網站、形象網站、官方網站、機關單位網站
拍賣整合系統網站
個人網站、作品集網站、藝廊展示網站
專業部落格、網路相簿
企業型官方網站適用產業
食品餐飲業官方網站
營造建築業官方網站
旅遊娛樂業官方網站
精品服飾業官方網站
教育型官方網站
機關行官方網站
手機版官方網站
個人官方網站…等
官方網站售後服務
市場上各式各樣的產業官方網站充斥在您的眼前，但是真正能夠幫一個網站做完了之後的服務有哪些？維護項目有哪些？即時互動不只幫您解決了網站設計的問題，也提供人性化的維護售後服務，是一般低價網站架設所不能夠提供的貼心服務。即時互動提供一年的免費售後服務：
技術諮詢與使用教學
網站頁面圖片或文字修改
網站系統穩定性檢查
網站資料備份(限使用即時互動伺服器之客戶)
安全性檢查、病毒防護
電子商務購物網站設計
2013-01-16
電子商務購物網站建置類型 Solutions of EC Website Plan
公司購物網站、網拍購物網站、網路商店
拍賣整合購物系統網站
團購電子商務網站
其他客製化購物網站
電子商務購物網站適用產業
食品餐飲業
營造建築業
旅遊娛樂業
精品服飾業
藝文設計類
手機版電子商務網站…等
電子商務購物網站售後服務 After-sales service
一個好的購物網站，除了幫您搞定訂單、出貨管理，即時互動不只幫您解決了購物網站的常見問題，也提供人性化的維護售後服務，是一般低價網站架設所不能夠提供的貼心服務。即時互動提供一年的免費售後服務：
技術諮詢與使用教學
網站頁面圖片或文字修改
網站系統穩定性檢查
網站資料備份(限使用即時互動伺服器之客戶)
安全性檢查、病毒防護