# 能否缩短应用内工具栏的高度？

**URL:** <https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511>\
**Category:** UX\
**Created:** [2019年五月12日 14:13 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511 "2019-05-12T14:13:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2019年五月12日 14:13 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/1 "2019-05-12T14:13:25Z")

</div>

I get the idea that you want it above the black bar, but this is definitely too large.

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/2/c27d721fe41e0c5e2bd1eaebb2485070f8b42d93.jpeg)

Making it a bit smaller would be really nice.

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2019年五月12日 14:16 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/2 "2019-05-12T14:16:17Z")

</div>

Seems to depend on iPhone model. On a 7 it looks like this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/2/828731f9792abf52ac0a2c7be98361f0f4f5aeb9.jpeg)

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2019年五月12日 14:18 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/3 "2019-05-12T14:18:17Z")

</div>

Exactly - I’d like it to be about that large (or a bit smaller even) above the top of the black bar.

As is, it’s definitely larger.

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年五月12日 14:39 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/4 "2019-05-12T14:39:33Z")

</div>

AFAIK that’s not app code, it’s something you can change with CSS. Have you tried?

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2019年五月12日 14:41 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/5 "2019-05-12T14:41:57Z")

</div>

No, and as I have not personally used CSS before and am currently working 12 hours a day, seven days a week, I can’t really afford to look into it myself.

More than willing to follow instructions though. 🙂

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年五月12日 14:43 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/6 "2019-05-12T14:43:39Z")

</div>

Take a look at:

[https://github.com/discourse/discourse/commit/eae22548de4eedad875555e7353b8abfdce2452b](https://github.com/discourse/discourse/commit/eae22548de4eedad875555e7353b8abfdce2452b)

It’s going to be much easier for you to suggest specific amendments you’ve proven to improve matters than just tell us you dislike something.

Personally I think the row is the right height, because otherwise the tap targets would be too close to the bottom of the screen when holding the device one-handed. I don’t have large hands, either.

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2019年五月12日 15:31 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/7 "2019-05-12T15:31:38Z")

</div>

I’m curious how you end up unable to reach the bottom at any point? The device’s entire navigation scheme revolves around the bottom bar, so you’d expect someone to be unable to reach the _top_ of the phone instead. That’s why the swipe-down reachability feature exists, after all.

I’ll give it a look later, thanks for the link. 🙂

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年五月12日 16:16 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/8 "2019-05-12T16:16:40Z")

</div>

The four icons at the bottom of the app are aligned with the middle of the dock icons on my iPhone X. In that sense @pmusaraj mimicked what the iPhone does natively.

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2019年五月12日 16:56 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/9 "2019-05-12T16:56:47Z")

</div>

Closer inspection shows that they’re actually a bit higher (although I’m still wanting them lower and will be looking into that later).

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年五月12日 17:50 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/10 "2019-05-12T17:50:00Z")

</div>

Curious, this is a direct overlay - discourse app versus iOS dock from the iPhone X:

 ![overlay](https://global.discourse-cdn.com/meta/original/3X/5/7/57298b32321e7ae183de81f0b3bab5ad5fbb9ed3.png)

In terms of the height of that row, the center falls 6mm above the tap target to return to the homescreen or switch apps.

And this is the iPhone 7 Plus, the icons can be lower here as the phone both has a huge chin, and lacks an in-screen app switching hotspot:

 ![overlay7](https://global.discourse-cdn.com/meta/original/3X/e/c/ecb5c06711fc74ed5007647d246b7cb4fb34d04e.png)

It’s 4mm from the bottom row of the display.

---

<div class="post-metadata">

**Author:** ![gingerbeardman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gingerbeardman/32/540824_2.png) [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)\
**Post date:** [2019年五月12日 18:58 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/11 "2019-05-12T18:58:09Z")

</div>

The hit areas on those discourse could do with being taller.

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/4/44d07e2b93c99698c1557af64cc18be438a2a282.jpeg)

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2019年五月12日 18:59 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/12 "2019-05-12T18:59:10Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/d/4/d44a4d210b834fdd1f88e1ac9b8ebe7b76eab7cf.jpeg)

Hit area in grey

Clearly higher up than it seems it _should_ be

---

<div class="post-metadata">

**Author:** ![gingerbeardman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gingerbeardman/32/540824_2.png) [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)\
**Post date:** [2019年五月12日 19:00 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/13 "2019-05-12T19:00:16Z")

</div>

Ah you saw my comment before my edit. I think they could be taller?

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年五月12日 19:19 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/14 "2019-05-12T19:19:47Z")

</div>

Looking at Apples human interface guidelines for designing around the screen of the X, they actually carve out this whole region around the home indicator:

 ![hig2](https://global.discourse-cdn.com/meta/original/3X/4/c/4cff0ae6fa3a0215928b77b5ed8745a277af710e.png)

On Springboard that overlays the bottom of the icons. I think @pmusaraj as gotten the position pretty close, they could be a few pixels taller maybe, but if people get used to tapping low on the icon they just risk hitting the wrong element entirely.

---

<div class="post-metadata">

**Author:** ![gingerbeardman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gingerbeardman/32/540824_2.png) [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)\
**Post date:** [2019年五月12日 19:35 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/15 "2019-05-12T19:35:23Z")

</div>

In the HID there’s a recommended minimum size for buttons.

> **Provide ample touch targets for interactive elements.** Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

> **[Layout | Apple Developer Documentation](https://developer.apple.com/design/human-interface-guidelines/layout)**
>
> A consistent layout that adapts to various contexts makes your experience more approachable and helps people enjoy their favorite apps and games on all their devices.

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年五月12日 19:49 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/16 "2019-05-12T19:49:27Z")

</div>

Correct, that’s measured in points. The button is 120 pixels tall and 225 pixels wide, at 458 ppi that’s 19x36 points.

The buttons are currently a little small, but 40 points is 14mm/0.56 inches. Can you imagine what Discourse would look like if all the interactive elements were bumped up to that size?

---

<div class="post-metadata">

**Author:** ![gingerbeardman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gingerbeardman/32/540824_2.png) [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)\
**Post date:** [2019年五月12日 19:50 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/17 "2019-05-12T19:50:21Z")

</div>

I’m only asking for the navigation controls to be increased.

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [2019年五月12日 19:52 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/18 "2019-05-12T19:52:39Z")

</div>

As you and @orangeandblack5 seem to be asking for stuff which to a certain extent conflicts, I vote it’s decided either by @codinghorror, or a cage fight.

But probably @codinghorror.

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2019年五月12日 19:53 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/19 "2019-05-12T19:53:06Z")

</div>

To be fair, I am the OP 😛

---

<div class="post-metadata">

**Author:** ![gingerbeardman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gingerbeardman/32/540824_2.png) [@gingerbeardman](https://meta.discourse.org/u/gingerbeardman)\
**Post date:** [2019年五月12日 19:55 UTC](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511/20 "2019-05-12T19:55:13Z")

</div>

True, how very rude of me.

I’m sure there’s a compromise of a smaller chin and bigger teeth (buttons) 😬

[下一頁](https://meta.discourse.org/t/can-the-in-app-toolbar-be-made-shorter/117511.md?page=2)
