适配平板的导航
我们把原本在手机上使用的导航应用扩展为同一个应用即可在手机和平板上运行。平板以放在车内、当作导航设备使用的场景为基准。这是驾驶中查看的界面,若把手机界面直接放大,导航信息会难以阅读、操作也会变得麻烦,因此我们设计了把共通功能合为一体、按设备分开管理界面差异的结构。工作范围从应用结构设计到平板界面与分辨率适配。
共通功能合一、界面差异按设备拆分的应用结构
我们设计了让一个导航应用同时支持手机和平板的应用结构。路线搜索、路线引导等共通功能保持不变,只把随设备而变的界面构成单独拆分管理。修改功能时只需改一处,界面则可以按设备尺寸分别调整。

为地图、路线引导、周边信息与操作留出更大空间的平板布局
平板导航界面分为地图、路线引导、周边信息和操作区域四个部分进行布置。我们没有直接拉伸手机界面,而是按变大的面积把四个区域分别重新构成,使其更宽敞、更易读。每个区域分配多少空间,以在车内把平板当作导航设备使用的情境为基准来决定。

为驾驶中一瞥即读而定的车载界面标准
平板导航放在车内、在驾驶中查看,因此首先考虑可读性与可操作性。驾驶者不能长时间盯着屏幕,导航文字和距离显示必须一瞥就能读懂。操作也以几次触摸即可完成为标准来调整界面。

尺寸与分辨率不同也稳定显示的地图与引导
手机和平板的屏幕尺寸与分辨率各不相同,直接沿用同一布局,地图和引导就会显得错位。我们根据各设备的尺寸与分辨率差异调整界面结构,让地图界面和引导界面在任何设备上都能稳定显示。这项工作把先前手机版的基础扩展到更大的屏幕,并延续到了同时支持多种设备的下一个版本。

项目亮点
以一个应用同时支持手机与平板的结构
地图、路线引导、周边信息与操作区域更宽敞的平板界面
适配不同设备的屏幕尺寸与分辨率
洞察
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



