LV. 16
GP 442

【心得】對自己技術沒自信,就不要覆寫網頁原生物件

樓主 奈津 syc242
GP21 BP-
巴哈最近改版頻繁,界面跟功能有著大幅度的進步

眼尖的人可能注意到了,圖片上傳的小視窗也俏俏改版
而不再是那個陽春的界面

舊版的

新版的



有學過網頁設計的人一定一眼就能看出,舊版的那是原生的網頁物件
只要一行「<input type="file">」就能產生上傳檔案的網頁物件

這個上傳檔案的物件並不能進行太多樣式的修改
所以這時候很多經驗不足的設計師就會犯下一個致命錯誤
不使用原生物件,而是製作一個具有相同功能的物件來取代

這聽起來很容易,實際上非常困難
每個瀏覽器解析出來的網頁都會有些許差異,甚至現在還有行動裝置,要完美實現「原生物件的所有功能」是非常困難,而且非常容易出現BUG的「挑戰」






以巴哈做例子,新版的界面導致「拖曳上傳」的功能失效了
網頁原生的檔案上傳物件是支援拖曳上傳的

像是這樣,把檔案直接拖拉到框裡面即可上傳
在這巴哈新版的界面辦不到



還有另一個初學者常犯的錯誤
覆寫網頁捲軸
這是 北京故宮 的網站
界面做的非常漂亮,但是使用者體驗非常糟糕
糟糕到我一個字都看不下去,就只因為他覆寫了原生的網頁捲軸
當使用者捲動網頁的速率與一般網頁不一樣,就會認定「這個網頁很LAG」
除了捲動看起來卡頓外,這還會讓使用者沒辦法按下滑鼠中間的滾輪來快速捲動網頁
(這個功能在MAC或一些Linux上面似乎沒有



其他還有很多,像是

覆寫超連結,改用JavaScript來切換網頁
原生的超了連接具備了以下功能:

  • 超連結點過後會改變顏色,因為有安全性限制,js或css都沒辦法模擬此功能
  • 增加在搜尋引擎的曝光率,也就是所謂的SEO
  • 按著Ctrl點擊超連結,會使用新分頁打開
  • 用滑鼠中間的滾輪點擊超連結,會使用新分頁打開


覆寫img標籤,使用DIV的背景圖來顯示圖片
原生的img具備以下功能:

  • 增加在搜尋引擎的曝光率,設定title屬性的話可以二次增加
  • 使用者可以直接拖拉圖片到桌面或資料夾裡面,來進行儲存圖片
  • 使用者可以把圖片拖拉到瀏覽器上方分頁的位置,就會用新分頁開啟圖片
  • 電腦可以右鍵儲存圖片,手機可以長按儲存圖片


使用圖片或其他物件替代文字
文字具備以下功能:

  • 增加在搜尋引擎的曝光率
  • 使用者可以透過瀏覽器的設定修改文字大小或字體
  • 使用者可以選取複製文字
  • 因為有 ClearType 之類的技術,所以在螢幕看起來會比較舒服





補充
深海異音在 js深色主題 裡面有幫巴哈修復了圖片不能拖曳上傳的問題




原理其實很簡單讓原本的<input type="file">變成透明的
然後覆蓋在新版的檔案上傳物件上面就行了

也就是說,使用者操作的是原生的檔案上傳物件
但因為原生物件設定成透明的,所以使用者看到的是另外製作的檔案上傳物件
如此一來就能同時具備原生功能與漂亮外觀
.dialogify .uploadimage-old {
  position: relative;
}
.dialogify .uploadimage-old input[type="file"] {
  display: block;
  position: absolute;
  left: -320px;
  top: 0px;
  opacity: 0;
  width: 310px;
  height: 35px;
}


本文經過 深海異音(hbl917070)同意轉載


21
-
LV. 21
GP 551
2 樓 (๑•́ ₃•̀){影ヨ⁆ aeGK0
GP0 BP-
其實,好像自從這新導覽條等等的介面改動出來後,就都有多出些許以往沒出現的小(甚是大的) Bug ……

所以,是覺得:「與其給使用者視覺雖好;不夠完善的介面……
那還不如原先幾乎沒什麼狀況、問題的良好介面來得好。」








舉例來說(或許也可能弄錯) :好友圈(含黑名單的選擇)的右側,可輸入把帳號增成好友或黑單那裏的確定鈕。
按第壹下的時候沒反應;得第貳下(←原來這邊狀況是「出現反應時間有點慢的緣故」)……處理完成後,
「訊息:處理中,請稍後。」的對話框產生不消失的狀況……

然而,代表已完成的方塊訊息;「系統訊息」卻因為上個訊息未自動消失……導致於它出現在底下,
而得多按旁邊才能去按確定鈕。


雖然上例,或許稍微小事了點……但是,若是還有其他為數不少的問題在等著的話……那就是對使用者來說,是件麻煩事囉!
0
-
LV. 20
GP 173
3 樓 憨夫 MonkeyDLuf
GP7 BP-
如果注意到的話其實預計開發項目早就寫到上傳圖片功能要改版 之後就會改。

既然已經說過上傳準備流程要改了,
再看看標題我是覺得挺可笑的     (喝茶。

可撥
7
-
板務人員:

270 筆精華,04/11 更新
一個月內新增 0
歡迎加入共同維護。


face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】